Question

我是棱角分明的新手。我正在尝试构建简单的应用程序，如果如果我通过ng-route加载它无法找到view1.html而如果我从相同的index.html加载它可以工作。我已经通过same issue跟踪帖子，其中我们注入了ng-route的ibrary依赖关系，但它仍无法正常工作

  index.html

 <!DOCTYPE html>
  <html ng-app="demo">
  <head >
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">   </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js">
  </script>
  </head>

  <body> Test 
  <div ng-view=""> </div>
  <script>
    var demo = angular.module('demo',['ngRoute']);
    demo.config(function($routeProvider) {
         $routeProvider.when('/', 
             {
                  controller:'showswitch',
                  templateUrl: 'view1.html'
             })
             .otherwise({redirectTo:'/'})
    });

    demo.controller('showswitch', function($scope) {
        $scope.phones = [
        {'name': 'Nexus S',
        'snippet': 'Fast just got faster with Nexus S.',
            'age': 1},
        {'name': 'Motorola XOOM™ with Wi-Fi',
        'snippet': 'The Next, Next Generation tablet.',
             'age': 2},
        {'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'age': 3}
    ];
    });

   </script>
   </body>
   </html>

（view1和index在同一目录下）

view1.html

<div>
<h1> View1 </h1>
<input ng-model="query">
<select ng-model="orderProp">
    <option value="name">Alpha</option>
    <option value="age">Age</option>
</select>
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>

ng-route无法加载视图

0 个答案: