2014-06-22 71 views
4

我正在通过Tuts +带有AngularJS教程的更简单的JavaScript应用程序学习Angularjs。现在我正在使用ng-view讨论Routing Primer。我试图在索引页的ng-view中显示列表页面内容。出于某种原因,当我加载index.html时没有显示任何内容。我从搜索中发现,从angular 1.2.0开始,ngRoute已经被移植到它自己的模块中。我必须单独加载它并声明依赖关系。但是我仍然无法显示我的列表页面上的任何内容。Angularjs ng-view not showing data

的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' } 
     ]; 
    }); 

回答

5

取出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: '/'}); 
}); 

Online Demo

+0

我删除了NG-控制器和添加否则routeprovider如你所说,但仍没有显示。 – Shuvro

+0

在我的浏览器中显示的网址是'file:/// C:/Users/Shuvro/Desktop/AngularApp/index.html#/'。如果这有助于找到我想念的东西。 – Shuvro

+0

@Shuvro它在我的结束[**在线演示**](http://plnkr.co/edit/QVH9ZadvJvurHhQdqVyS?p=preview) – Dalorzo