AngularJS动态加载Controller-守望者-AIR技术交流

破晓发表于 2016-8-3 12:48:26

AngularJS动态加载Controller

<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">AngularJS原生并不支持动态加载Controller的方法，但是却提供注册Controller的方法。接下来就来看下如何实现动态加载Controller。<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">我们把实现动态加载Controller方法封装到一个通用的模块里面，并命名这个模块为<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">ngCommon</code>。<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">(function (angular) {'use strict';
var CommonApp = angular.module('ngCommon');
...
})(angular);</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">接下来我们实现一个动态加载js的方法<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">$require</code>。<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">/* 记录已加载的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;
};
}]);</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">然后重点来了，通过<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">$routeProvider route</code>的<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">resolve</code>功能来实现动态加载Controller。<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">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;
};
})</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">看上面的代码中还注入了一个叫<code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: normal; margin-right: 0.25em; margin-left: 0.25em; padding-right: 0.4em; padding-left: 0.4em; border: 1px solid rgb(221, 221, 221); border-radius: 3px; background-color: rgb(248, 248, 248);">ControllerChecker</code>的，这个是用来检测当前Controller是否已经注册了，如果未注册，那么我们就加载相关js注册新的Controller。代码如下：<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">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;
 }
 }
};
}]);</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">最后我们来添加一个注动态册的方法。<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">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
 };
 }
]);
};</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">到此已经基本完成了，如何使用呢？<pre class="prettyprint lang-javascript prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">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 () {
 ...
});
}]);</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">原文链接：<a href="http://w3cboy.com/post/2016/03/angularjs-dynamic-load-controller/" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">AngularJS动态加载Controller</a>

页: [1]

守望者--AIR技术交流's Archiver

AngularJS动态加载Controller