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