AngularJS元件化--讓開發更簡單
阿新 • • 發佈：2019-02-01
AngularJS--元件化<component>
什麼是元件化？ 元件化是將頁面中一部分UI分裝起來進行重複使用，UI中的資料是可以不同的，甚至元件中可以對UI進行適當的業務邏輯處理，如連結跳轉、資料運算。 程式碼：定義元件基礎語法結構var app=angular.module("pageHeader",[]);
app.component("元件名字",{
template:"<h1>歡迎您尊敬的使用者</h1>"
})<page-header></page-header> 注意：元件命名規則
元件的命名有框架自己的規則和使用規範，都是根據實際專案需要進行封裝處理的
元件命名規則：駝峰命名法，見名知意，如：myComp
使用規則：W3C命名規則，將大寫字母轉換成小寫字母，前面加中劃線;
元件選項： template:元件替換模板字串 templateUrl:元件替換html模板頁面
controller:元件控制器
程式碼：定義元件語法使用var app=angular.module("myapp",[]);
app.component("pageHeader",{
template:"<h1>歡迎您尊敬的使用者{{username}}</h1>",templateUrl:"需要開啟的頁面路徑"，
controller:function($scope){
$scope.username="Tom"}
})