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> ~~~