详解AngularJS 路由 resolve用法


Posted in Javascript onApril 24, 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 ,但是他们的值却不相同。
这样,控制器的可维护性就会得到提高。

除此之外还可以借助$ocLazyLoad动态加载js、css,用法如下:

resolve: { 
        deps: ['$ocLazyLoad', function($ocLazyLoad) { 
          return $ocLazyLoad.load({ 
            name: 'App', 
            insertBefore: '#ng_load_plugins_before',  
            files: [ 
              'xx/js/controllers/xx.js' 
            ] 
          }); 
        }], 
        showImgFiles: ['$ocLazyLoad', function($ocLazyLoad) { 
          return $ocLazyLoad.load([{ 
            name: 'App', 
            insertBefore: '#ng_load_plugins_before',  
            files: [ 
              'xx/xx/xx.css', 
              'xx/xx/xx.js' 
            ] 
          }]).then(function(){ 
            //做些事情 
          }); 
        }] 
      }

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

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Bootstrap-table自定义可编辑每页显示记录数
Sep 07 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
详解AngularJS ui-sref的简单使用
Apr 24 #Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 #Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 #Javascript
angular中实现控制器之间传递参数的方式
Apr 24 #Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 #Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 #Javascript
JS简单获取日期相差天数的方法
Apr 24 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
apache php模块整合操作指南
2012/11/16 PHP
PHP概率计算函数汇总
2015/09/13 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
jQuery中:lt选择器用法实例
2014/12/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
js实现购物车功能
2018/06/12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
js中值引用和地址引用实例分析
2019/06/21 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
承诺书格式
2014/06/03 职场文书
法人代表任命书范本
2014/06/05 职场文书
五五普法心得体会
2014/09/04 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android