多重视图和路由

多重视图和路由

1.     布局模板

要创建一个布局模板，需要修改HTML以告诉AngularJs将模板渲染到何处，通过将ng-view 指令和路由组合到一起，我们可以精确的指定当前路由所对应的模板在DOM中的渲染位置。

<header>
    <h1>header</h1>
</header>
<div class="content">
    <div ng-view></div>
</div>
<footer>
    <h5>footer</h5>
</footer>

ng-view 是由ngRoute模块提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容更占位。

ng-view指令遵循以下规则：

       每次触发$routeChangeSuccess事件，视图都会更新。

       如果某个模板同当前路由相关联，则：

                A.     创建一个新的作用域  

                B.     移除上一个视图，同时移除上一个作用域

                C.     将新的作用域同当前模板关联在一起

                D.    如果路由中有相关的定义，则把对应的控制器同当前作用域关联起来

                E.     触发$viewContentLoad事件

                F.      如果提供了onLoad属性，则调用该属性所指定的函数。

2.     路由

用when和otherwise两个方法来定义应用的路由。

angular.module("myApp",[]).
        config(['$routeProvider',function($routeProvider){
            //在这里定义路由
            $routeProvider.when('/',{
                templateUrl:'views/home.html',
                controller:'HomeController'
            })
        }]);

// 接受两个参数：第一个参数为路径（这个路径会与$location.path进行匹配）

    第二个参数为配置对象（决定了当第一个参数中的路由能够匹配时具体做什么）

//配置对象中可进行设置的属性包括controller、template、templateURL、resolve、redirectTo和reloadOnSearch

一个复杂的路由方案：

angular.module("myApp",[]).
        config(['$routeProvider',function($routeProvider){
            $routeProvider.when('/',{
                templateUrl:'views/home.html',
                controller:'HomeController'
            }).when('/login',{
                templateUrl:'views/login.html',
                controller:'LoginController'
            }).when('/dashboard',{
                templateUrl:'views/dashboard.html',
                controller:'DashboardController',
                resolve:{
                    user:function(SessionService){
                        return SessionService.getCurrentUser();
                    }
                }
            }).otherwise(
              redirectTo: '/'
            );
        }]);

3.      $location服务

$location服务没有刷新整个页面的能力，若需刷新整个页面，则需使用$window.location对象。

location.path()           //返回当前路径

location.path(“/home”).replace()                 //跳转之后不能返回

4.      路由模式

不同的路由模式在浏览器的地址栏中会以不同的URL格式呈现。

  标签模式：

标签（hashbang）是AngularJs用来同你的应用内部进行链接的技巧。（若没有进行额外的指定， Angular将默认使用标签模式）

使用标签模式的URL看起来是这个样子的：

                   http://yoursite.com/#!/inbox/all

angular.module("myApp",[]).
        config(['$locationProvider',function($locationProvider){
            //显示指定配置并使用标签模式
            $locationProvider.html5Mode(false);
            $locationProvider.hashPrefix('!');
        }]);

       HTML5模式：

使用HTML5模式的URL看起来是这个样子的：

                       http://yoursite.com/inbox/all

注意：当在HTML5模式下的angulaJS中写链接时，永远都不要使用相对路径。

5. 路由事件：

$route服务在路由过程中的每个阶段都会触发不同的事件，可以为这些不同的路由事件设置监听器并作出响应。

A.     $routeChangeStart

angularJS在路由变化之前都会传播$routeChangeStart事件（在这一步中，路由服务会开始加载路由变化 所需要的所有依赖）

B.     $routeChangeSuccess

C.     AngularJS会在路由的依赖被加载后传播$routeChangeSuccess

angular.module('myApp',[]).run(['$rootScope','$location',function($rootScope,$location){
    $rootScope.$on('$routeChangeSuccess',function(evt,next,previous){
        //接收三个参数：原始的angularJS的evt对象；用户当前所处的路由；上一个路由
    });
}]);