AngularJS项目引入与模块注入可行性及实现方案咨询

一、如何将现有AngularJS项目引入到另一个项目中？ #

这里有几种实用方案，你可以根据项目规模和场景选择：

• 直接脚本引入（适合小型项目）：如果现有项目已经打包成单个JS文件（比如app1.bundle.js），直接在目标项目的HTML里，在AngularJS核心库之后添加<script src="path/to/app1.bundle.js"></script>即可。然后在目标项目的模块定义里，把现有项目的模块名加进去作为依赖，比如angular.module('myTargetApp', ['app1'])。要是现有项目是零散的多个文件，记得按依赖顺序逐个引入所有必要的脚本（比如先引入公共服务，再引入控制器）。
• 打包成可复用模块（适合中型以上项目）：如果现有项目还没打包，用Gulp、Webpack这类工具把它打包成UMD格式的模块。这样不管目标项目是传统的脚本引入，还是用模块化方案（比如CommonJS），都能兼容。打包时要确保正确暴露模块名，方便其他项目识别依赖。
• 通过包管理工具引入（规范的团队协作场景）：如果现有项目已经发布到Bower或npm，直接在目标项目根目录执行bower install app1 --save（Bower）或者npm install app1 --save（npm）。安装完成后，根据包管理工具的目录结构，在HTML里引入对应的脚本（比如Bower会把包放在bower_components/app1/dist/下），再在模块里依赖它就行。

二、公共模块app1与app2、app3的依赖关系问题 #

能不能把app2和app3注入到app1中？ #

直接说结论：绝对不行。AngularJS的模块依赖是单向的——公共模块（app1）是提供基础能力的，应该是业务模块（app2、app3）去依赖它，而不是反过来把业务模块塞到公共模块里。要是这么做，app1就不再是通用的公共模块了，会和业务逻辑绑定死，完全违背了公共模块的设计初衷，后续维护起来会一团糟。

正确的实现思路 #

咱们换个方向来做：

1. 先把app1做成独立的纯公共模块：angular.module('app1', [])，在里面只放通用的服务、指令、过滤器、路由模板这些不涉及业务的内容。
2. 让app2依赖app1：在app2的模块定义里写angular.module('app2', ['app1'])，这样app2里的控制器、组件就能直接用app1提供的公共资源。
3. app3同理：angular.module('app3', ['app1'])，完美复用app1的能力。

关于bower install的方式是否正确？ #

用Bower来管理模块本身是没问题的，但你搞反了依赖方向：

• 如果你的需求是让app1作为公共模块被app2、app3复用，那应该是在app2和app3的项目里执行bower install app1 --save，并且在它们的bower.json里声明对app1的依赖。
• 要是你在app1里执行bower install app2 app3 --save，这就等于让公共模块依赖业务模块，完全搞反了逻辑，很容易出现循环依赖，后续打包、运行都会出问题。所以这个做法是错误的，得调整过来。

内容的提问来源于stack exchange，提问作者Hulk