AngularJS元件化：将頁面中可以重複使用的标簽封裝成一個元件，友善這一部分UI重複使用，類似于JS中的函數，封裝了一部分處理代碼，通過函數調用就可以重複使用這些代碼。
元件可以用.component 注冊（在 angular.module 建立的module）。這個方法有兩個參數：元件名稱，元件配置對象（和指令的差別，一個是工廠方法，一個是對象）。
這是一個元件化的小應用：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular.min.js"></script>
</head>
<body>
<page-header></page-header>
<page-slide></page-slide>
<page-footer></page-footer>
<script>
var app = angular.module("myApp", []);
app.component("pageHeader", {
template:"<h2>尊敬的使用者{{username}}，歡迎通路本系統</h2>",
controller:function($scope) {
$scope.username = "tom";
}
});
app.component("pageSlide", {
template:"<h2>這是一個側邊欄導航</h2>"
});
app.component("pageFooter", {
template:"<h2>這是一個網頁底部代碼</h2>"
});
</script>
</body>
</html>
在實際開發中，很多網站的頁面中，header,footer,側邊欄樣式是一樣的，為了提高代碼的複用性，我們可以将header和footer部分封裝為元件，在頁面中單獨引用，便于開發
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/AngularJS/angular.min.js"></script>
<script src="js/app/index/index.js"></script>
</head>
<body>
<div class="container">
<page-header></page-header>
<page-slide></page-slide>
<div class="pageBody">
<!-- 網頁中要展示的購物車内容 -->
</div>
<page-footer></page-footer>
</div>
</body>
</html>
index.js:
// 定義了一個子產品對象
var app = angular.module("myApp", []);
app.component("pageHeader", {
templateUrl:"js/app/index/pageHeader/pageHeader.html",
controller:function($scope) {
}
});
app.component("pageSlide", {
templateUrl:"js/app/index/pageSlide/pageSlide.html",
controller:function($scope) {
}
});
app.component("pageFooter", {
templateUrl:"js/app/index/pageFooter/pageFooter.html",
controller:function($scope) {
}
});
pageHeader.html:
<div class="header-pageHeader">
頁面頭部
</div>
<style>
.header-pageHeader{
width:%;
height:px;
background:#069;
color:#fff;
}
</style>
pageFooter.html:
<div class="footer-pageFooter">
頁面底部
</div>
<style>
.footer-pageFooter{
clear:both;
width:%;
height:px;
background:#888;
color:#fff;
}
</style>
pageSlide.html:
<div class="slide-pageSlide">
側邊欄
</div>
<style>
.slide-pageSlide{
float:left;
width:px;
height:px;
background:orange;
}
</style>
![Windows phone開發初體驗之-基本概念的了解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)