了解基於組件的架構的AngularJS方法

Question

最近，我進入了一個使用AngularJS的項目，發現自己陷入了一片混亂。 我很難理解如何將Angular應用於我的項目。

關於我的項目的一些背景知識，我有多個部分需要在開始時加載。 可以將其視為具有多個部分內容的SPA。

在這些部分中，我試圖包括組件/指令。 它們可能包含父子組件/指令，也可能是兄弟姐妹組件/指令。

我喜歡將它們模塊化的概念，但是我完全不知道如何讓它們彼此通信。 對於父子指令/組件，我知道我可以使用包含/要求。

但是，如果我有一個兄弟組件，例如預加載器和輪播畫廊組件，我找不到任何讓他們互相交談的方法。 我懷疑我對方法和體系結構的理解是完全錯誤的。

請開導我，最后使我朝正確的方向處理該情況。

多謝你們。

Answer 1

從1.5開始有組件 。 正如您在文檔中可以看到的那樣，它們應僅具有IN（由<綁定表示）和OUT（ & ）。

當您希望兩個同級組件進行通信時，您必須由某個父組件執行此操作，該父組件會將一個組件的OUT分配給另一個組件的IN。 看一個簡單的例子：

 angular.module('gyeong', []) .component('myView', { template: '<component-a on-some-task-finish="$ctrl.resultFromA = result"></component-a>' + '<component-b priceless-result="$ctrl.resultFromA"></component-b>' }) .component('componentA', { bindings: { 'onSomeTaskFinish': '&' }, template: '<p>This is component A. I {{ $ctrl.myData ? "have finished loading" : "am currently loading" }} the data.</p>', controller: function($timeout) { var self = this; $timeout(function() { self.myData = 'This is THE result'; self.onSomeTaskFinish({ result: self.myData }); }, 2000); } }) .component('componentB', { bindings: { 'pricelessResult': '<' }, template: '<p>This is component B. I {{ !$ctrl.pricelessResult ? "am waiting for the result" : "have received the result! It is " + $ctrl.pricelessResult }}.</p>' }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <div ng-app="gyeong"> <my-view></my-view> </div> 

當然，還有其他選擇（如您提到的事件或服務）。 但是，這是首選的（IMO），因為它維護單一職責組件並且不公開其內部實現（您已經注意到我在每個“范圍”中為同一結果指定了不同的名稱，沒有嗎？）。