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

Posted 2023-04-17

参考技术A 基于AngularJS入门与进阶（江荣波 著）这本书的笔记

AngularJS 1.x的demo

AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同

AngularJS框架在window对象下新增了一个全局的angular对象，调用angular对象的module()方法返回一个模块实例。

angular.module()方法能够接收3个参数。第一个参数为模块的名称。第二个参数是一个数组，用于指定该模块依赖的模块名称。如果我们的模块不需要依赖其他模块，第二个参数传递一个空数组即可。第三个参数为可选参数，该参数接收一个方法，用于对模块进行配置，作用和模块实例的config()方法相同。

angular.module()方法返回一个模块实例对象，我们可以调用该对象的controller()、directive()、filter()等方法向模块中添加控制器、指令、过滤器等其他组件。

在实际开发过程中，多个模块组合，肯定会遇到模块命名冲突的情况，我看可以通过定义多个模块来解决。

首先定义一个公共的common.js ,其中定义两个模块,controller 名字相同，都为testClick。

一般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，因为会默认加载第一个

一个模块中的 AngularJS 指令和另一个模块中的模板

【中文标题】一个模块中的 AngularJS 指令和另一个模块中的模板

【英文标题】：AngularJS directive in one module and template in another

【发布时间】：2018-05-14 15:52:26

【问题描述】：

寻找一种在一个模块中创建抽象指令并将其模板加载到不同模块上的好方法的建议。

场景如下：我有一个网站分为两个（门户网站和后台），这是两个不同的部署。两者共享很多模块和布局，但功能不同。

我希望菜单指令和结构位于核心/公共模块上，但它的模板应该由模块加载，这样核心模块就不需要知道正在使用什么特定的部署！

我曾考虑在每个模块配置过程中使用 $templateCache，但有人知道更好的选择吗？

【参考方案1】：

是的，将模板和应用程序的其余部分保存在不同的 JS 包中的唯一选择是 $templateCache。其他选项（指令继承或requireing 以及使用 Webpack 捆绑模板 HTML 文件）可能会导致整体捆绑。

AngularJS 中没有单独的模板单元，所以为了包含在模块中，模板应该用$templateCache.put 定义。

【讨论】：

非常感谢您的回复。我一直在使用 $templateCache 对其进行测试，它工作正常，即使它不理想，我也可以忍受它！将标记为已解决，因为那时替代方案似乎不那么可靠！