我們一直在談MVC的設計模式,就是要把模型、視圖及控制制進行分離,這使得團隊開發更加輕松,維護起來當然也更加的簡單。
組件也是一樣,當我們發現在JS代碼中寫了HTML代碼,就需要思索是不是可以將HTML分離出JS代碼了。
## 組件中的模板
在組件中,除了可以定義`template`外,還可以定制一個`templateUrl`,它的出現,使得我們將模板文件與組件相分離成為了可能。
### 新建模塊文件
`yun-zhi/phone-list.template.html`
~~~
<ul>
<li ng-repeat="phone in $ctrl.phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
~~~
`yun-zhi/hello-yunzhi.template.html`
~~~
<h2>Hello Yunzhi</h2>
~~~
### 更改模塊參數
`yunzhi/phone-list.component.js`
~~~
angular.
module('yunZhi').
component('phoneList', {
templateUrl: 'yun-zhi/phone-list.template.html',
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.'
}];
}
});
~~~
`yun-zhi/hello-yunzhi.component.js`
~~~
angular.
module('yunZhi').
component('helloYunzhi', {
templateUrl:'yun-zhi/hello-yunzhi.template.html',
});
~~~
> 這里的templateUrl的路徑地址,需要相對于`index.html`。
測試:

至此,我們完整的剝離出了組件,并將組件應用到`index.html`中實現了相同的效果。既然組件都剝離了,當然`app.js`中的控制器,也就可以退出歷史舞臺了。刪除冗余代碼后:
`app.js`
~~~
// 定義模塊
var phonecatApp = angular.module('phonecatApp', ['yunZhi']);
~~~
由于此時,這個文件的功能僅僅是定義了一個模塊而已。那么,為了使文件名與文件更好的對應,我們把它改成:`app.module.js`,并修改引用`index.html`的引用位置。
`index.html`
~~~
- <script src="app.js"></script>
+ <script src="app.module.js"></script>
~~~
最終目錄結構如下:
~~~
├── app.module.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
├── hello-yunzhi.component.js
├── hello-yunzhi.template.html
├── phone-list.component.js
├── phone-list.template.html
└── yun-zhi.module.js
~~~
至此,兩個組件的V層與C層成功的進行了分離。當然了,組件我們也成功的進行了分離。重新規劃了文件名和文件路徑后,我們發現的確看起來更加清爽了。
* * * * *
`├── app.module.js`
~~~
// 定義模塊
var phonecatApp = angular.module('phonecatApp', ['yunZhi']);
~~~
`├── index.html`
~~~
<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp">
<head>
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="bower_components/angular/angular.js"></script>
<script src="app.module.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>
</head>
<body>
<phone-list></phone-list>
<hello-yunzhi></hello-yunzhi>
</body>
</html>
~~~
`└── yun-zhi`
`├── yun-zhi.module.js`
~~~
// 定義一個yunZhi模塊,供組件使用。
angular.module('yunZhi', []);
~~~
`└── yun-zhi`
`├── hello-yunzhi.component.js`
~~~
// 在yunZhi模塊上注冊'helloYunzhi'組件
angular.
module('yunZhi').
component('helloYunzhi', {
templateUrl:'yun-zhi/hello-yunzhi.template.html',
});
~~~
`├── hello-yunzhi.template.html`
~~~
<h2>Hello Yunzhi</h2>
~~~
`├── phone-list.component.js`
~~~
angular.
module('yunZhi').
component('phoneList', {
templateUrl: 'yun-zhi/phone-list.template.html',
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.'
}];
}
});
~~~
`├── phone-list.template.html`
~~~
<ul>
<li ng-repeat="phone in $ctrl.phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
~~~
- 前言
- 第一章:準備知識
- 第一節: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
- 第十節:完善手機詳情頁
- 第十一節:自定義過濾器
- 第十二節:行為處理
- 第十三節:封裝請求
- 第十四節:應用動畫
- 第十五節:總結
- 第三章:菜譜管理示例
- 第四章:總結