AngularJS組件化--讓開發更簡單

AngularJS--組件化<component>

什麼是組件化？

組件化是將頁面中一部分UI分裝起來進行重複使用，UI中的數據是可以不同的，甚至組件中可以對UI進行適當的業務邏輯處理，如鏈接跳轉、數據運算。

代碼：定義組件基礎語法結構

var app=angular.module("pageHeader",[]);
app.component("組件名字",{
    template:"<h1>歡迎您尊敬的用戶</h1>"

})

HTML頁面：

<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"}
})