angular，从一个多个模块的完整功能中抽取出一个模块做成独立页面

　　事情起源于项目中的语音测听与文本展示功能的页面需要支持第三方插件的调用，使用路由跳转有问题。当然，详细原因不太了解，反正是要将这两个模块抽取出来做成独立页面，这样通过跳转到页面来移除路由使用。

　　实现的方向很简单，将要抽离的模块名直接 module.exports 出来，然后通过 angular 自带的 bootstrap() 方法在单独的页面中启动。

　　但写的时候就遇到了问题，项目中的指令与服务都依赖于主模块，也许是当初开始写的时候没考虑到要分离，所以指令服务什么的与模块耦合的非常紧，这就会导致如果你想独立模块时，使用主模块的指令，要么依赖主模块，要么复制粘贴将指令服务重写在这个独立的模块上。

　　其实两种办法都挺麻烦的。依赖主模块，虽然写法简单，一调就可以，但编译出的文件会让你有一种吐血的冲动，它会把有关主模块的一切都编译进去，导致文件特别大，比如我们的项目， js 总共14万行，而独立出的模块通过依赖主模块编译后的文件就达到了12万行。。。这与我们的初衷严重不符！第二种复制粘贴呢，其实项目中使禁止这种方法的，因为讲究的是代码复用，复制粘贴算怎么回事，虽然也能达到目的，但是也不太好。

　　其实最后我们用的还是依赖主模块的办法，因为项目比较着急，线上等着回复呢，只能等到以后慢慢将指令服务与主模块分开了，将他们独立到一个模块去，减少与主模块的耦合，其实这一点上 angular2.0 的理念很好，所有的功能都通过组件来配合完成，用到就引，不用不引，代码复用非常高，同时也非常人性化的灵活。真心期待 angular2.0 引入到项目中。

　　这里做一个笔记，这个问题其实还有一种解决方法，个人觉得也是可行的：

　　比如一个指令，我们可以将指令的壳子与指令内容分开，将指令内容写成一个返回功能方法的函数，然后将方法 module.exports 抛出。想使用此指令时，在自己的模块上写一个指令并调用引入的函数，这样就能很好地不用复制就重写了一个指令，简单而快捷。要抽取的模块使用的指令与服务并不多，完全可以使用这种方式来进行修改，即避免了复制粘贴，又很好的代码重用。最重要的是 angular2.0 的这种思想：组件化，功能由多个组件共同实现，而每个组件又能在不同功能中担任不同任务，这是 angular1 中指令所无法实现的。

转载于:https://www.cnblogs.com/guofan/p/6554545.html