详解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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
mui上拉加载功能实例详解
Apr 13 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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 MySQL与分页效率
2008/06/04 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Prototype使用指南之array.js
2007/01/10 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
JavaScript代码实现txt文件的上传预览功能
2018/03/27 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python线程之定位与销毁的实现
2019/02/17 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
高二物理教学反思
2014/02/08 职场文书
职业生涯规划书范文
2014/03/10 职场文书
消防工作实施方案
2014/06/09 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
redis 查看所有的key方式
2021/05/07 Redis
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python