Contact Sing up Log in
IMG-LOGO
Latest News : Samsung Galaxy Z Fold3 Quantum computing big take... iPhone 13 series is expected to launch in September Facebook removes malicious accounts, groups and pages Windows 11 Introducing
Home Tutorial AngularJS Modules

AngularJS Modules

by MH RISHAD - 30 Nov 2019
IMG

Module of AngularJS is defining an application.

The module and it’s container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.

Create Module:

Module is created by using the AngularJS function “angular.module”

 

<div ng-app="FirstApp">...</div>
<script>
var app = angular.module("FirstApp", []);
</script>

 

"FirstApp" parameter refers to an HTML element in which the application will run.

Can add controllers, directives, filters, and more, into AngularJS application.

Controller Add

Add a controller to your application, and refer to the controller with the ng-controller directive:

 

Example:

<div ng-app=" FirstApp " ng-controller="Controller">
{{ FirstName + " " + LastName }}
</div>
<script>
var NewApp = angular.module("FirstApp", []);
NewApp.controller("Controller", function($scope) {
$scope.FirstName = "Smith";
  $scope.LastName = "Dawe";
});
</script>

 

We talk about more about Controller next Session

Add Directive

AngularJS has a set of built-in directives which can use to add functionality to your application.

In addition, you can easily to use the module to add your own directives to your applications:

 

Example:

<div ng-app="FirstApp" w3-test-directive></div>
<script>
var Newapp = angular.module("FirstApp ", []);
Newapp.directive("ngsit", function() {
  return {
    template : "It is directive constructor!"
  };
});
</script>

 

Modules and Controllers in Files

It is common in AngularJS applications to put the module and the controllers in JavaScript files.

In this example, "NewApp.js" contains an application module definition, while "Control.js" contains the controller:

 

Example :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app=" NewApp" ng-controller="Control">
{{ FirstName + " " + LastName }}
</div>
<script src="NewApp.js"></script>
<script src="Control.js"></script>
</body>
</html>
 

myApp.js

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

The [] parameter in the module definition can be used to define dependent modules.

Without the [] parameter, you are not creating a new module, but retrieving an existing one.

 

myCtrl.js
app.controller("Control", function($scope) {
  $scope.FirstName = "Smith";
  $scope.LastName= "Dawe";
});

 

Functions can Pollute the Global Namespace

Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.

AngularJS modules reduces this problem, by keeping all functions local to the module.

When to Load the Library

While it is common in HTML applications to place scripts at the end of the <body> element, it is recommended that you load the AngularJS library either in the <head> or at the start of the <body>.

This is because calls to angular.module can only be compiled after the library has been loaded.

 

Example :

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="NewApp" ng-controller="Control">
{{ FirstName + " " + LastName }}
</div>
<script>
var Newapp = angular.module("NewApp", []);
Newapp.controller("Control", function($scope) {
  $scope.FirstName = "Smith";
  $scope.LastName = "Dawe";
});
</script>
</body>
</html>
Share:
Share

0 Comments

Leave a Comment

Required fields are marked *

Stay Connected

Most Popular

Featured Video

Subscribe

Get all latest content delivered to your email free.