Modules
Modules in angular can be thought of as a container where all the other parts of our application like controllers, services etc will be contained in and which specify how an application should be bootstrapped. You can think of a module much like a namespace in C# or Java, except that they are a little more than that.The difference between a module in Angular and a typical namespace is that modules also have methods on them for initialization of the module and for creation of controllers, services, etc. The best part about module is that a module can easily be passed to another module and its functionality can easily be used by other modules. Following are the benefits of using Modules
- Helps package our code into reusable modules.
- The declarative process is easier to understand
- Modules can be loaded in any order.
- Easily testable and maintainable components.
- Helps organize your application.
Application Modules - used to initialize an application with controller(s).
Controller Modules - used to define the controller.
To create a module, we need to use the angular.module function. Lets create a simple module named "myApplication".
So to create our module, add the following to the JavaScript:
var myModule = angular.module('myApplication', []);
Notice that there are two parameters passed into the module method: The name of your module and an array. In this example we’re not passing anything into the array, but we could pass in a list of strings that refer to other module names (this is why you need a name for your module in the first place). Passing in other module names in that array allows your new module to inherit the controllers, services, etc. from those modules.So lets say we have another module called "myAnotherApplication" which would want to use the above defined module. We will have to pass the myApplication in the array argument as shown in the following code
var myAnotherModule = angular.module('myAnotherApplication', ["myApplication"]);
We can pass any number of modules in the array, and the created module will have access to all services, controllers available in the injected modules. Once we defined the module, we get handle of the module as below
var myModule = angular.module('myApplication');
Observe that there is no second argument here which means we are getting the reference of a predefined angular module. If you include the second argument, which is an array, then it means you are defining the new module.
Now you have defined the module, you are all set to create all the components inside of this module. After you have done everything, how we are going to use this in our pages. If you want any of your page to use the angular module, we need to put the ng-app="myApplication" in that view. Let's see how we can achieve this.
To reference our module, change that ng-app attribute on the body to look like this:
<body ng-app="myApplication"> ... </body>
It's not necessary that the attribute need to be defined in the body tag, you can define in the html tag also as below
<html ng-app="myApplication">....</html>
Happy Programming.
No comments:
Post a Comment