AngularJS Controller Organisation
Learn How to Oraganize Multiple AngularJS controllers in your Application
AngularJS Controllers : Organization of Controllers
In AngularJS Controllers act as link between the Data Model and the View, however, as the application gets complex, it needs multiple views and hence multiple types of controllers are needed to meet the demand.
Hence users need to organize the different Controllers within the application depending upon the requirement, there are Several Methods available to do the same.
AngularJS Controller Organization : Monolithic Controllers
The simplest way of using a Controller is to use it within the body element, or any other other element which completely wraps the entire application.Controllers build with this appproach are Monolithic Controllers.
In the demo, the object names is used to get user Name and the behaviour setName and copyName is used to set the Name and Copy the Same name respectively.
When you enter the name in the first input field, and save it, the same input can be copied into the second input field by clicking on the button below, since all data is available in the same scope.
Example: AngularJS Controller Organization Monolithic ControllersGive it a TRY! » Note: Monolithic Controllers can create only a single view throughout the application
AngularJS Controller Organization : Reusing a Controller
AngularJS Controllers can be organized in such a way that a single controller can be used multiple times to create multiple views.
In the demo , we have removed the ng-controller directive from the body element and applied it each div element containing a form element, effectively creating two controllers each generating its own view.
The copying of values does not work, since the data and behaviour set by each controller on its scope are independent of each other.
Example: AngularJS Controller Organization Reusing a ControllerGive it a TRY! » Note: The behaviour copyName does not function since its, because variable name is stored in a different scope.
AngularJS Controller Organization : Interaction between Different Scopes.
Last Example did not function since the scopes were different, and did not interact with each other, but Angular JS provides a mechanism to enable interaction between two indepenent scopes, using root scopes.
Using this approach each controller is assigned a scope which is a child of a root scope, it acts as an intermediary for all sorts of communication between the scopes.Root scope is provided as a service, it is used using the Name $rootScope
In order to send or recieve events, the AngularJS service $rootScope provides a set of methods which can be used to send and recieve events.
Table : AngularJS RootScope Service Methods for Sending and Receiving Events
|$broadcast(name, args)||To send an event from the current scope to all other child scopes. The argument are name(name of event) and args( i.e additional data)|
|$emit(name, args)||To send an event from the current scope to the root scope.|
|$on(name, handler)||To set a handler function, that is called when the event specified in the first argument is recieved by the scope.|
Example: AngularJS Controller Organization Interaction Between ScopesGive it a TRY! » Note:Set the phone number in the first input and copy the same to the second input.
AngularJS Controller Organization : Use of Service to Mediate Between Scope Events
AngularJS Services are used a medium to enable interaction in between multiple scopes, the method Module.service is used to create a service object that is then used by controllers to send and receive events, without having to interact with scope event methods.
In the demo, the service PhoneNumbers is dependent on service $rootScope and hence uses it within the method setPhoneNumber to call the event $broadcast.