2.4.3 剥离V层 · angularjs

我们一直在谈MVC的设计模式，就是要把模型、视图及控制制进行分离，这使得团队开发更加轻松，维护起来当然也更加的简单。组件也是一样，当我们发现在JS代码中写了HTML代码，就需要思索是不是可以将HTML分离出JS代码了。 ## 组件中的模板在组件中，除了可以定义`template`外，还可以定制一个`templateUrl`，它的出现，使得我们将模板文件与组件相分离成为了可能。 ### 新建模块文件 `yun-zhi/phone-list.template.html` ~~~ <ul> <li ng-repeat="phone in $ctrl.phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> ~~~ `yun-zhi/hello-yunzhi.template.html` ~~~ <h2>Hello Yunzhi</h2> ~~~ ### 更改模块参数 `yunzhi/phone-list.component.js` ~~~ angular. module('yunZhi'). component('phoneList', { templateUrl: 'yun-zhi/phone-list.template.html', controller: function PhoneListController() { this.phones = [{ name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' }, { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' }, { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }]; } }); ~~~ `yun-zhi/hello-yunzhi.component.js` ~~~ angular. module('yunZhi'). component('helloYunzhi', { templateUrl:'yun-zhi/hello-yunzhi.template.html', }); ~~~ > 这里的templateUrl的路径地址，需要相对于`index.html`。测试: ![](https://box.kancloud.cn/2016-07-20_578f3934b83e6.png) 至此，我们完整的剥离出了组件，并将组件应用到`index.html`中实现了相同的效果。既然组件都剥离了，当然`app.js`中的控制器，也就可以退出历史舞台了。删除冗余代码后： `app.js` ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', ['yunZhi']); ~~~ 由于此时，这个文件的功能仅仅是定义了一个模块而已。那么，为了使文件名与文件更好的对应，我们把它改成:`app.module.js`，并修改引用`index.html`的引用位置。 `index.html` ~~~ - <script src="app.js"></script> + <script src="app.module.js"></script> ~~~ 最终目录结构如下： ~~~ ├── app.module.js ├── bower_components │ └── angular │ ├── LICENSE.md │ ├── README.md │ ├── angular-csp.css │ ├── angular.js │ ├── angular.min.js │ ├── angular.min.js.gzip │ ├── angular.min.js.map │ ├── bower.json │ ├── index.js │ └── package.json ├── index.html ├── test.html └── yun-zhi ├── hello-yunzhi.component.js ├── hello-yunzhi.template.html ├── phone-list.component.js ├── phone-list.template.html └── yun-zhi.module.js ~~~ 至此，两个组件的V层与C层成功的进行了分离。当然了，组件我们也成功的进行了分离。重新规划了文件名和文件路径后，我们发现的确看起来更加清爽了。 * * * * * `├── app.module.js` ~~~ // 定义模块 var phonecatApp = angular.module('phonecatApp', ['yunZhi']); ~~~ `├── index.html` ~~~ <!DOCTYPE html> <html lang="en" ng-app="phonecatApp"> <head> <head> <meta charset="UTF-8"> <title>hello</title> <script src="bower_components/angular/angular.js"></script> <script src="app.module.js"></script> <script src="yun-zhi/yun-zhi.module.js"></script> <script src="yun-zhi/phone-list.component.js"></script> <script src="yun-zhi/hello-yunzhi.component.js"></script> </head> </head> <body> <phone-list></phone-list> <hello-yunzhi></hello-yunzhi> </body> </html> ~~~ `└── yun-zhi` `├── yun-zhi.module.js` ~~~ // 定义一个yunZhi模块，供组件使用。 angular.module('yunZhi', []); ~~~ `└── yun-zhi` `├── hello-yunzhi.component.js` ~~~ // 在yunZhi模块上注册'helloYunzhi'组件 angular. module('yunZhi'). component('helloYunzhi', { templateUrl:'yun-zhi/hello-yunzhi.template.html', }); ~~~ `├── hello-yunzhi.template.html` ~~~ <h2>Hello Yunzhi</h2> ~~~ `├── phone-list.component.js` ~~~ angular. module('yunZhi'). component('phoneList', { templateUrl: 'yun-zhi/phone-list.template.html', controller: function PhoneListController() { this.phones = [{ name: 'Nexus S', snippet: 'Fast just got faster with Nexus S.' }, { name: 'Motorola XOOM™ with Wi-Fi', snippet: 'The Next, Next Generation tablet.' }, { name: 'MOTOROLA XOOM™', snippet: 'The Next, Next Generation tablet.' }]; } }); ~~~ `├── phone-list.template.html` ~~~ <ul> <li ng-repeat="phone in $ctrl.phones"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> ~~~