详解AngularJS 路由 resolve用法

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(){
            //做些事情
          });
        }]
      }

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

(0)

相关推荐

  • angular route中使用resolve在uglify压缩后问题解决

    问题 如下代码所示, 如果在angular中配置route的resolve时, 没有指定'PicLoader', 则在压缩模式下(uglify), angular执行报错. 通过如下方式可以解决: 解决 $routeProvider .when("/pic", { controller: "ImageViewerCtrl", templateUrl: "image.html", resolve: { images: ['PicLoader', f

  • 详解AngularJS 路由 resolve用法

    ng-route模块中的when()和ui-route的state()都提供了resolve属性. 为什么需要使用resolve? 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的 resolv

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

    ng-route模块中的when()和ui-route的state()都提供了resolve属性. 为什么需要使用resolve? 当路由切换的时候,被路由的页面中的元素(标签)就会立马显示出来,同时,数据会被准备好并呈现出来.但是注意,数据和元素并不是同步的,在没有任何设置的情况下,AngularJS默认先呈现出元素,而后再呈现出数据.这样就会导致页面会被渲染两遍,导致"页面UI抖动"的问题,对用户不太友好.resolve的出现解决了这个问题. resolve是干嘛用的 resolv

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • Node.js API详解之 util模块用法实例分析

    本文实例讲述了Node.js API详解之 util模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 util util 模块主要用于支持 Node.js 内部 API 的需求.提供了大部分实用工具. 通过 const util = require('util'); 的方式引用util模块 util.callbackify(original) 说明: original:传递一个 async 函数,或者是一个返回Promise的异步函数. callbackify会返回一个方

  • Node.js API详解之 os模块用法实例分析

    本文实例讲述了Node.js API详解之 os模块用法.分享给大家供大家参考,具体如下: os是Node的一个基础模块,提供了一些操作系统相关的属性接口. 通过 const os = require('os'); 的方式引用os模块,我们接着看下os都有哪些功能 说明: 一个字符串常量,定义操作系统相关的行末标志:POSIX 系统上值为\n,Windows下的值为\r\n demo: console.log('abc'+ os.EOL +'123'); //abc //123 os.arch(

  • Node.js API详解之 dgram模块用法实例分析

    本文实例讲述了Node.js API详解之 dgram模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dgram dgram模块提供了 UDP 数据包 socket 的实现. 使用以下方式引用: const dgram = require('dgram'); dgram.createSocket(options[, callback]) 说明: 创建一个 dgram.Socket 对象. 一旦创建了套接字,调用 socket.bind() 会指示套接字开始监听数据报消息

  • Node.js API详解之 module模块用法实例分析

    本文实例讲述了Node.js API详解之 module模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 module Node.js 有一个简单的模块加载系统. 在 Node.js 中,文件和模块是一一对应的(每个文件被视为一个独立的模块). 例子,假设有一个名为 foo.js 的文件: const circle = require('./circle.js'); console.log(`半径为 4 的圆的面积是 ${circle.area(4)}`); 在第一行中,

  • Node.js API详解之 dns模块用法实例分析

    本文实例讲述了Node.js API详解之 dns模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dns dns (域名服务器)模块包含两类函数: 第一类函数,使用底层操作系统工具进行域名解析,且无需进行网络通信. 这类函数只有一个:dns.lookup(). 例子,查找 baidu.com: const dns = require('dns'); dns.lookup('www.baidu.com', (err, address, family) => { conso

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

随机推荐