angularJS+requireJS实现controller及directive的按需加载示例

 更新时间:2017年02月20日 08:21:47   作者:不一是为丕  
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果;

思路如下

1、借助ui-router里面的resolve属性来实现预加载

2、需要借助$controllerProvider动态去注册控制器,$compileProvider动态去注册指令

3、需要借助$q来帮助我们实现异步加载,具体步骤如下所示;

1、在我们定义的app(在定义app.config()的js文件内)模块上挂载注册控制器和指令的属性,如下所示 

app.register = {    //注意这里的$controllerProvider是内置注册控制器的属性,$compileProvider是内置的注册指令的属性

    controller: $controllerProvider.register,

    directive: $compileProvider.directive

   } 

2、借助$q定义一个异步加载js文件的方法(在定义路由的js文件内)

app.loadMyJs = function(js){
        return function($rootScope, $q){
          var deffer = $q.defer(),
            deps=[];
          angular.isArray(js) ? (deps = js) : deps.push(js);
          require(deps,function(){
            $rootScope.$apply(function(){
              deffer.resolve();
            });
          });
          return deffer.promise;
        };
      }

3、借助路由里面的resolve属性,进行配置需要加载的控制器文件及指令文件(在定义路由的js文件内)

.state('view1',{
      url: '/view1',
      templateUrl: 'temp/partial1.html',
      controller: 'MyCtrl1',
      resolve:{
          //需要动态加载的控制器及指令js文件,其它js文件以此类推
        deps:app.loadMyJs(['./controllers/my-ctrl-1','./directives/loading'])
      }
    })

4、通过第一步先挂载在app上的属性来进行动态注册控制器or指令

//注册控制器(对应的控制器js文件内)
app.register.controller('MyCtrl1', function ($scope,$css,$rootScope) {
    //控制器里面的内容
    
  });

//注册指令(对应的指令js文件内)

app.register.directive("loading",function (){

    return {
      restrict: "AE",
      replace: true,
      template: "<div class='mask' ng-show='isLoading'><span>loading</span></div>"
      }
    });  

如果有服务or过滤器需要按需加载也是类似的方法,另外如果是公共的服务,指令or过滤器等不需要进行按需加载的文件就可以使用普通的angular.module()的方式来定义即可;

最后这只是实现按需加载js文件中的一种思路,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS 2.0入门权威指南

    AngularJS 2.0入门权威指南

    这篇文章主要介绍了AngularJS 2.0入门权威指南的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • js常用正则表达式集锦

    js常用正则表达式集锦

    这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 对angular 实时更新模板视图的方法$apply详解

    对angular 实时更新模板视图的方法$apply详解

    今天小编就为大家分享一篇对angular 实时更新模板视图的方法$apply详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS 中的Promise --- $q服务详解

    AngularJS 中的Promise --- $q服务详解

    这篇文章主要介绍了AngularJS 中的Promise --- $q服务详解方法的相关资料,需要的朋友可以参考下
    2016-09-09
  • Angular ng-class详解及实例代码

    Angular ng-class详解及实例代码

    这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下
    2016-09-09
  • 实例剖析AngularJS框架中数据的双向绑定运用

    实例剖析AngularJS框架中数据的双向绑定运用

    这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下
    2016-03-03
  • Angular 封装并发布组件的方法示例

    Angular 封装并发布组件的方法示例

    本篇文章主要介绍了Angular 封装并发布组件的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • AngularJS2中一种button切换效果的实现方法(二)

    AngularJS2中一种button切换效果的实现方法(二)

    这篇文章主要介绍了AngularJS2中一种button切换效果的实现方法(二),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • Angular2入门教程之模块和组件详解

    Angular2入门教程之模块和组件详解

    这篇文章主要给大家介绍了Angular2入门教程之模块和组件的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05

最新评论