bob体育官方平台
AngularJs根据访问的页面动态加载Controller的解决方案_AngularJS_脚本之家

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

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是什么的同学请点

  代码如下:

  $routeProvider.when('/:plugin', {

  templateUrl: function(rd) {

bob体育app,  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) {

  ...

  });

bob体育官方平台,  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退出去再进就不会去请求啦

 

这篇文章主要介绍了AngularJs根据访问的页面动态加载Controller的解决方案,需要的朋友可以...

转自

复制代码 代码如下:app.config(function($controllerProvider, $compileProvider, $filterProvider, $provide) { app.register = { controller: $controllerProvider.register, directive: $compileProvider.directive, filter: $filterProvider.register, factory: $provide.factory, service: $provide.service };});

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • 如何在win7旗舰版电脑中设置网络访问权限
  • ADO.NET数据库访问技术,ado.net数据库访问
  • Web API系列,webapi系列
  • ADO.NET数据库访问技术,ado.net数据库访问
  • Web API系列,webapi系列
  • Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

前言

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

帮客评论

在AngularJS中,关于路由的设计和用法是一个很重要的方面。简单来说AngularJS的路由其实是一种纯前端的解决方案。不同于后端路由,它的本质其实是:当请求一个url时,根据路由配置匹配这个url,然后请求模板片段,并插入到ng-view中去。所以从某种意义上来说,AngularJS的路由更加倾向通过改变url来进行页面的局部刷新。

复制代码 代码如下:$routeProvider.when('/:plugin', { templateUrl: function { 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 { deferred.resolve; return deferred.promise; } }});

AngularJS路由二三事这个专题文章中,我将基于AngularJS 1.5版本,结合内置的ngRoute服务、ui-router模块,以及ui-router-extras模块来详细阐述AngularJS中路由的相关内容。

controller.js

文章中涉及到的示例代码在我的github上,就是这个仓库,可供参考。

复制代码 代码如下:app.register.controller('MyPluginCtrl', function ;

另外提一点,因为AngularJS的官网在国内访问可能不太稳定,所以可能对查阅文档造成一些干扰。我们可以选择查阅AngularJS中文站提供的文档镜像,但是这个文档并不是紧跟AngularJS官方的版本号的。另一种途径就是,我们可以将AngularJS的源代码clone到本地,然后安装好所有的依赖之后在本地build一下,然后grunt webserver就可以在本地起一个AngularJS的官方网站,此时就可以无障碍的查阅相关文档了。

复制代码 代码如下:

ngRoute

...

本篇文章我们将介绍如何使用AngularJS内置的ngRoute模块来做前端路由。

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

我不太记得AngularJS是从哪个版本开始将ngRoute独立成一个单独的module,貌似是1.2之后吧,现在如果要使用ngRoute需要额外加载这个模块文件,就像下面这样,

复制代码 代码如下: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 { return ["$q", "$route", "$rootScope", function ($q, $route, $rootScope) { var deferred = $q.defer(); var dependencies = js; if (Array.isArray { for (var i = 0; i < dependencies.length; i++) { dependencies[i] += "?v=" + v; } } else { dependencies += "?v=" + v;//v是版本号 } $script(dependencies, function () { $rootScope.$apply { deferred.resolve; return deferred.promise; }]; }});

除了angular-route模块,还有angular-animateanglar-ariaangular-cookies等模块在使用时也需要额外引入相关文件。这地方有点小坑,大家注意一下就可以了。

复制代码 代码如下:$routeProvider.when('/:plugin', { templateUrl: function { return 'plugin/' + rd.plugin + '/index.html'; }, resolve: { load: app.asyncjs('plugin/controller.js') }});

使用说明

返回顶部