AngularJs根据访问的页面动态加载Controller的解决方案  更新时间:2015年02月04日 12:02:16   投稿:hebedich   这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以参考下 用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载 app.js 复制代码 代码如下: app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {   app.register = {     controller: $controllerProvider.register,     directive: $compileProvider.directive,     filter: $filterProvider.register,     factory: $provide.factory,     service: $provide.service   }; }); 在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs 复制代码 代码如下: $routeProvider.when(‘/:plugin’, {   templateUrl: function(rd) {     return ‘plugin/’ + rd.plugin + ‘/index.html’;   },   resolve: {     load: function($q, $route, $rootScope) {       var deferred = $q.defer();       var dependencies = [         ‘plugin/’ + $route.current.params.plugin + ‘/controller.js’       ];       $script(dependencies, function () {         $rootScope.$apply(function() {           deferred.resolve();         });       });       return deferred.promise;     }   } }); controller.js 复制代码 代码如下: app.register.controller(‘MyPluginCtrl’, function ($scope) {   … });  index.html 复制代码 代码如下:   … 这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下 app.js 复制代码 代码如下: app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {   app.register = {     controller: $controllerProvider.register,     directive: $compileProvider.directive,     filter: $filterProvider.register,     factory: $provide.factory,     service: $provide.service   };   app.asyncjs = function (js) {         return [“$q”, “$route”, “$rootScope”, function ($q, $route, $rootScope) {             var deferred = $q.defer();             var dependencies = js;             if (Array.isArray(dependencies)) {                 for (var i = 0; i < dependencies.length; i++) {                     dependencies[i] += "?v=" + v;                 }             } else {                 dependencies += "?v=" + v;//v是版本号             }             $script(dependencies, function () {                 $rootScope.$apply(function () {                     deferred.resolve();                 });             });             return deferred.promise;         }];     } }); 复制代码 代码如下: $routeProvider.when('/:plugin', {   templateUrl: function(rd) {     return 'plugin/' + rd.plugin + '/index.html';   },   resolve: {     load: app.asyncjs('plugin/controller.js')   } }); 到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上 复制代码 代码如下: $routeProvider.when('/:plugin', {   templateUrl: function(rd) {     return 'plugin/' + rd.plugin + '/index.html';   },   resolve: {     load: app.asyncjs(['plugin/controller.js','plugin/jquery.ui.datepicker.js'])   } }); 便可以了 PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦 您可能感兴趣的文章: 同步异步动态引入js文件的几种方法总结 javascript 动态修改css样式方法汇总(四种方法) 动态加载JS文件的三种方法 使用jQuery动态加载js脚本文件的方法 JS动态添加option和删除option(附实例代码) js给onclick事件赋值,动态传参数实例解说 js form action动态修改方法 jquery及js实现动态加载js文件的方法 jquery getScript动态加载JS方法改进详解 JS动态创建元素的两种方法 js动态引入的四种方法 AngularJs Controller 相关文章 Angularjs使用过滤器完成排序功能 这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 基于AngularJS实现的工资计算器实例 这篇文章主要介绍了基于AngularJS实现的工资计算器,结合具体实例形式分析了AngularJS数值计算相关操作技巧,需要的朋友可以参考下 2017-06-06 Angular(5.2->6.1)升级小结 今天小编就为大家分享一篇关于Angular(5.2->6.1)升级小结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧 2018-12-12 Angular.js中angular-ui-router的简单实践 本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 Angular.js初始化之ng-app的自动绑定与手动绑定详解 这篇文章主要给大家介绍了关于Angular.js初始化之ng-app的自动绑定与手动绑定的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。 2017-07-07 AngularJS中$interval的用法详解 在AngularJS中$interval用来处理间歇性处理一些事情,接下来通过本文给大家介绍AngularJS中$interval的用法,需要的朋友参考下 2016-02-02 AngularJS基础 ng-cloak 指令简单示例 本文主要介绍AngularJS ng-cloak 指令,这里帮大家整理了ng-clock指令的基础资料,和简单的代码实例及效果图,学习AngularJS指令的朋友可以参考下 2016-08-08 Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程 在Angular的原生指令中有这几个指令用来控制元素的展示与否,ng-show/ng-hide/ng-if和ng-switch。在angular性能优化中,我们也常常会用到它。这篇文章主要给大家介绍了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程,需要的朋友可以参考。 2017-05-05 Angularjs 事件指令详细整理 这篇文章主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍,需要的朋友可以参考下 2017-07-07 Angular2学习笔记——详解路由器模型(Router) 这篇文章主要介绍了Angular2学习笔记——详解路由器模型(Router),非常具有实用价值,需要的朋友可以参考下。 2016-12-12 最新评论

用Ng就是想做单页面应用(simple page application),就是希望站内所有的页面都是用Ng的Route,尽量不用location.href,但是这样的webapp好处是很多,但是美中不足的是当你的webapp随着时间的推移,用户变多,功能变得更丰富,controller也变得越来越多,你不得不把所有的controller当作全局模块进行加载,以使得在站内任何一个页面中按F5刷新后能route到任意一个其他页面,而不会发生找不到controller的错误,加载所有的controller使得在手机端上,页面的首次打开速度变慢,今天我就和大家分享我是怎么改善这个缺点的,实现Controller的模块化加载

app.js

复制代码 代码如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

});

在route时阻塞一下去加载需要的js,加载成功后再继续,不知道$script是什么的同学请点http://dustindiaz.com/scriptjs

复制代码 代码如下:

$routeProvider.when(‘/:plugin’, {

  templateUrl: function(rd) {

    return ‘plugin/’ + rd.plugin + ‘/index.html’;

  },

  resolve: {

    load: function($q, $route, $rootScope) {

      var deferred = $q.defer();

      var dependencies = [

        ‘plugin/’ + $route.current.params.plugin + ‘/controller.js’

      ];

      $script(dependencies, function () {

        $rootScope.$apply(function() {

          deferred.resolve();

        });

      });

      return deferred.promise;

    }

  }

});

controller.js

复制代码 代码如下:

app.register.controller(‘MyPluginCtrl’, function ($scope) {

  …

});

 index.html

复制代码 代码如下:

<div ng-controller=”MyPluginCtrl”>

  …

</div>

这样改造就可以实现route时动态去加载这个route所依赖的js,但是一般我们的webapp中route都有很多,每个都要写那么一堆代码,既难看又难于维护,我们不妨再优化一下

app.js

复制代码 代码如下:

app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) {

  app.register = {

    controller: $controllerProvider.register,

    directive: $compileProvider.directive,

    filter: $filterProvider.register,

    factory: $provide.factory,

    service: $provide.service

  };

  app.asyncjs = function (js) {

        return [“$q”, “$route”, “$rootScope”, function ($q, $route, $rootScope) {

            var deferred = $q.defer();

            var dependencies = js;

            if (Array.isArray(dependencies)) {

                for (var i = 0; i < dependencies.length; i++) {

                    dependencies[i] += “?v=” + v;

                }

            } else {

                dependencies += “?v=” + v;//v是版本号

            }

            $script(dependencies, function () {

                $rootScope.$apply(function () {

                    deferred.resolve();

                });

            });

            return deferred.promise;

        }];

    }

});

复制代码 代码如下:

$routeProvider.when(‘/:plugin’, {

  templateUrl: function(rd) {

    return ‘plugin/’ + rd.plugin + ‘/index.html’;

  },

  resolve: {

    load: app.asyncjs(‘plugin/controller.js’)

  }

});

到此只要把原来一个controller.js按模块拆分成多个js然后为route添加模块依赖便可提高加载速度,这个方法不仅仅可以用在controller按需加载,而且可以用在其他js模块,例如jquery.ui.datepicker.js这样的日期选择插件,在需要日期选择插件的route节点加上

复制代码 代码如下:

$routeProvider.when(‘/:plugin’, {

  templateUrl: function(rd) {

    return ‘plugin/’ + rd.plugin + ‘/index.html’;

  },

  resolve: {

    load: app.asyncjs([‘plugin/controller.js’,’plugin/jquery.ui.datepicker.js’])

  }

});

便可以了

PS:$script可以对需要加载的js进行判断,如果之前已经加载过了他会直接返回成功,也就是说只有在第一次进入日期选择界面时会去请求jquery.ui.datepicker.js退出去再进就不会去请求啦

您可能感兴趣的文章:

  • 同步异步动态引入js文件的几种方法总结
  • javascript 动态修改css样式方法汇总(四种方法)
  • 动态加载JS文件的三种方法
  • 使用jQuery动态加载js脚本文件的方法
  • JS动态添加option和删除option(附实例代码)
  • js给onclick事件赋值,动态传参数实例解说
  • js form action动态修改方法
  • jquery及js实现动态加载js文件的方法
  • jquery getScript动态加载JS方法改进详解
  • JS动态创建元素的两种方法
  • js动态引入的四种方法
张贴在3