angularjs - pass data between controllers

Question

I'm stating to learn AngularJS, coming from a lot of different MV* frameworks. I like the framework, however I'm having trouble with passing data between Controllers.

Suppose I have a screen with some input (input.html) and a controller, let's say InputCtrl.
There's a button on this view which takes you to another screen, let's say approve (approve.html) with a controller ApproveCtrl.
This ApproveCtrl needs data from the InputCtrl. This seems like a very common scenario in bigger applications.

In my previous MV* frameworks, this would be handled like (pseudo-code):

   var self = this;
   onClick = function() {
          var approveCtrl = DI.resolve(ApproveCtrl);
          approveCtrl.property1 = self.property1;
          approveCtrl.property1 = self.property2;
          self.router.show(approveCtrl);  
   }            

• It would work like Controller- first. You create the controller first, having a chance to put it in the right state; afterwards the View gets created.

Now, in AngularJS, I'm handling this like:

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }

• This works like View-first. You say to which view / route to navigate, the Controller gets created by the framework.

I find it hard to control the state of the created Controller and pass data to it. I've seen and tried following approaches, but all have it's own issues in my opinion:

1. Inject a shared service into InputCtrl & ApproveCtrl and put all data to be shared on this service
   • This looks like a dirty work-around; the state in the shared service becomes global state, while I just need it to pass data to the ApproveCtrl
   • The lifetime of this shared service is way longer than what I need it for - just to pass data to the ApproveCtrl
2. Pass the data in $routeParams
   • This gets quite messy when having the pass a lot of parameters
3. Use $scope events
   • Conceptually, this is not something I would use events for - I just need to pass data to the ApproveCtrl, nothing event-ish
   • This is quite cumbersome; I have to send an event to the parent first, that would then broadcast it to it's children

Am I missing something here? Am I creating too many small Controllers? Am I trying to hold on to habits from other frameworks too much here?

Answer 1

In terms of structure AngularJS is more Modular than MVC one.

Classic MVC describes 3 simple layers which interact with each other in such way that Controller stitches Model with View (and Model shouldn't rather work with View directly or vice versa).

In Angular you can have multiple, some completely optional, entities which can interact between each other in multiple ways, for example:

That's why there are multiple ways of communicating your data between different entities. You can:

• Send messages directly between controllers using difference between this and $scope
• Send messages using events
• Send messages using shared system (Note: same link as above, answer shows both techniques)

or

• Send messages using AJAX backend
• Send messages using external system (such as MQ)

...and a lot more. Due to its diversity Angular allows developer/designer to choose way they are most comfortable with and carry on. I recommend reading AngularJS Developer Guide where you can find blessed solutions to some common problems.