深究AngularJS之用户界面路由器详解

1.配置使用用户界面路由器

1.1导入射流研究…文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

脚本类型=' text/JavaScript ' src=' http : js/angular。量滴js '/script脚本类型=' text/JavaScript ' src=' http : js/angular-ui-router。量滴js '/脚本1.2注入有角的模块

var app=angular.module('myApp '，[' ui。路由器'])；注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：

1.3定义视图

用户界面视图替代的是ngroute路由的ng-view。

div ui-view/div1.4配置路由状态

app.config(['$stateProvider '，函数($stateProvider){ $stateProvider .状态(' home '，{ //导航用的名字，如a ui-sref='login'login/a里的登录url: '/'，//访问路径模板：'div模板内容./div ' })}])；2.简单示例

html head title ui-router/title meta http-equiv=' pragma ' content=' no-cache ' meta http-equiv=' cache-control ' content=' no-cache ' meta http-equiv=' expires ' content=' 0 ' meta http-equiv='关键字' content='关键字1，关键字2，关键字3 ' meta http-equiv=' description ' content='这是我的页面！-导入JS-script类型=' text/JavaScript ' src=' http : JS/angular。量滴JS/script脚本类型=' text/JavaScript ' src=' http : JS/angular-ui-router。量滴JS '/脚本/头体div ng-app=' myApp ' div ui-view/div！-视图- /div /body脚本类型='text/javascript' //定义模板，并注入ui-路由器var app=angular。模块(' myApp '，[' ui。路由器'])；//对服务进行参数初始化，这里配stateProvider服务的视图控制app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态(' home '，{ url: '/'，template:'div模板内容./div ' })}])；/script/html3 .嵌套路由的实现

通过全球资源定位器(统一资源定位符)参数的设置实现路由的嵌套（父路由与子路由通过"."连接就形成了子路由)。嵌套路由可实现多层次的用户界面视图。

body div ng-app=' myApp ' a ui-sref=' parent '点我显示父视角内容/a a ui-sref='parent.child '点我显示父视角与子视角内容/a div ui-view/div！-父视图/分区/正文脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[' ui。路由器'])；app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态('父',{//父路由url: '/parent '，模板： ' div parent ' ' div ui-view div '//子视图/div' }).状态(“parent.child”，{//子路由url: '/child '，模板： ' div child/div ' })}))；/script上面的是相对路径方式：

父母的将匹配…./index。html #/父级；"家长。孩子"将匹配…./index。html #/家长/孩子。

若改成绝对路径方式，则需要在子全球资源定位器(统一资源定位符)里加上^:州('家长.孩子'，{ URL : '^/child',template:'divchild/div'})此时，'家长'将匹配…./index。html #/父级；"家长。孩子"将匹配…./index.html#/child。

4.通过视图实现多视图

多个示图时，使用视图属性。该属性里包含了哪些用户界面视图，则对应的模板或templateUrl里的内容就会填充该用户界面视图。

同一个状态下有多个视图示例：

body div ng-app=' myApp ' a ui-sref=' index '点我显示指数内容/a div ui-view=' header '/div div ui-view=' nav '/div div ui-view=' body '/div/div/body脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[' ui。路由器'])；app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态(' index '，{ url: '/index '，视图： { ' header ' : { template : ' div头部内容/div'}，' nav':{template:'div菜单内容/div'}，' body':{template:'div展示内容/div ' } } })}])；/script 5。用户界面视图的定位

@的作用是用来绝对定位查看，即说明该用户界面视图属于哪个模板。如：'[emailprotected]'表示名为页眉的视角属于指数模板。绝对和相对路径的效果一样，请看如下代码：

body div ng-app=' myApp ' a ui-sref=' index ' show index/a ui-sref=' index。内容1 '内容111111/a ui-sref='索引。content 2 ' content 222222/a div ui-view=' index ' div/div/body脚本类型=' text/JavaScript ' var app=angular。模块(' myApp '，[' ui。路由器'])；app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态(' index '，{ url: '/index '，视图： { ' index ' : { template : ' div ui-view=' header '/div div ui-view=' nav '/div div ui-view=' body '/div/div ' }，//这里必须要绝对定位[电子邮件保护]' : {模板： ' div头部内容标头/div'}，'[电子邮件保护]' : {模板： ' div菜单内容nav/div'}，'[电子邮件保护]' : {模板： ' div展示内容contents/div'} } }) //绝对定位。状态(' index.content1 '，{ url: '/content1 '，view : { '[email protected]' : { template : ' div content 1111111111/div ' }/'[email protected]'表时名为身体的视角使用指数模板} }) //相对定位：该状态的里的名为身体的用户界面视图为相对路径下的（即没有说明具体是哪个模板下的) .状态(' index.content2 '，{ url: '/content2 '，视图3360 { ' body ' : { template : ' div内容22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222由上面代码可知，相对定位不能找到的用户界面视图需要用@来绝对定位。

6.统一资源定位器路由传参（通过$stateParams服务获取参数)

有url: '/index/:id '，和url: '/index/{id} '，两种形式传参

body div ng-app=' myApp ' a ui-sref=' index({ id :30 })' show index/a ui-sref=' test({ username : ' Peter ' })' show test/a div ui-view/div/div/body script type=' text/JavaScript ' var app=angular。模块(' myApp '，[' ui。路由器'])；app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态(' home '，{ url: '/'，模板： ' div主页/div ' }).状态(' index '，{ url: '/index/:id '，模板： ' divindexcontent/div '，控制器：函数($ state params){ alert($ state params。id)} }).状态(' test '，{ url: '/test/:username '，模板： ' divetestcontent/div '，控制器：函数($ state params){ alert($ state params。username)} })})])；/script7 .解析（预载入)

参考资料：

使用预载入功能，开发者可以预先载入一系列依赖或者数据，然后注入到控制器中。在ngRoute中分解选项可以允许开发者在路由到达前载入数据保证（承诺).在使用这个选项时比使用角度路线有更大的自由度。

预载入选项需要一个对象，这个对象的键即要注入到控制器的依赖，这个对象的价值为需要被载入的工厂服务。

如果传入的时字符串角度路线会试图匹配已经注册的服务。如果传入的是函数，该函数将会被注入，并且该函数返回的值便是控制器的依赖之一。如果该函数返回一个数据保证（承诺),这个数据保证将在控制器被实例化前被预先载入并且数据会被注入到控制器中。

body div ng-app=' myApp ' a ui-sref=' index ' show index/a div ui-view/div/div/body script type=' text/JavaScript ' var app=angular。模块(' myApp '，[' ui。路由器'])；app.config(['$stateProvider '，函数($stateProvider) { $stateProvider .状态(' home '，{ url: '/'，模板： ' div主页/div ' }).状态(' index '，{ url: '/index/{id} '，模板： ' divindexcontent/div '，resolve: { //这个函数的值会被直接返回，因为它不是数据保证user : function(){ return { name : ' Peter '，email: '[emailprotected]' }，//这个函数为数据保证，因此它将在控制器被实例化之前载入详细信息：函数($ http){ return $ http({ method : ' JSONP '，URL : '/current _ details ' })；}, //前一个数据保证也可作为依赖注入到其他数据保证中！（这个非常实用)myId:函数($http，detail) { $http({ method: 'GET '，URL : ' http://脸书。com/API/current _ user '，params 3360 { email :当前详细信息。数据。电子邮件[0]})} }，控制器3360函数(用户，详细信息，myId $作用域){ alert(用户。名称)警报(用户。电子邮件)控制台。log(detail)} })}))))))；/script以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。