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

最近AngularJs很火....

废话不多说了,如主题吧

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

感谢原问题回答者:http://stackoverflow.com/questions/20909525/load-controller-dynamically-based-on-route-group

时间: 2024-10-29 22:22:11

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

[AngularJS] 使用AngularAMD动态加载Controller

[AngularJS] 使用AngularAMD动态加载Controller 前言 使用AngularJS来开发Single Page Application(SPA)的时候,可以选用AngularUI Router来提供页面内容切换的功能.但是在UI Router的使用情景里,需要开发人员将每个State所使用的Controller预先加载之后,才能正常的切换页面内容.这也就代表开发人员所建立的SPA,必须要在启动的当下,就先将整个SPA所用到的Controller都预先加载到浏览器之中.而这

web页面动态加载UserControl,并调用用户控件中的方法来初始化控件

1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPrefix="UserControl" TagName="CeShiBu"%> <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/KaiFaBu.ascx" TagPrefix=&quo

对于页面动态加载的元素事件无效的解决方案

当用ajax动态获取的数据放在新建的div中进行展示时,当你提前写一些 mouseover,click 操作时会发现不起作用 解决方法: 把事件绑定到它的父元素上面 例如,每次读到数据会将它放在新建的 class = data的div中显示,并且用append方法把他添加在 id= parent 的div中.这个时候假如对data这个块有点击事件,平常可能会写 $('.data').click(function(){...}); 当点击这个div时,不会有反应.这时候可以再一开始将事件绑定到父元

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

Android APP启动页面动态加载全部权限

一.写在前面 6.0以上动态加载权限加载的是,需要用户手动赋予的权限( Dangerous Permissions),只有这些,其他权限不用加载 所属权限组 权限日历 READ_CALENDAR日历 WRITE_CALENDAR相机 CAMERA联系人 READ_CONTACTS联系人 WRITE_CONTACTS联系人 GET_ACCOUNTS位置 ACCESS_FINE_LOCATION位置 ACCESS_COARSE_LOCATION麦克风 RECORD_AUDIO电话 READ_PHON

angularJS ng-repeat中的directive 动态加载template

需求,想实现一个html组件,传入不同的typeId,渲染不同的表单元素. <div ng-repeat="field in vm.data"> <magic-field type="{{field.fieldTypeId}}"></magic-field> </div> 如type=1,输出input元素,type=2输出textarea 也就是说我们要在directive中根据属性获得不同的template. 刚开

JSP页面动态加载到iframe

main 页面有个iframe 域 <iframe id="myiframe" framespacing="0" frameborder="NO" Scrolling="auto" width=806 height=510 name="mytrees" /> 点击个人信息通过Action 获取到个人信息跳到 显示信息的JSP,想把这个JSP 显示在 main 里面 就指定 <a href=

页面动态加载js文件

function loadJS(url, onload) { var domscript = document.createElement('script'); domscript.src = url; domscript.charset = 'utf-8'; if (onload) { domscript.onloadDone = false; domscript.onload = onload; domscript.onreadystatechange = function () { if

iscroll动态加载数据完美解决方案

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"&