当前位置: 首页 > 编程笔记 >

AngularJs根据访问的页面动态加载Controller的解决方案

汤英豪
2023-03-14
本文向大家介绍AngularJs根据访问的页面动态加载Controller的解决方案,包括了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


<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退出去再进就不会去请求啦

 类似资料:
  • 问题内容: 我有一个页面,其中包含2个控制器:一个管理一个所谓的“应用程序”列表,另一个将新的Angular模板放入其Div元素的innerHTML中。 我尝试使用标准的{{expression}}绑定,但是它们不适用于html,我也尝试了ng-bind-html- unsafe指令(将innerhtml绑定到App请求的返回值),但是控制器不支持在此新代码中执行。 问题似乎在于,通过使用绑定,A

  • 本文向大家介绍使用jQuery的load方法设计动态加载及解决被加载页面js失效问题,包括了使用jQuery的load方法设计动态加载及解决被加载页面js失效问题的使用技巧和注意事项,需要的朋友参考一下 一、问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,

  • 本文向大家介绍iscroll动态加载数据完美解决方法,包括了iscroll动态加载数据完美解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下 js. css 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Python selenium页面加载慢超时的解决方案,包括了Python selenium页面加载慢超时的解决方案的使用技巧和注意事项,需要的朋友参考一下 开发环境: win10-64  python2.7.16  chrome77 先看这样一段代码 当执行了get以后,除非网站全部加载完成,否则你只能乖乖等,什么都不能干,这是整个程序是阻塞的,get不完就别想进行下面操作 这个等

  • 本文向大家介绍Spring集成webSocket页面访问404问题的解决方法,包括了Spring集成webSocket页面访问404问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 由于工作需求,需要搭建一个平台无关的web项目,用于收集其他系统的bug和建议。考虑到跨域和后期的在线交流的扩展,决定采用webSocket,加上系统本身是基于Spring的,就照着Spring的官方文档搭建了一

  • 问题内容: 我想解决动态加载内容中的重复对象。请查看以下源代码,以便于理解。 具有1个动态加载内容的基本HTML 对于此页眉中的脚本,很容易选择“ general-div”对象,如以下代码所示。 在占位符1中选择“ inner-div”对象非常容易。因此,我可以使用以下代码进行选择。 上面的代码可以完美地工作。但是,当同一文档中有多个重复的对象(如以下HTML)时,我将无法使用以上代码。上面的代码