详解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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
学习Vue组件实例
Apr 28 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
javascript实现弹出层效果
Dec 10 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
Javascript的promise,async和await的区别详解
Mar 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
pw的一个放后门的方法分析
2007/10/08 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php上传excel表格并获取数据
2017/04/27 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python字典基本操作实例分析
2015/07/11 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python使用django搭建web开发环境
2017/06/09 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Python pandas库中的isnull()详解
2019/12/26 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
python SOCKET编程基础入门
2021/02/27 Python
泰国在线书店:SE-ED
2020/06/21 全球购物
欢送退休感言
2014/02/08 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
银行授权委托书样本
2014/10/13 职场文书
营业用房租赁协议书
2014/11/26 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
自荐信大全
2019/03/21 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python