Geek Answers Handbook

Communication with a large controller in AngularJS

I applied a single page application with AngularJS . A page consists of a content area in the middle and sections gathered around the center that show additional information and provide tools for managing the center.

enter image description here

Each section (called Side Info ) and the content area have a separate AngularJS controller assigned to them. I am currently communicating via $rootScope.$broadcast and $scope.$on() , for example.

 app.controller('PropertiesController', function ($scope, $rootScope) { $scope.$on('somethingHappened', function(event, data){ // react }); });

Then I call to communicate with other controllers:

 $rootScope.$broadcast('somethingHappened', data);

I have a lot of communication between controllers. Especially if something happens in the content area, it is necessary to accept several elements of additional information. Another way is also frequent: the user submits the form (located in the additional information), and the content area and other elements of the additional information must accept.

My question is: Is there a better way to deal with SPA through complex communication with the controller?

The code works fine, but it is already a bit confusing (for example, it is difficult to find which events are processed there, etc.). Since the application is likely to grow in the coming weeks, I would like to make these changes (if there are any better solutions) as soon as possible.

+8
javascript angularjs
source share
4 answers

This is really interesting. Pub / Sub should be the right solution here.

You can add an additional order to your project using Angular services as an MVC model and update this model for each change. The problem here is that you have to implement the observed pattern inside your service and register for them so that it is synchronized in real time. So, we are back in Pub / Sub (or another Observable solution that you might think about ...).

But the project will be better organized in this way.

For example, SideInfo1Service will be a service / model. Each property change will cause an observed change that will change all listeners:

 myApp.factory('SideInfo1Service', function($scope){ var _prop1; return { setProp1: function(value){ $scope.$broadcast('prop1Changed', value); _prop1 = value; }, getProp1: function(){ return _prop1; } } });

You can find those really interesting blog entries about using Angular Services as an MVC model:

http://toddmotto.com/rethinking-angular-js-controllers/

http://jonathancreamer.com/the-state-of-angularjs-controllers/

And this post is about the observable pattern in Angularjs:

stack overflow

Hope this can be helpful (:

+1
source share

you can use

 $rootScope.$emit('some:event') ;

because it goes up, and the root area is the upper level

using

 var myListener = $rootScope.$on('some:event', function (event, data) { }); $scope.$on('$destroy', myListener);

to catch an event

Then you have a message on the same level as a root crop without bubbles

Here is my implemented eventbus service

http://jsfiddle.net/navqtaoj/2/

Change You can use a namespace, such as some: event , to group and organize event names better and add log outputs when the event fires and when the event is caught so that you can easily understand whether they were shooting or not encountering the wrong event name.

0
source share

You have several options to avoid broadcasts:

  • Share data between controllers using services, as mentioned in the comments. You can see how this is done: https://thinkster.io/egghead/sharing-data-between-controllers

  • Create a master controller for the entire page and child controllers for each section (content area and additional information). Use inheritance prototype area. For example:

if in the main controller you have: $scope.myObject = someValue;

in child controllers that you can set: $scope.myObject.myProperty = someOtherValue;

you can access myObject.myProperty from the main controller

0
source share

Very important question and very good answers.

I got inspiration and created three plunges showing each technique:

Look at the plows, hope this helps.

0
source share

More articles:


All Articles