了解基于组件的架构的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），因为它维护单一职责组件并且不公开其内部实现（您已经注意到我在每个“范围”中为同一结果指定了不同的名称，没有吗？）。