Thursday, 22 January 2015

AngularJS Module Lesson 4

Introduction

AngularJS modules are primarily used to order code execution according to dependencies.

AngularJS applications are structured in modules, modules are like namespaces but are not exactly the namespace. we can inject one or many module into some other module multiple modules we can inject to our angular app as an array at the time of bootstrapping. Each module can do it's own work and structured together in a single page application through bootstrapping process.


Difference between Namespace & AngularJs Module

Namespace is a container, inside each namespace we can put classes,structure,enumeration.
AngularJs modules are linking entities, they are just logical containers whose elements are loosely coupled due to this structure they can be injected and used in some other module as well.

See below to understand more.

This linking structure of module reduces coupling and with the help of injection we can use it on some other modules as well.

 A module can depend on:
  a) Another module
and also contains multiple
  a) Directives
  b) Services
  c) Filters
  d) Controllers

Dissecting  Module

To write any module we can use  
angular.module("moduleName",[])

Attach service,controller,filter,directives to module using chaining

Similarly we can link filters and directives to the modules.

Dependency injection in modules.
If you do not have any dependency on some other module still you have to write empty brackets [] while creating modules.
Note:
Syntax for creating module : angular.module("nameOfModule",[]);
Syntax for fetching modules: angular.module("nameOfModule"); fetch already created module.

Your First Module

To bootstrap AngularJS application we need to create a module and assign it to data-ng-app directive, if we only write data-ng-app (i:e not assign anything to it) then angular will bootstrap appllication with it's default modules only.

So if you want that your module also initialize at the time of angular bootstrapping just write
<html data-ng-app="myBootstrappingModule"> </html>

Once you have bootstrap angular with your module,then you can access the constructs which you have linked with that module.



Injecting Dependent Module

If you want some model, service,directive,filter of different module in your application, then you need to inject that module as dependency to your main bootstrapping module, as shown below.



Conclusion
1) Angular modules are logical collection of angular constructs.
2) Modules are not containers like Namespaces, they just create logical links to attach different                constructs.
3) Modules can be injected inside other modules, through injecting array.
4) It is always necessary to give empty array while creating independent module i:e if we are not injecting anything.
5) angular.module("mymodule") is a syntax to fetch module.

No comments:

Post a Comment