12

シン クライアント用の html5 SPA アプリケーションを開発したいと考えています。その上で 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 につながっています。だから私の質問は次のとおりです。Webサーバーで動作させることは可能ですか? そして第二に、それを成し遂げるために何が欠けていますか?

4

5 に答える 5

4

しばらくすると、動作するようになりました。

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

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

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

<div ng-view></div>

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

asp.netindex.htmlに慣れている場合は、「マスター ページ」または「レイアウト」として使用されるようになりました。リンクをクリックすると、templateUrl ファイルの内容がプレースホルダー div に挿入されます。

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

于 2013-03-28T09:48:07.603 に答える
2

Angular はクライアント側の JS フレームワークであるため、Web サーバーは必要ありません。ng-view を追加するだけでなく (すでにわかっているように)、html5mode#/loginを使用していない限り、リンクの前にハッシュバン ( ) が必要です。

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

于 2013-03-28T09:52:29.793 に答える
1

http://docs.angularjs.org/api/ng .$routeからのいくつかのコード

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

同じことがあなたにも当てはまると思います。

于 2013-03-28T09:39:14.447 に答える