🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
有一句话我们常说:永远不要造重复的轮子。当我们水平还达到一定高度时,这样说更为恰当一些:永远努力不造重复的轮子。 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`,其起名与组件名相同,只是为了更便于记忆。 就像我常说的一样:当你对代码产生怀疑时,最好的方法便是:把它修改为自己怀疑的代码,然后立即查看效果。