AngularJS动态加载Controller

我们把实现动态加载Controller方法封装到一个通用的模块里面，并命名这个模块为ngCommon。

(function (angular) {'use strict';var CommonApp = angular.module('ngCommon');...
})(angular);

接下来我们实现一个动态加载js的方法$require。

/* 记录已加载的js */
var loaded = {};
/* 检测是否加载 */
var checkLoaded = function (url) {return !url || !angular.isString(url) || loaded[url];
};CommonApp.factory('$require', ['$document', '$q', '$rootScope', function ($document, $q, $rootScope) {return function (url) {var script = null;var onload = null;var doc = $document[0];var body = doc.body;var deferred = $q.defer();if (checkLoaded(url)) {deferred.resolve();} else {script = doc.createElement('script');onload = function (info) {if (info === 1) {deferred.reject();} else {loaded[url] = 1;/* AngularJS < 1.2.x 请使用$timeout */$rootScope.$evalAsync(function () {deferred.resolve();});}script.onload = script.onerror = null;body.removeChild(script);script = null;};script.onload = onload;script.onerror = function () {onload(1);};script.async = true;script.src = url;body.appendChild(script);}return deferred.promise;};
}]);

然后重点来了，通过$routeProvider route的resolve功能来实现动态加载Controller。

CommonApp.provider('$routeResolver', function () {this.$get = function () {return this;};this.route = function (routeCnf) {var controller = routeCnf.controller;var controllerUrl = routeCnf.controllerUrl;if (controllerUrl) {routeCnf.reloadOnSearch = routeCnf.reloadOnSearch || false;routeCnf.resolve = {load: ['$route', '$require', 'ControllerChecker',function ($route, $require, ControllerChecker) {var controllerName = angular.isFunction(controller) ? controller($route.current.params) : controller;var url = angular.isFunction(controllerUrl) ? controllerUrl($route.current.params) : controllerUrl;if (checkLoaded(url) || (controllerName && ControllerChecker.exists(controllerName))) {loaded[url] = true;return;}return $require(url);}]};}return routeCnf;};
})

看上面的代码中还注入了一个叫ControllerChecker的，这个是用来检测当前Controller是否已经注册了，如果未注册，那么我们就加载相关js注册新的Controller。代码如下：

CommonApp.service('ControllerChecker', ['$controller', function ($controller) {return {exists: function (controllerName) {if (angular.isFunction(window[controllerName])) {return true;}try {$controller(controllerName, {}, true);return true;} catch (e) {return false;}}};
}]);

最后我们来添加一个注动态册的方法。

CommonApp.setupRegister = function (module) {module.config(['$controllerProvider','$compileProvider','$filterProvider','$provide',function ($controllerProvider, $compileProvider, $filterProvider, $provide) {module.register = {controller: $controllerProvider.register,directive: $compileProvider.directive,filter: $filterProvider.register,factory: $provide.factory,service: $provide.service,value: $provide.value,constant: $provide.constant};}]);
};

到此已经基本完成了，如何使用呢？

var DemoApp = angular.module('DemoApp',['ngRoute','ngCommon']);
/* 调用动态注册方法，为当前模块添加动态注册方法 */
angular.module('ngCommon').setupRegister(DemoApp);
DemoApp.config(['$routeProvider', '$routeResolverProvider', function ($routeProvider, $routeResolverProvider) {var route = $routeResolverProvider.route;$routeProvider.when('/index', route({templateUrl: './view/index.html'),controller: 'IndexController', /* 在此申明了controller就不需要再html里面申明ng-controller了 */controllerUrl: './controller/index.js')})).otherwise('/index');/* ./controller/index.js */
DemoApp.register.controller('IndexController', ['$scope', '$require', function($scope, $require) {.../* 动态加载某个js文件 */$require(url).then(function () {...});
}]);

AngularJS动态加载Controller相关推荐

AngularJS+RequireJs实现动态加载JS和页面的方案研究
摘要:本文是笔者研究了几天的动态加载方案的成果,前台使用的是AngularJS+RequireJs+angular-ui-router+angularAMD.后台使用了SpringMVC+Spring ...
AngularJS+RequireJs实现动态加载JS和页面的方案研究【上】
1.入口页面存放地址:src/main/webapp/WEB-INF/view/workflow/workflow.jsp [html] view plain copy 在CODE上查看代码片派生到 ...
AngularJS 初始化加载流程
一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM. 2.浏览器载入angular.js脚本. 3.AngularJS等到DOMContentLoaded事件触发. ...
Echarts动态加载地图数据(Dynamic load Echarts map data)
本篇就是Echarts制作地图终篇啦,前面我们已经制作好自定义区域的地图,如何结合'数据'让地图根据我们的业务逻辑变得有"活力",这才是最重要的.Echarts官网中给的demo大 ...
从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用Application Part动态加载控制器和视图...
如果你使用过一些开源CMS的话,肯定会用过其中的的插件化功能,用户可以通过启用或者上传插件包的方式动态添加一些功能,那么在ASP.NET Core MVC中如何实现插件化开发呢,下面我们来探究一下. ...
SpringSecurity动态加载用户角色权限实现登录及鉴权
本文来说下SpringSecurity如何动态加载用户角色权限实现登录及鉴权文章目录概述动态数据登录验证的基础知识 UserDetails与UserDetailsService接口实现User ...
从零开始实现ASP.NET Core MVC的插件式开发(一) - 使用ApplicationPart动态加载控制器和视图
目录前言什么是ApplicationPart? 创建项目添加控制器和视图如何动态加载插件中的控制器?# 如何加载组件的预编译Razor视图? 最终效果总结源代码:https://githu ...
jQuery动态加载select下拉列表
需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码 ...
基于vue-router的从后端动态加载菜单的实现
基于vue-router的从后端动态加载菜单的实现源码下载前言后端模拟加载菜单的例子实现 VueRouterController.java CorsConfig.java application ...

AngularJS动态加载Controller

AngularJS动态加载Controller相关推荐

最新文章

热门文章