作者：鬼厉--七月 | 来源：互联网 | 2023-05-18 23:19
开始笔记之前，把早上检测到的angularjs中的命名问题做一下记录。检测工具：google浏览器扩展工具angularJS，结果如下：angularjs中，module要遵守lowerCamelCa
开始笔记之前，把早上检测到的angularjs中的命名问题做一下记录。
检测工具：google浏览器扩展工具angularJS，结果如下：
angularjs中，module要遵守lowerCamelCase原则，例:"myApp"; controller要遵守UpperCamelCase原则并且要以Controller结尾，例："MainController".
这一篇笔记主要对angularjs根据路由按需加载Controller的操作进行了说明，也就是上一篇中提到的routeConfig这个引用的文件。
首先在app.js文件中引用该模块并将angularjs的$controllerProvider服务传入该对象中，我们要用到$controllerProvider对加载进来的controller文件进行依赖关系的注入，这样才能达到我们的目的。
1 define(['angular', 'routeConfig'], function(angular, routeConfig) {
2 var app = angular.module('myApp', ['ngRoute','ngDialog',
3 function($controllerProvider) {
4 routeConfig.setControllerProvider($controllerProvider);
5 }
6 ]);
7 return app;
8 })
routeConfig:
1 define([], function() {
2
3 var $controllerProvider;
4
5 function setControllerProvider(value) {
6 $cOntrollerProvider= value;
7 }
8
9 function config(templateUrl, controllerName) {
10 if (!$controllerProvider) {
11 throw new Error("$controllerProvider is not set!");
12 }
13
14 var defer,
15 routeDefinition = {};
16
17 routeDefinition.templateUrl = templateUrl;
18 routeDefinition.cOntroller= controllerName;
19 routeDefinition.resolve = {
20 delay: function($q, $rootScope) {
21 defer = $q.defer();
22 var dependencies = [controllerName];
23 require(dependencies, function() {
24 var cOntroller= arguments[0];
25 $controllerProvider.register(controllerName, controller);
26 defer.resolve();
27 $rootScope.$apply()
28 })
29 return defer.promise;
30 }
31 }
32 return routeDefinition;
33 }
34
35 return {
36 setControllerProvider: setControllerProvider,
37 config: config
38 }
39 })
route.js配置信息
1 define(['app', 'routeConfig'], function(app, routeConfig) {
2 return app.config(function($routeProvider) {
3 //TemplateURl相对于index.html路径，Controller相对于route.js路径
4 $routeProvider.when('/link', routeConfig.config('../link/link.html', "../items/link/linkCtrl"));
5 $routeProvider.when('/user', routeConfig.config('../user/user.html', "../items/user/userCtrl"));
6 $routeProvider.when('/message', routeConfig.config('../message/message.html', "../items/message/msgCtrl"));
7 $routeProvider.otherwise({
8 redirectTo: '/link'
9 });
10 });
11 })
主要对ngroute配置中resolve方法进行配置 ，在方法中利用requireJS加载Controller文件，通过$controllerProvider注入到angular作用域中，这样就实现 了动态加载的目的。
只能讲成这样了。。
下一篇说说ngDialog如何实现 动态加载Controller文件，实现对话框的复用。
京公网安备 11010802041100号