diff --git a/contribution/zeppelinweb/goodPracticeGuide01.md b/contribution/zeppelinweb/goodPracticeGuide01.md index 7580b776d6c..317bd0f5ac4 100644 --- a/contribution/zeppelinweb/goodPracticeGuide01.md +++ b/contribution/zeppelinweb/goodPracticeGuide01.md @@ -1,6 +1,6 @@ --- layout: sideMenu -title: "Defining Components" +title: "1 - Defining Components" description: "" group: nav-contrib-front menu: nav-contrib-front diff --git a/contribution/zeppelinweb/goodPracticeGuide02.md b/contribution/zeppelinweb/goodPracticeGuide02.md new file mode 100644 index 00000000000..b3d39f2801c --- /dev/null +++ b/contribution/zeppelinweb/goodPracticeGuide02.md @@ -0,0 +1,66 @@ +--- +layout: sideMenu +title: "2 - Event Dispatching" +description: "" +group: nav-contrib-front +menu: nav-contrib-front +--- + + +# Event Dispatching in Angular + +
+AngularJS provides an Event dispatching system allowing the communication between controllers or services and controllers. + +`$broadcast` dispatches the event downwards through the child scopes + +`$emit` dispatches the event upwards through the scope hierarchy + +`$on` catches the event passing by that scope + +
+You can usually see it being used from `$rootScope` or `$scope` + +``` +$scope.$broadcast('eventName', arg); +$rootScope.$broadcast('eventName', arg); + +$scope.$emit('eventName', arg); +$rootScope.$emit('eventName', arg); + +$scope.$on('eventToCatch', function); +$rootScope.$on('eventToCatch', function); +``` + +Now, there are a few things to know about using it from `$rootScope`: + +* Both `$rootScope.$emit` and `$rootScope.$broadcast` go through child scopes since `$rootScope` doesn't have a parent +* `$rootScope.$emit` can only be received by `$rootScope.$on` +* `$rootScope.$broadcast` can be received by `$rootScope.$on` and `$scope.$on` +* `$rootScope.$on` listener needs to be removed by hand (Memory leak if forgotten) + + +#### How we are using it in the project + +* Usage of event dispatching should be limited if possible +* We only use `$rootScope.$broadcast` and `$scope.$on` for event dispatching/catching + + +#### Performances + +Using `$broadcast` might not seem optimum if we consider the description we have above. + +However, it is optimized to only go through branches that have a matching event binding. +(cf. [this post](http://www.bennadel.com/blog/2724-scope-broadcast-is-surprisingly-efficient-in-angularjs.htm))