详解AngularJs路由之Ui-router-resolve(预加载)


Posted in Javascript onJune 13, 2017

ng-route模块中的when()和ui-route的state()都提供了resolve属性。

为什么需要使用resolve?

当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来。但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据。这样就会导致页面会被渲染两遍,导致“页面UI抖动”的问题,对用户不太友好。resolve的出现解决了这个问题。

resolve是干嘛用的

resolve属性里的值会在路由成功前被预先设定好,然后注入到控制器中。通俗地将,就是等数据都“就位”后,才进行路由(其实我觉得也不能叫路由,因为路由是一些列的操作,其中就包括了设置resolve属性等等)。这样的好处就是页面仅会被渲染一遍。

<!--首页.html-->
<div ng-app="myApp">
<div><a ui-sref = "index">前往list.html</a></div>
<div ui-view></div><!--这里是路由视图存放的地方-->
</div>
<!--list.html>
<div>
  <h1>HI,这里是list.html</h1>
  <a ui-sref="index.list">点击加载list.html视图</a>
  <div ui-view></div>
  <h1>{{user}}</h1>
  <h2>{{name}}</h2>
  <h3>{{age}}</h3>
  <h3>{{email}}</h3>
</div>
//JS
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:'/',
      templateUrl:'list.html',
      controller:'myController',
      resolve:{
        user:function(){
          return {
            name:"perter",
            email:"826415551@qq.com",
            age:"18"
          }
        }
      }
    })
}]);
app.controller('myController',function($scope,user){
  $scope.name=user.name;
  $scope.age=user.age;
  $scope.email=user.email;
  $scope.user=user;
});

我在state方法里面设置了resolve属性,里面的值是一个名为user的对象,它存有几个值(格式好像JSON)。并把这个user变量注入到控制器中。这样就完成了预加载了。

这种把resolve属性的值(这里是user)注入到控制器的方式有一个非常强大的地方就是,可以运用他来重用控制器,而我们需要做的仅仅只是改变user对象里面的值(tips:如果是嵌套路由的话,不重新设置resolve值则会“继承”父路由的resolve值,如果不是嵌套路由且不重新设置,则不会正确显示)。

<!--list.html-->
<div>
  <h1>HI,这里是list.html</h1>
  <a ui-sref="index.list">点击加载list.html视图</a>
  <a ui-sref="index.list2">点击加载list2.html视图</a>
  <div ui-view></div>
  <h1>{{user}}</h1>
  <h2>{{name}}</h2>
  <h3>{{age}}</h3>
  <h3>{{email}}</h3>
</div>
//js
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:'/',
      templateUrl:'list.html',
      controller:'myController',
      resolve:{
        user:function(){
          return {
            name:"perter",
            email:"826415551@qq.com",
            age:"18"
          }
        }
      }
    })

    .state("index.list",{
      url:'/list',
      template:'<h1>{{name}}</h1>',
      controller:'myController',
    })
    .state("index.list2",{
      url:'/list2',
      template:'<h1>{{name}}</h1>',
      controller:'myController',
      resolve:{
        user:function () {
          return{
          name:"Rose"
          }
        }
      }
    })

}]);
app.controller('myController',function($scope,user){
  $scope.name=user.name;
  $scope.age=user.age;
  $scope.email=user.email;
  $scope.user=user;
});

这里省略了首页的html,可以翻到最上面看。重点对比最后的两个state(),可以发现第一个没有重新设置resolve属性,而第二个重新设置了resolve()属性。他们虽然共用了同一个控制器myController ,但是他们的值却不相同。

这样,控制器的可维护性就会得到提高。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 #Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 #Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
You might like
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
JSF的标签库有哪些
2012/04/27 面试题
高中毕业生自我鉴定例文
2013/12/29 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
新年团拜会主持词
2014/04/02 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技