Question

我正在使用AngularJS教程从Tuts + Easier JavaScript应用程序学习Angularjs。现在，我正处于使用ng-view讨论Routing Primer的部分。我试图在索引页的ng-view中显示列表页面内容。出于某种原因，当我加载index.html时没有显示任何内容。我从搜索中发现，从角度1.2.0开始，ngRoute已被移动到自己的模块中。我必须单独加载它并声明依赖项。但我仍然无法在列表页面显示任何内容。

的index.html

<!doctype html>
<html ng-app="myApp">
  <head>
  <title>Angular App</title>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <div ng-view></div>
    </div>
  </body>
</html>

list.html

<h3>List</h3>
<ul>
    <li ng-repeat="contact in contacts">
      <a href="#">{{contact.name}}</a>: {{contact.number}}
    </li>
</ul>

app.js

    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        });
    });

    app.controller('Ctrl', function($scope){
        $scope.contacts = [
            { name: 'Shuvro', number: '1234' },
            { name: 'Ashif', number: '4321' },
            { name: 'Anik', number: '2314' }
        ];
    });

Answer 1

从div中删除ng-controller，如下所示：

<body>
<div >
  <div ng-view></div>
</div>
</body>

无效＆＃34;错失路线＆＃34;将otherwise添加到主要配置中，例如：otherwise({ redirectTo: '/'});

app.config(function($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: 'list.html',
            controller: 'Ctrl'
        }).otherwise({ redirectTo: '/'});
});

<强> Online Demo

Angularjs ng-view不显示数据

1 个答案: