第三節：組件 · angularjs

有一句話我們常說：永遠不要造重復的輪子。當我們水平還達到一定高度時，這樣說更為恰當一些：永遠努力不造重復的輪子。 angularjs又怎么可能沒看到我們的需求呢？和大部分框架一樣，angularjs把輪子起名為：組件--component。下面，我們嘗試將上節中的手機列表變成一個組件，然后將這個組件應用到index.html中，以實現相同的效果。 # 官方示例先看一下組件的示例代碼： ~~~ angular. module('myApp'). component('greetUser', { template: 'Hello, {{$ctrl.user}}!', controller: function GreetUserController() { this.user = 'world'; } }); ~~~ 由上面的代碼我們不難總結出：新建組件的方法為component('組件名',{組件對象}); 組件對象中有兩個屬性： template：規定了html的內容，即模板的內容。 controller：規定了這個組件對應的控制器，是這個控制器還是那個function。和直接使用不一樣的是：在模板中，我們將$scope變成了$ctrl；在controller中，我們將原來的$scope變成了this。 # 組件按照官方給的示例，我們來制作我們需要用到的手機列表組件，在這里，我們把它起名為：phone-list。 ## 新建phone-list.component.js ### 定義模塊 ~~~ angular. module('phonecatApp'). ~~~ ### 定義組件 ~~~ angular. module('phonecatApp'). component('phoneList', {}); ~~~ 有人會問老師為什么文件名是phone-list，在這里卻是phoneList呢？這是angularjs的規定，應用phoneList組件時，我們在模板中，需要寫：`phone-list`而不是`phoneList`，angularjs會自動將模板中的`phone-list`與我們的`phoneList`進行關聯。至于為什么會是這樣，應該是angularjs的作者考慮了大多數程序員的書寫習慣而統一了一個規范吧。 ### 完善組件對象 ~~~ angular. module('phonecatApp'). component('phoneList', { template: '', controller: function PhoneListController() {} }); ~~~ ### 完善模板信息 ~~~ ... template: '<ul>' + '<li ng-repeat="phone in $ctrl.phones">' + '<span>{{phone.name}}</span>' + '<p>{{phone.snippet}}</p>' + '</li>' + '</ul>', controller: function PhoneListController() {} ... ~~~ ### 完善控制器信息 ~~~ 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.' }]; } ~~~ ## 調用組件我們剛剛建立了一個phoneList，如何將其應用到index.html中呢？前面我們講過了：在angularjs是這樣規定的，如果組件的名字是phoneList，那么在應用時，應該使用`<phone-list></phone-list>`。不錯，就是將駝峰式寫法，改為中劃線式寫法。 ### 引用組件 `index.html` ~~~ + <script src="phone-list.component.js"></script> ~~~ ### 調用組件 ~~~ - <body ng-controller="PhoneListController"> - <ul> - <li ng-repeat="phone in phones"> - <span>{{phone.name}}</span> - <p>{{phone.snippet}}</p> - </li> - </ul> + <body> + <phone-list></phone-list> ~~~ 測試： ![](https://box.kancloud.cn/2016-07-20_578f3933787ad.png) ## 小測試本小節我們將用一個小測試來深入認識下組件。 ### 更改組件模塊名 `phone-list.component.js` ~~~ - module('phonecatApp'). + module('yunzhi'). ~~~ 測試： ![](https://box.kancloud.cn/2016-07-20_578f393393a78.png) 結論：模塊必須依賴于已定義的模塊。 ### 更改控制器名 `phone-list.component.js` ~~~ - phonecatApp.controller('PhoneListController', function($scope) { + phonecatApp.controller('Yunzhi', function($scope) { ~~~ 測試： ![](https://box.kancloud.cn/2016-07-20_578f3933b0d95.png) 結論：控制器的名字，對組件的正常使用沒有影響，這里起名為`PhoneListController`，只是為了更易于記憶。 ### 更改組件名 `phone-list.component.js` ~~~ + component('yunZhi', { - component('phoneList', { ~~~ `index.html` ~~~ - <phone-list></phone-list> + <yun-zhi></yun-zhi> ~~~ ![](https://box.kancloud.cn/2016-07-20_578f3933c9615.png) 結論：更改組件名后重新引用，沒有問題。說明：組件的文件名`phone-list.component.js`，其起名與組件名相同，只是為了更便于記憶。就像我常說的一樣：當你對代碼產生懷疑時，最好的方法便是：把它修改為自己懷疑的代碼，然后立即查看效果。