本篇文章给大家分享的内容是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 然后重点来了，通过$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的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772599.html
