Angularjs Module

AngularJS supports the modular method. These modules are used to separate logic –  say controller, services application etc. and keep the code clean. We can also define modules in alone js files and name them as per the module.js file. Here are given two examples we are going to create two modules.

  1. Application Module: This module is used to initialize an application with a controller.
  2. Controller Module: This module is used to define the controller

Angularjs Module containers

Application Module

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

Controller Module

Here we have defined an application mainApp module using Angular.module function. So we have passed an empty array to it. This array basically contains dependent modules.

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Meraj",
      lastName: "Ansari",
      fees:500,
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

How to create a controller in a Module

Here we have defined a controller studentController module using mainApp.controller function.

Creating a controller in a Module is very simple and we use the some steps to achieve that task.

var myFirstModule = angular.module("myFirstModule ", []);
myFirstModule.controller("MyController", function);

You can also create several methods such as services, factories and providers using the Angular module API (Application Programming Interface). Here are given some method such as:Here we have created a module is known as myFisrtModule and created a controller named MyController in it.

Method Syntax
module.factory module.factory( ‘factoryName’,function );
module.service module.service ( ‘serviceName’,function );
module.provider module.provider( ‘providerName’,function );

 

Angularjs Module Loading and Dependencies

Module is a collection of configuration and run blocks which get applied to the application time of the bootstrap process. It is simplest form the module consists of a collection of two types of blocks:

Angularjs Module

  • Run Blocks: The run blocks get executed after the injector is declared and are used to kickstart the application. Run blocks work only instances and constants can be injected into the run blocks. This is restrain further system configuration during the application run time.
  • Configuration blocks: The configuration blocks get executed during the provider registrations and configuration phase. This is providing to accidental instantiation of services before they have been completely configured.
angular.module('myModule', []).
config(function(injectables) { // provider-injector
  // This is an example of config block.
  // You can have as several of these as you want.
  // You can only inject Providers
  // into config blocks.
}).
run(function(injectables) { // instance-injector
  // Example of a run block.
  // You can have as several of these as you want.
  // You can only inject instances
  // into run blocks
});

AngularJS Application Files

The AngularJS application files very helpful when you deal with large apps. Every Angular application, we generally use two kinds of files, one is module and other is the controllers.

Step 1: First of all we create a module in the app.js file.

var app = angular.module("demoApp", []);

Step 2: In this step is to declare the controllers in the controller.js file.

controller.js
app.controller("blogController", function($scope) {
        $scope.firstName = "Meraj",
        $scope.lastName = "Ansari",
        $scope.blogName = "J2EEbrian"
});

Step 3: The third step is to include these two files in our application.

<!DOCTYPE html>
<html ng-app="demoApp">
 
<head>
<title> AngularJS - Module</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="blogController">
 
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <br>
    Blog Name : {{blogName }}
 
</div>
<script src="app.js"></script>
<script src="controller.js"></script>
</body>
</html>

You will see the accurate output in your browser.

First Name: Meraj

Last Name: Ansari

Full Nam: Meraj Ansari

Blog Name: J2EEbrain

Hope you were able to get a good view on Angularjs Module concept.