AngularJS - SPLessons

AngularJS Modules

Chapter 10

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Modules

AngularJS Modules

shape Description

AngularJS supports module-based approach which is explained clearly in the present chapter “AngularJS Modules”. Generally, to separate logic such as services, applications, and controllers, modules are used to keep the code clean.

AngularJS Modules will be defined in separate js files and one should save them as per the module.js file. AngularJS Modules are used to initialize AngularJS application. In AngularJS, an application logic can be categorized into modules and helps them to work together using dependency relation.

Advantages of AngularJS Modules

  • Makes the code to wrap up and make them reusable modules.
  • The process of declaration is easy to understand.
  • Modules can be loaded in random manner.
  • Modules can be tested easily and holds components.
  • Helps in organizing the application.

shape Program
Description

In the above figure,

  • ng-app directive is used to define or initialize the AngularJS application
  • <div> tag is the owner of the AngularJS application

shape Conceptual
figure

In the above figure,

  • Module 1 and Module 2 are the containers of AngularJS application.
  • Controller belongs to AngularJS Module.

Angular Module

shape Description

angular.module function is called to define a Module, where angular is a global namespace and is constantly accessible. angular.module function syntax is provided below having two parameters: the module name and [] is an array of dependencies on other modules.

Syntax:

angular.module(“Module_name”, []);

The angular.module returns instance of a module and a controller can be defined directly on that instance via the controller function.

shape Conceptual
figure

shape Syntax

var myModule = angular.module(‘moduleName’);

In the presence of dependency modules, the following syntax is used.

var myModule = angular.module(‘modulename’,[‘dependency1’, ‘dependency2’]);

Once a new module is defined, controllers can be created in that module as follows:

module.controller(‘ControllerName’,[‘dependency1′,’dependency2’, function(dependency1, dependency2){
………..
}]);

Here, SPController is created and $scope & $http are provided as dependencies.

shape Alternative
forms

Same controller can be created as follows:


myApp.controller('SPController',function($scope,$http){
   ..........
});

shape More Info

AngularJS infuses dependencies by name, i.e. when $http is characterized as a dependency, then AngularJS searches for an enrolled service with name $http. The dominant part of the real-time applications use JavaScript code minification tools to diminish the size. These tools can rename variables to short variable names.


myApp.controller('SPController',function($scope,$http){
    ..........
});

The preceding code can be minified into:


myApp.controller('SPController',function($s,$h){
 ...........
});

Modules and Controllers in Files

shape Description

In JavaScript files, it is very common to have modules and controllers in AngularJS applications. In the below  example, App.js has a definition of application module, while Controller.js has a controller.

shape Example

<!DOCTYPE html>
<html>

  <head>
    <title>AngularJS Module</title>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
  </head>

  <body>
    <h1>AngularJS Module</h1>
    <div ng-app="spApp" ng-controller="SPController">
    {{ firstName + " " + lastName }}
  </div>
  </body>

</html>

App.js

var myApp = angular.module("spApp", []);

Controller.js


myApp.controller("SPController", function($scope) {
    $scope.firstName = "James";
    $scope.lastName  = "Bond";
});


Output:

Summary

shape Key Points

  • AngularJS Modules are containers of different parts of an AngularJS application.
  • angular.module is called to define a module that consists of module name and dependencies.
  • Having Modules and controllers in JavaScript files(.js) is very common in AngularJS applications.

shape Programming
Tips

Mostly in HTML, script tags are placed at the end of the element. But, when working with AngularJS, it is better to load AngularJS library either in the < head> or at the start of the < body> as angular.module calls must be compiled after the library has been loaded.