web-dev-qa-db-ja.com

WebサーバーなしのAngularJSルーティング

シンクライアント用のhtml5SPAアプリケーションを開発したい。その上でWebサーバーを起動する方法はありません。そして、Webサーバーなしではルーティングを機能させることはできません。

私のindex.html

<!doctype html>
   <html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="app.js"></script>
    <title></title>
</head>
<body style="background-color: white;">
    <h1>Index</h1>
    <a id="link" href="/login">Go to login</a>
    <div ng-controller="HomeCtrl">
        <ul ng-repeat="number in numbers" >
            <li>{{number}}</li>
        </ul>
    </div>
</body>
</html>

私のapp.js

angular.module('app', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
      when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
      otherwise({redirectTo:'/'});
  });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}

このコードをChromeのコンピューターでローカルにテストしています。データバインディングは魅力のように機能していますが、ログインページへのリンクは魅力的ではありません。 {X}：\ loginにつながります。だから私の質問は：それをウェブサーバーなしで動作させることは可能ですか？そして第二に、それを成し遂げるために私が欠けているものは何ですか？

routingangularjssingle-page-application
11
dantix

しばらくして、動作させました。

最初は、この作品を別のファイルに移動しました

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

第二に、index.htmlこのdivを追加しました

<div ng-view></div>

ビューのプレースホルダーとして使用されます。

今index.htmlは、asp.netに精通している場合、「マスターページ」または「レイアウト」として使用されます。リンクをクリックすると、templateUrlファイルのコンテンツがプレースホルダーdivに挿入されます。

これの欠点は、URLが次のようになることです<a href="#/login"></a>

4
dantix

スクリプトタグを使用してテンプレートをindex.html自体に配置する必要があります。これにより、angularは、テンプレートをフェッチするためにAJAXリクエストを行う必要がなくなります。

<script type="text/ng-template" id="home.html">
  This is the content of the template
</script>
5
Saidh

Angularはクライアント側のJSフレームワークであるため、Webサーバーは必要ありません。 （すでに理解しているように）ng-viewを追加することに加えて、リンクの前にハッシュバンを付ける必要があります（#/login）、html5modeを使用している場合を除きます。

したがって、URLにハッシュバンを含めることは欠点ではなく、オプションです。

2
Stewie

この問題の解決策[ クロスオリジンリクエストはHTTPでのみサポートされています ]は私にとってはうまくいきます。
しかし、実際にはわかりません。ngViewとngRouteを使用して、Webサーバーなしでどのように機能させることができますか？
index.htmlの外にlogin.htmlを取得するようにngRouteを構成します。つまり、ファイルをロードするためにAJAXサービスを使用していますが、AJAX =サービスはWebサーバーなしでは機能しません。そのため、問題が発生しました。

1
Jennie Ji

ここに http://docs.angularjs.org/api/ng 。$ routeからのいくつかのコードがあります

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);

同じことがあなたにも役立つと思います。

1
ardentum-c