2015-08-20

AngularJS学习笔记5——路由

angularjs 的 ngRoute 模块提供了前端路由的功能。
在 angularjs 1.3 中 route 模块被单独提取了出来，要使用其功能需要将引用进来。

1 2	<script src="/lib/angular-1.3.15.min.js"></script> <script src="/lib/angular-route-1.3.15.min.js"></script>

var routeApp = angular.module('routeApp', ['ngRoute']);
routeApp.config(['$routeProvider',function ($routeProvider) {
    $routeProvider
    .when('/list', {
      templateUrl: 'list.html',
      controller: 'RouteListCtl'
    })
    .when('/list/:id', {
        templateUrl: 'detail.html',
        controller: 'RouteDetailCtl'
    })
    .otherwise({
      redirectTo: '/list'
    });
}]);

这里定义了两条路由规则，对应的视图模板分别为 list.html 和 detail.html

视图模板有三种定义方式：
方法1：编写在单独的文件中，然后 angularjs 通过 ajax 获取其内容；
方法2：直接在页面中使用 script 标签定义，如： <script type="text/ng-template" id="list.html"> .... </script>；
方法3：使用 $templateCache 进行定义，如:

1
2
3

routeApp.run(function($templateCache) {
  $templateCache.put('list.html', '...');
});