有一句话我们常说:永远不要造重复的轮子。当我们水平还达到一定高度时,这样说更为恰当一些:永远努力不造重复的轮子。
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`,其起名与组件名相同,只是为了更便于记忆。
就像我常说的一样:当你对代码产生怀疑时,最好的方法便是:把它修改为自己怀疑的代码,然后立即查看效果。
- 前言
- 第一章:准备知识
- 第一节:GIT
- 第二节:Node.js
- 第三节:http-server
- 第四节:bower
- 第五节:firefox+chrome
- 第二章:官方示例教程
- 第零节:Hello Yunzhier
- 第一节:静态模板
- 第二节:MVC
- 回调函数
- 第三节:组件
- 第四节:重构组件
- 2.4.1 调用组件
- 2.4.2 规划目录结构
- 2.4.3 剥离V层
- 2.4.4 大话测试
- 第五节:循环过滤器
- 第六节:双向数据绑定
- 第七节:XHR与依赖注入
- 第八节:添加缩略图
- 第九节:模拟页面跳转
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十节:完善手机详情页
- 第十一节:自定义过滤器
- 第十二节:行为处理
- 第十三节:封装请求
- 第十四节:应用动画
- 第十五节:总结
- 第三章:菜谱管理示例
- 第四章:总结