多重视图和路由

来源：互联网发布：淘宝试用装是真的吗编辑：程序博客网时间：2024/05/19 16:05

多重视图和路由

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对象；用户当前所处的路由；上一个路由    });}]);

0 0