AngularJs中的模块定义，一个页面加载多个ng-app

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，且不会相互冲突

一个页面只加载一个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");
    }
});