AngularJS Modules

AngularJS Modules

AngularJS Module is an interface used for creating new angular application as well as fetching other modules including services, controllers, directives, filters and 3rd party angular modules. It is container for creating, registering and retrieving other Angular modules. It is very useful practice for developing large industry based applications to put business logic in distributed manner.

Creating and using Angular module.

  1. create main application module file app.js
    'use strict';
    
    // creating new module
    angular.module('myApp', []);
  2. create index.html for using the angular module.
    <!DOCTYPE html>
    <!-- initialize the module -->
    <html ng-app="myApp">
    <head>
      <!-- AngularJS CDN -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
      <!-- application module file -->
      <script src="app.js"></script>
    </head>
    <body>
    </body>
    </html>

Adding Module references

We always need the 3rd party specialized or our re-usable modules for fast paced application development. It seems little complicated but in daily life of coding it is very easy.

  1. create module main.js
    'use strict';
    
    // creating new module
    angular.module('myApp', []);
  2. create module app.js
    'use strict';
    // declaring module
    angular.module('Main', []);
    
    // creating new module with adding Main and angular route module
    //       application name   other libraries
    //                |             |
    //                ˅             ˅
    angular.module('myApp', ['ngRoute', 'Main']);
  3. create index.html
    <!DOCTYPE html>
    <!-- initialize the module -->
    <html ng-app="myApp">
    <head>
      <!-- AngularJS CDN -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
      <!-- AngularJS Route CDN -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
      <!-- application module file -->
      <script src="app.js"></script>
      <!-- main module -->
      <script src="main.js"></script>
    </head>
    <body>
    </body>
    </html>

AngularJS typical Project structure example

It is only for general idea, no need to remember.

  app					# root folder
  ├── css				# css files
  │   ├── bootstrip.min.css		# bootstrap for mobile friendly responsive layouts
  │   ├── forms.css			# form controls css
  │   ├── forms.min.css			# minified css
  │   ├── style.css			# main style css
  │   └── style.min.css			# minified css
  ├── img				# images
  ├── js				# javascripts files
  │   ├── angular.min.js		# angularJS
  │   ├── app.js			# main javasctipt module
  │   └── app.min.js			# minified for distribution
  ├── modules				# main domain logic files
  │   ├── authentication
  │   │   ├── views			# html files 			- view
  │   │   │   └── login.html
  │   │   ├── controllers.js		# src file 			- controller
  │   │   └── controllers.min.js	# minified for distribution
  │   │   ├── services.js
  │   │   └── services.min.js
  │   ├── main
  │   │   ├── views			# html files 			- view
  │   │   │   ├── categories.html
  │   │   │   ├── customers.html
  │   │   │   └── products.html
  │   │   ├── controllers.js		# src file 			- controller
  │   │   └── controllers.min.js	# minified for distribution
  │   └── reports
  │       ├── views			# html files 			- view
  │       │   ├── invoice.html
  │       │   └── outstandings.html
  │       ├── controllers.js		# src file 			- controller
  │       └── controllers.min.js	# minified for distribution
  ├── index.html			# main html page
  ├── LICENSE.txt			# license information
  └── README.txt			# instruction