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

Chrome 不允许这样做，因为模板是通过 AJAX 加载的。您可以通过使用 npm 设置一个简单的 http 服务器来解决此问题。

在 nodejs 命令提示符下转到您的项目文件夹。并输入

npm 安装 http-server -g

这将在您的机器上安装 http 服务器。

然后使用命令启动你的服务器

http服务器

现在，使用服务器启动的 ip 和端口运行文件，然后就可以了！路由也适用于 Chrome。

于 2017-05-31T09:22:31.353 回答
2

如果您在本地对其进行了测试，则可能是 chrome 阻止了要加载视图的本地 html 文件。您在控制台中有任何错误吗？

于 2013-07-18T15:18:14.417 回答
0

如下更改您的角度模块：

var demoApp = angular.module('demoApp',["ngRoute"]);
于 2017-02-15T10:45:11.613 回答