Quick Contact


    AngularJS Modules

    An Angular module is a container that we use to create an application. By containing AngularJS specific functions in a module, angular JS stops polluting the global scope. AngularJS modules define functionalities or add controllers, filters, directives, etc., to the angular application. Also, make it easy to reuse in different applications.

    How to create modules in AngularJS

    Before start to creating AngularJS modules, let’s see if there is no module in our application.

    Create a file Firstcontroller.js with the code

    Function Firstcontroller($scope) {

    $scope.a=10;

    $scope.b=5;

    $scope.c=$scope.a – $scope.b;

    });

    In the above code, create the function “Firstcontroller” in our application. A simple subtraction operation is performed in the above controller, and the result is assigned to a new variable c.

    Why is AngularJS used?

    After that create a simple HTML page “demo.html” with the following code

    < body ng-app="">

    < div ng-controller="Firstcontroller">

    < h3> Result is:< /h3>

    {{c}}

    In this code, we included the controller we created above, that is “Firstcontroller”, and calling the value of $scope c through expression to get it displayed to a user.

    But, here, the value of our ng-app is blank. It is like ng-app= “ ”.

    Here, it means all the controllers invokes within the context of ng-app directives will access globally. There is no boundary to separate many controllers from each other. Now in case of modern-day programming, it prefers to attach controller with the module so that a logical boundary can be defined for a controller.

    Now do the same code with module.

    varsampleApp = angular.module(‘demo’,[]);

    sampleApp.controller(‘Firstcontroller’, function($scope) {

    $scope.a=10;

    $scope.b=5;

    $scope.c=$scope.a – $scope.b;

    });

    Code explanation:

    varsampleApp = angular.module(‘demo’,[]);

    Here, an angular module “demo” is created to perform the logical boundary for the functionality contains in this module.

    sampleapp.controller(‘Firstcontroller’, function($scope)

    By this line, we are attaching the controller with a module. If we want to access the functionality present in this module, we have to reference this module on our main HTML page.

    Main HTML page code

    < body ng-app="'Demo'">

    < div ng-controller="Firstcontroller">

    < h3> Result is:< /h3>

    {{c}}

    Instead of blank, we provide a reference in the ng-app directive. By invoking its application module, we can define functionalities in it.

    Therefore, we found:

    • This module used for packaging the code in reusable modules.
    • There is no order for loading modules.
    • It is an easily testable component.
    • It is an easily maintainable component.
    • Using a module, you can easily organize an application.
    Types of AngularJS Modules

    There are two types of AngularJS modules:

    • Application Modules
    • Controller Modules
    (a) Application Modules in AngularJS

    Using the function “angular.module” we can create an application module in angular. To create Angular Modules, application modules consider as global space, retrieving angular Js modules and registering angular modules. All the modules use for an application have to register using this mechanism whether it is angular core or any third party module.

    < div ng-app="demo">

    < /div>

    < script>

    var app = angular.module(“demo”,[ ]);

    < /script>

    Here in the above code “demo” parameter is used to refer to an HTML element in which the application will run. Angular.module() creates an application module in which two parameters passes.

    The first parameter is the module name that should be the same as specified by an ng-app directive.

    The second parameter is an array of some other dependent modules. Since there is no dependency, therefore, we are passing an empty array. A module definition without its second parameter (module without []) implies using an existing module rather than creating a new module. We are retrieving from the current module only.

    The Syntax for creating service in a module

    module.service( ‘Name of service’, function );

    A Syntax for creating a factory in a module.

    module.factory( ‘Name of Factory’, function );

    The Syntax for creating a provider in a module.

    module.provider( ‘providerName’, function );

    Note:

    ANGULAR LIBRARY should be loaded either in the head or at the start of a body because the module gets compiled only when a library is loaded.

    (b) Controller Modules in AngularJS

    The AngularJS modules use to define a controller in an application. In the controller module, you have to add a controller in our application, and that controller refers to the ng-controller directive.

    Example
    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="App" ng-controller="myCtrl">
    	{{ fName + " " + lName }}
    	< /div>
    	< script>
    	var a = angular.module("App", []);
    	a.controller("myCtrl", function($scope) {
    	$scope.fName = "Ducat";
    	$scope.lName = "India";
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output

    Enroll Yourself in Live Classes For Online Summer Training.

    Ducat India

    AngularJS Modules with Directive

    There are various built-in directives present in angular; one can use them to add functionality. AngularJS modules use to make the code clean. Different business logic such as filters, controllers, directives etc. separated by creating the module in our application.

    We can also use AngularJS Modules to add directives to our application.

    	< !DOCTYPE html>
    	< html>
    	< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">< /script>
    	< body>
    	< div ng-app="demoApp" w3-test-directive>< /div>
    	< script>
    	var a = angular.module("demoApp", []);
    	a.directive("w3TestDirective", function() {
    	return {
    	template : "module with directive example"
    	};
    	});
    	< /script>
    	< /body>
    	< /html>
    	
    Output:

    module with directive example

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.