2

AngularJS を試してみて、Dan Wahlin の youtube ビデオを見ていて、Chrome または IE でルーティングを機能させることができません。FireFox ではすべて正常に動作しますが、それだけです。空白のページが表示されるだけです。誰が何が間違っているのか知っていますか？

コードは次のとおりです。

索引.html

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
    <title></title>
    <script src="angular.min.js"></script>
    <script src="foo.js"></script>
</head>
<body>
        <!-- Placeholder for views-->
        <div data-ng-view=""></div>
</body> 
</html>

foo.js

var demoApp = angular.module('demoApp',[]);

demoApp.config(function($routeProvider){
    $routeProvider.when('/view1',{templateUrl: 'Partials/View1.html',controller: 'SimpleController'});
    $routeProvider.when('/view2',{templateUrl: 'Partials/View2.html',controller: 'SimpleController'});
    $routeProvider.otherwise({redirectTo: '/view1'});
});
var controllers = {};
controllers.SimpleController = function($scope){
    $scope.customers = [
        {name:'John Doe',city:'Phoenix'},
        {name:'Jane Doe',city:'New York'},
        {name:'Terrence Winter',city:'Los Angeles'},
        {name:'Barack Obama',city:'Washington DC'}
    ];
    $scope.addCustomer = function(){
        $scope.customers.push(
            {
                name: $scope.newCustomer.name, 
                city: $scope.newCustomer.city
            });
    };
}
demoApp.controller(controllers);

View1.html

<div class="container">
    <h3>View 1</h3>
    Name:
    <br>
    <input type="text" data-ng-model="filter.name"/>
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'name'"> {{cust.name}} - {{cust.city}}</li>
    </ul>
    <br>
    Customer Name: <br>
    <input type="text" data-ng-model="newCustomer.name"/>
    <br>
    Customer City: <br>
    <input type="text" data-ng-model="newCustomer.city"/>
    <br>
    <button data-ng-click="addCustomer()">Add Customer</button>
    <br>
    <a href="#/view2">View 2</a>
</div>

View2.html

<div class="container">
<h3>View 2</h3>
<input type="text" data-ng-model="city"/>
    <br>
    <ul>
        <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'"> {{cust.name}} - {{cust.city}}</li>
    </ul>
</div>
4

3 に答える 3

3

テンプレートは AJAX 経由で読み込まれるため、Chrome ではこれが許可されません。この問題は、npm を使用して単純な http サーバーをセットアップすることで解決できます。

nodejs コマンド プロンプトでプロジェクト フォルダーに移動します。そしてタイプ

npm install http-server -g

これにより、マシンに http サーバーがインストールされます。

次に、コマンドを使用してサーバーを起動します

http サーバー

次に、サーバーが起動した IP とポートを使用してファイルを実行します。ルーティングは Chrome でも機能します。

于 2017-05-31T09:22:31.353 に答える