AngularJS Component是怎麼運作的？ angularjs component的使用實例
- 寻∝梦原創
- 2018-09-08 14:43:211314瀏覽
這篇文章介紹關於angularjs component的介紹，讓我們來看看component到底是怎麼樣運作的。那就馬上開始閱讀這篇文章吧
關於angularjs的前言：
現在比較火的前段JS框架像 VUE,REACK,ANGULAR，這三種框架都有共同的特色那就是，雙向資料綁定，組件化開發。而在angular1.5的版本之前，都是以directive作為組件化的形式，而directive本身是一個指令，而並非是一個組件，所以它並不能很好的承擔組件這一個職責，所以google在angular1. 5的版本中推出了component元件，用來承擔應用程式之中元件化開發的重擔，那麼component到底是如何運作的？又該如何使用呢？我們將在這一章中詳細的探究一下component元件的使用方式。
在AngularJS中，Component比diective更適合基於元件的開發形式。
先來看一個比較簡單的Component例子。
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<h3>hero</h3>
<br>
<hero-detail hero='ctrl.hero'></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>在index.html中我們定義了一個hero-detail 標籤，這個標籤的宣告方式與directive 相似， 注意在這個標籤中定義了一個屬性hero-detail ， 這個定義的屬性是做什麼用的那？我們接著往下看
index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.hero = {
name:'Sunday'
}
});})(angular);在index.js中我們宣告了這個controller，並且在controller中我們寫了這麼一行程式碼
this.hero = {
name:'Sunday'
}.相信細心的小夥伴已經看出來了，沒錯，這裡對應我們在index.html中宣告的屬性hero='ctrl.hero' 是component中通訊的關鍵。
heroDetail.html
<h1>HeroName: {{$ctrl.hero.name}}</h1>在 heroDetail.html 中我們把從index.html中傳送過來的值展示出來。
heroDetail.js
(function(angular){
function HeroDetailController(){
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
hero:'='
}
});})(angular);在heroDetail.js 中， 我們宣告heroDetail 的component ，這裡要注意在index.html中以橫槓分離展示的標籤，在js程式碼中需要使用駝峰標示展示。其中的 ： bindings 對象，表示 component 之中通訊的協定。
現在是頁面中的展示效果：
在我們使用bindings 進行資料綁定的時候， 官方並不推薦我們使用「=」 進行資料綁定， 因為「=」 是一種雙向的資料綁定，這意味著我們在component中去修改資料的時候，在它的父元件中的值也會被修改。官方推薦我們使用「AngularJS開發手冊中學習）
#OK，介紹完了資料的綁定，那麼Component與父元件方法之間的綁定又是如何進行的那？
讓我們來看下面這個範例
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<hero-detail on-log="ctrl.log(text)"></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.log = function(text){
console.log("输出的内容为： " + text);
}
});})(angular);heroDetail.html
<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>
heroDetail.js
(function(angular){
function HeroDetailController($scope){
$scope.text = '';
var ctrl = this;
$scope.onLog = function(){
ctrl.onLog({text:$scope.text});
}
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
onLog:'&'
}
});})(angular);在程式碼中我們透過「&」 符號去綁定了一個方法 onLog() 這個方法接收一個text 參數， 需要注意的是，在參數進行傳遞的時候，是以json的形式進行傳遞的。這樣我們在點選 outputLog按鈕的時候，就會輸出我們在input輸入的內容。
好了，這篇文章到這就結束了（想看更多就到PHP中文網AngularJS使用手冊中學習），有問題的可以在下方留言提問。
以上是AngularJS Component是怎麼運作的？ angularjs component的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！