現在,我們有了`phone-list`和`hello-yunzhi`兩個組件,都存在于`phone-list.component.js`中。顯然,這有一點問題。因為我們的`hello-yunzhi`組件,更愿意有自己的專屬文件----`hello-yunzhi.component.js`。
下面,讓我們共同規劃下這兩個組件。
規劃組件以前,我們在根目錄下,新建`yun-zhi`文件夾,用以存放`hell-yunzhi`及`phone-list`組件。文件夾建立后,將`phone-list.component.js`移動到此文件夾。
移動后,目錄結構如下:
~~~
.
├── app.js
├── bower_components
│?? └── angular
│?? ├── LICENSE.md
│?? ├── README.md
│?? ├── angular-csp.css
│?? ├── angular.js
│?? ├── angular.min.js
│?? ├── angular.min.js.gzip
│?? ├── angular.min.js.map
│?? ├── bower.json
│?? ├── index.js
│?? └── package.json
├── index.html
├── test.html
└── yun-zhi
└── phone-list.component.js
~~~
## 剝離`hello-yunzhi`組件
新建 `hello-yunzhi.component.js`
代碼如下:
~~~
// 定義一個yunZhi模塊,供組件使用。
angular.module('yunZhi', []);
// 在yunzhi模塊上注冊'helloYunzhi'組件
angular.
module('yunZhi').
component('helloYunzhi', {
template:'<h2>Hello Yunzhi</h2>',
});
~~~
同時,刪除`phone-list.component.js`中關于組件`hello-yunzhi`的定義。
## 重新引用`hello-yunzhi`、`phone-list`
`index.html`
~~~
...
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="yun-zhi/phone-list.component.js"></script>
<script src="yun-zhi/hello-yunzhi.component.js"></script>
</head>
...
~~~
測試:

## 重構
盡量不去制造重復的輪子。
通過觀察代碼,我們發現,在兩個組件中,存在重復的輪子,即對yunZhi模塊的定義。
現在,我們新增一個文件,專門來進行模塊的定義,去掉一個重復的輪子。
`yun-zhi/yun-zhi.module.js`
~~~
// 定義一個yunZhi模塊,供組件使用。
angular.module('yunZhi', []);
~~~
然后去掉兩個組件中上面的代碼,并在index.html中引用我們剛剛建立的`yun-zhi.module.js`
`index.html`
~~~
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="yun-zhi/yun-zhi.module.js"></script>
<script src="yun-zhi/phone-list.component.js"></script>
<script src="yun-zhi/hello-yunzhi.component.js"></script>
</head>
~~~

沒錯,效果仍然不變。
* * * * *
各文件代碼如下:
`app.js`
~~~
// 定義模塊
var phonecatApp = angular.module('phonecatApp', ['yunZhi']);
// 定義控制器
phonecatApp.controller('PhoneListController', function($scope) {
$scope.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.'
}];
});
~~~
`yun-zhi/yun-zhi.module.js`
~~~
// 定義一個yunZhi模塊,供組件使用。
angular.module('yunZhi', []);
~~~
`yun-zhi/hello-yunzhi.component.js'
~~~
// 在yunzhi模塊上注冊'helloYunzhi'組件
angular.
module('yunZhi').
component('helloYunzhi', {
template:'<h2>Hello Yunzhi</h2>',
});
~~~
`yun-zhi/phone-list.components.js`
~~~
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.'
}];
}
});
~~~
- 前言
- 第一章:準備知識
- 第一節: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
- 第十節:完善手機詳情頁
- 第十一節:自定義過濾器
- 第十二節:行為處理
- 第十三節:封裝請求
- 第十四節:應用動畫
- 第十五節:總結
- 第三章:菜譜管理示例
- 第四章:總結