Modules in Angular JS

Hi Friends,

Now in this section we’ll see how modules can actually be used to create other things like controllers, routes, factories and services, and then how all this fits together.



so, basically the above diagram is the simplified version of angular that how angular really fits different things together to produce a big picture. So, a module can have something like config function and which in return is used to define different routes. Now routes again are really important from the SPA perspective because if we have different views and those views need to be loaded into the shell page then we need some mechanism to understand what route we’re on and what view that’s associated with and then what controller goes with that view.

so, here in this case we need to understand this fact that modules basically act as containers as shown below in the diagram.


Now,here is a module object say angular.module – and from this module we can configure the routes, create custom filters, custom directives. we can get data from different sources using Factories, Services, Providers or Values. we can then even create Controllers using the module. So, basically modules act as really just an object container.



so, as you can see in the code snippet above, i have declared the module name @ the top of the page in “<html data-ng-app=”basicApp”>” so that my page will come to know about the module being invoked. later on the module’s body is being declared at the bottom section of the page. also, you could have noticed that we have created our controller in the module itself and the same has been called with “data-ng-controller=”basicController”“.

So, in the next section we’ll see Routes and Factories. Till then stay tuned and Happy Coding.

Happy Coding