AngularJs中的模块定义，一个页面加载多个ng-app
基于AngularJS入门与进阶（江荣波 著）这本书的笔记
AngularJS 1.x的demo
AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同
AngularJS模块的定义
//定义一个无依赖模块
angular.module（'appModule',[]）;
//定义一个依赖module1、module2的模块
angular.module（'appModule',['module1','module2']）;
AngularJS框架在window对象下新增了一个全局的angular对象，调用angular对象的module()方法返回一个模块实例。
angular.module()方法能够接收3个参数。第一个参数为模块的名称。第二个参数是一个数组，用于指定该模块依赖的模块名称。如果我们的模块不需要依赖其他模块，第二个参数传递一个空数组即可。第三个参数为可选参数，该参数接收一个方法，用于对模块进行配置，作用和模块实例的config()方法相同。
angular.module()方法返回一个模块实例对象，我们可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。
模块命名冲突解决
在实际开发过程中，多个模块组合，肯定会遇到模块命名冲突的情况，我看可以通过定义多个模块来解决。
首先定义一个公共的common.js ,其中定义两个模块,controller 名字相同，都为testClick。
/*定义两个模块,controller 名字相同*/
var modelTest1 = angular.module("modelTest1",[]);
modelTest1.controller("testClick",function ($scope,$log) {
$scope.testclick = function () {
alert("modelTest1 click");
}
});
var modelTest2 = angular.module("modelTest2",[]);
modelTest2.controller("testClick",function ($scope,$log) {
$scope.testclick = function () {
alert("modelTest2 click");
}
});
// 页面加载完成后,再加载模块
angular.element(document).ready(function() {
/*这里框架会自动加载第一个ng-app 如果重复加载会报错*/
//angular.bootstrap(document.getElementById("modelTest1"),["modelTest1"]);
angular.bootstrap(document.getElementById("modelTest2"),["modelTest2"]);
});
一般angular单个页面只能加载一个ng-app，一个页面会自动加载第一个ng-app，其它ng-app不会被加载。如果想加载多个ng-app就需要使用angular.bootstrap去加载后面的ng-app。
值得注意的是：
1、angular.bootstrap只会绑定第一次加载的对象。
2、后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。
3、一个ng-app可以有多个controller。
4、.rootScope 可作用于整个应用中。是各个 controller中scope 的桥梁。用rootscope定义的值，可以在各个controller 中使用。
一个简单的测试页面，可以同时加载两个controller，且不会相互冲突
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script src="/js/demo/common.js"></script>
</head>
<body>
<div ng-app="modelTest2" id = "modelTest2">
<span ng-controller="testClick">
<input type="button" value="modelTest2Click" ng-click="testclick()"/>
</span>
</div>
<div ng-app="modelTest1" id = "modelTest1">
<span ng-controller="testClick">
<input type="button" value="modelTest1Click" ng-click="testclick()"/>
</span>
</div>
</body>
</html>
一个页面只加载一个controller测试
common.js中许要去掉angular.element(document).ready，因为会默认加载第一个
/*定义两个模块,controller 名字相同*/
var modelTest1 = angular.module("modelTest1",[]);
modelTest1.controller("testClick",function ($scope,$log) {
$scope.testclick = function () {
alert("modelTest1 click");
}
});
var modelTest2 = angular.module("modelTest2",[]);
modelTest2.controller("testClick",function ($scope,$log) {
$scope.testclick = function () {
alert("modelTest2 click");
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script src="/js/demo/common2.js"></script>
</head>
<body>
<div ng-app="modelTest2" id = "modelTest2">
<span ng-controller="testClick">
<input type="button" value="modelTest2Click" ng-click="testclick()"/>
</span>
</div>
</body>
</html>
网友评论