Question

我是AngularJS的新手，我构建了一个简单的应用程序，其中包含以下页面。

1）index.html

2）View1.html

3）View2.html

我面临的问题是将应用程序路由到View1和View2。没有输出和浏览器。经过一些研究后，我意识到从Angular 1.2版开始，分离出＃angular; route-route.js＆＃34;我需要包含文件，但没有帮助。你能不能研究一下并提供解决方案。

PS：我是Angular的新手，所以如果我犯了一个小错误，请饶恕我。

这是我的代码。

的index.html

==

View1.html

<html data-ng-app="demoApp">
<head>
    <title>Using AngularJS Directives and Data Binding</title>
    <meta charset="UTF-8">
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
</head>

<body>
    <div>
        <!--Placeholder for Views-->
        <div data-ng-view=""></div>
    </div>
    <script>
        var demoApp = angular.module('demoApp',['ngRoute']);

        demoApp.config(function($routeProvider){

        //demoApp.config(['$routeProvider',function($routeProvider){

                    $routeProvider
                    .when('/view1',{
                           controller: 'SimpleController',
                           templateurl: 'Partials/View1.html'
                     })

                     .when('/view2',{
                           controller: 'SimpleController',
                           templateurl: 'Partials/View1.html'
                     })

                     .otherwise({ redirectTo: '/view1'});
        });

        demoApp.controller('SimpleController', function ($scope) {
            $scope.customers = [ 
                 {name:'John Smith', city:'Phoenix'},
                 {name:'John Doe', city:'New York'},
                 {name:'Jane Doe', city:'San Fancisco'}
            ];

            $scope.addCustomer = function() {
              $scope.customers.push(
                      {
                          name: $scope.newCustomer.name,
                          city: $scope.newCustomer.city
                      });
                 }; 
            });

       </script>
</body>

View2.html

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

Answer 1

错字：

templateurl: 'Partials/View1.html'

应该是

templateUrl: 'Partials/View1.html'

由于没有提供模板，Angular不会加载任何内容。

Answer 2

请从html标记中删除ng-app并将其添加到正文标记中。

ngRoute在没有错误报告给控制台时不工作

2 个答案: