深究AngularJS之ui-router详解

前端之家收集整理的这篇文章主要介绍了深究AngularJS之ui-router详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.配置使用ui-router

1.1导入js文件

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

3.嵌套路由的实现

通过url参数的设置实现路由的嵌套(父路由与子路由通过”.“连接就形成了子路由)。嵌套路由可实现多层次的ui-view。

<script type="text/javascript">
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function ($stateProvider) {
$stateProvider
.state("parent",{//父路由
url: '/parent',template:'

parent'
+'
'// 子View
+'
'
})
.state("parent.child",{//子路由
url: '/child',template:'
child
'
})
}]);

上面的是相对路径方式:

‘parent'将匹配…./index.html#/parent; ‘parent.child'将匹配…./index.html#/parent/child。

若改成绝对路径方式,则需要在子url里加上^:

child
' })

此时,'parent'将匹配…./index.html#/parent; ‘parent.child'将匹配…./index.html#/child。

4. 通过views实现多视图

多个示图时,使用views属性。该属性里包含了哪些ui-view,则对应的template或templateUrl里的内容就会填充该ui-view。

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

5.ui-view的定位

@的作用 是用来绝对定位view,即说明该ui-view属于哪个模板。如:'header@index'表示名为header的view属于index模板。绝对和相对路径的效果一样,请看如下代码

由上面代码可知,相对定位不能找到的ui-view需要用@来绝对定位。

6.URL路由传参(通过$stateParams服务获取参数)

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

7.Resolve(预载入)

参考资料:

使用预载入功能,开发者可以预先载入一系列依赖或者数据,然后注入到控制器中。在ngRoute中resolve选项可以允许开发者在路由到达前载入数据保证(promises)。在使用这个选项时比使用angular-route有更大的自由度。

预载入选项需要一个对象,这个对象的key即要注入到控制器的依赖,这个对象的value为需要被载入的factory服务。

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

<script type="text/javascript">
var app = angular.module('myApp',{
url: '/index/{id}',resolve: {
//这个
函数的值会被直接返回,因为它不是数据保证
user: function() {
return {
name: "peter",email: "audiogroup@qq.com"
}
},//这个函数为数据保证,因此它将在控制器被实例化之前载入。
detail: function($http) {
return $http({
method: 'JSONP',url: '/current_details'
});
},//前一个数据保证也可作为依赖注入到其他数据保证中!(这个非常实用)
myId: function($http,detail) {
$http({
method: 'GET',url: 'http://facebook.com/api/current_user',params: {
email: currentDetails.data.emails[0]
}
})
}

  },controller:function(user,detail,myId$scope){
    alert(user.name)
    alert(user.email)
    console.log(detail)
  }
})         

}]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/38644.html

猜你在找的JavaScript相关文章