2.4.1 調用組件 · angularjs

組件定義好后，怎么在其它模塊中使用呢？還記得那個`angularjs.moudle('phonecatApp', []);`吧，在`[]`里，我們沒有傳入任何參數。我們將在組件中定義的`yunZhi`放在這個`[]`中，就能夠使用`yunZhi`模塊定義的`phone-list`組件了。 'app.js' ~~~ // 定義模塊 - var phonecatApp = angular.module('phonecatApp', []); + var phonecatApp = angular.module('phonecatApp', ['yunZhi']); ~~~ 測試： ![](https://box.kancloud.cn/2016-07-20_578f3934280c3.png) 的確，我們定義`phonecatApp`模塊時，將`yunZhi`做為參考傳入后，就可以應用`yunZhi`中的`phone-list`組件了。當然了，我們還可以利用定義的`yunZhi`模塊建立其它的組件供我們使用。比如我們增加以下代碼： `phone-list.component.js` ~~~ angular. module('yunZhi'). component('helloYunzhi', { template:'<h2>Hello Yunzhi</h2>', }); ~~~ `index.html` ~~~ + <hello-yunzhi></hello-yunzhi> ~~~ ![](https://box.kancloud.cn/2016-07-20_578f393447e1a.png) 增加后，整體代碼如下： `phone-list.component.js` ~~~ // 定義一個yunZhi模塊，供組件使用。 angular.module('yunZhi', []); angular. module('yunZhi'). component('phoneList', { template: '<ul>' + '<li ng-repeat="phone in $ctrl.phones">' + '<span>{{phone.name}}</span>' + '<p>{{phone.snippet}}</p>' + '</li>' + '</ul>', 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.' }]; } }); angular. module('yunZhi'). component('helloYunzhi', { template:'<h2>Hello Yunzhi</h2>', }); ~~~ `index.html` ~~~ <!DOCTYPE html> <html lang="en" ng-app="phonecatApp"> <head> <meta charset="UTF-8"> <title>hello</title> <script src="bower_components/angular/angular.js"></script> <script src="app.js"></script> <script src="phone-list.component.js"></script> </head> <body> <phone-list></phone-list> <hello-yunzhi></hello-yunzhi> </body> </html> ~~~