详解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 相关文章推荐
javascript XML数据显示为HTML一例
Dec 23 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
js弹出对话框方式小结
Nov 17 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 Javascript
详解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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python list转矩阵的实例讲解
2018/08/04 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
大专毕业自我鉴定
2014/02/04 职场文书
会计核算科岗位职责
2014/03/19 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
学校社会实践活动总结
2014/07/03 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
退货证明模板
2015/06/23 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android