AngularJS视图不显示数据

debugcn 发表于 Dev

舒夫罗

我正在使用AngularJS教程从Tuts + Easier JavaScript Apps学习Angularjs。现在，我在他们讨论使用ng-view进行路由入门的那一部分。我试图在索引页面的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' }
        ];
    });

达洛佐

ng-controller像这样从div中删除：

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

要使“错过路线”无效otherwise，请在主配置中添加，例如：otherwise({ redirectTo: '/'});

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

在线演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。