Angular Project Architecture

Question

I am building an app in angular, which consumes different APIs and Gives options for the user to select it will be recorded and sent back to the server.

I have designed it as follows.

• All the common logic in Main Controller and all other options in different controllers as the child of main controller.
• Main Controller retrieve all the data that are required to run the app. which is consumed by all other child controllers.
• To make sure data is loaded I am using promise attached to scope. So all the child controller will know data loaded.
• I have moved data updation part of all child controllers to main controller because all the updates happen in one object.
• Child Controller emit/broadcast to communicate between child and main. So when update happens child will emit an event with data which will be captured by Main and it will do the update.

MainController {    $scope.loaded = DataService.get();   $scope.userOptions = {};   $scope.$on('update',function(){    updateUserOptions();   }) }  ChildController {    $scope.loaded.then(function(){     //all logic of child controller   }    $scope.onselect = function(){     $scope.$emit('update',data);   } } 

Questions

1. Is it a good practice to use events between controllers ?
2. is it good to use promise attached to scope for child controllers ?
3. Will it improve my code if I start using services ?

Answer 1

I will try to answer your question based on my own experience. Recently I've built a single page application and I've refactored its architecture.

Here are my answers:

1. Is it a good practice to use events between controllers? IMHO, it is the most flexible way to share information between all controllers even if they have isolated scope (using $broadcast or $emit for example). This is called the Observer design pattern. However, you can use services instead of events to share data between them. If you are going to use $rootScope, be careful as all the $scopes inherit from $rootScope.
2. is it good to use promise attached to scope for child controllers ? Firstly, you have to learn about how scope inheritance works. You have to take care to avoid property shadow in JS. Secondly, I would move out all the logic from scope.loaded in ChildController to a service such as ChildService. Keeping the business logic (such as request, etc) in Services instead of Controllers, will ensure it can be re-used. Segregation of business logic is good design principle.
3. Will it improve my code if I start using services ? I answered this question above.

In addition, in order to build a good architecture I've read this angular style guide written by John Papa.

I recommend the following changes:

1. To make sure data is loaded I am using promise attached to scope. So all the child controller will know data loaded.. Instead I would emit a custom 'loaded' event in the MainController using $scope.$emit('loaded'). After that, in the ChildController I would use $scope.$on('loaded', function(){}) to handle the event.
2. I would move the updateUserOptions function to a service and inject the it into just the controllers that need it.

I hope that helps!

Answer 2

Is it a good practice to use events between controllers ? Not as the main form of data sharing, but you can use it to notify about system events, such as data ready.

Is it good to use promise attached to scope for child controllers ? Don't use scope inheritance, it causes lots of annoying problems.

Will it improve my code if I start using services ? Yep.

This is what I would do in your place:

dataService - this service is responsible for all data coming in / going out. Whenever a request for data is made (no matter which controller asked for the data), the service caches the data (save the promise is good enough). All further requests get the cached data unless they specify they want a fresh data. Whenever data is updated (1st time or refresh), the service broadcasts a 'dataReady' event via $rootScope to which the main controller and other subscribers can listen. The service is also responsible for data updates, and when the data is updated you can also broadcast an event via the $rootScope. When the event is activated, all subscribers query the service, and get the data they need.

Controllers - avoid controllers, use directives with isolated scope, and pass the data between them using attributes. In this way you can be sure that each directive gets what it needs, and not everything. The directives can communicate using attributes, services, broadcast / emit or require their parents / siblings if they work closely together.