AngularJS第六课（路由）

路由

实例：

<body ng-app="routeDemoApp">

        <h1>AngularJS的路由</h1>
        <ul>
            <li><a href="#/">index</a></li>
            <li><a href="#/firstPage">firstPage</a></li>
            <li><a href="#/secondPage">secondPage</a></li>
            <li><a href="#/footer">footer</a></li>
        </ul>
        <!--3.使用了ng-view，会使得该部分的内容随路由的转变而转变-->
        <div ng-view></div>

    <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <!--1.实现载入路由的js文件-->
    <script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script>
    //2.ngRoute作为依赖模块
    //4.routeProvider用来提供路由规则
    //5.congfig提供了配置路由的功能
    //6.when（path，object（路由设置对象））
        angular.module('routeDemoApp',['ngRoute']).config(['$routeProvider',function($routeProvider){
                $routeProvider
                .when('/',{template:"这是首页"})
                .when('/firstPage',{template:"这是第一页"})
                .when('/secondPage',{template:"这是第二页"})
                .when('/footer',{template:"这是尾页"})
            }
        ]);
    </script>

路由设置对象

$routeProvider.when(url,{路由配置对象});

路由配置对象：

tamplate：在ng-view中插入简单的HTML内容
.tamplateUrl：在ng-view中插入HTML模版（该模版会从tamplate指定的url的服务器上获取）
controller：获取当前的controller
controllerAs：为controller指定别名
redirectTo：重定向地址
resolve：指定controller依赖模块