前言：
而今我们对“js加载多个js”大概比较珍视，姐妹们都想要分析一些“js加载多个js”的相关内容。那么小编同时在网上收集了一些对于“js加载多个js””的相关内容，希望姐妹们能喜欢，你们一起来了解一下吧！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、scope的范围局限于每个controller中
5、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>
