Of Stack

Detailed Explanation and Simple Example of AngularJS Module

  • 2021-07-06 09:48:21
  • OfStack

AngularJS module

The module defines an application.

A module is a container for different parts of an application.

Modules are containers for application controllers.

The controller usually belongs to one module.

Create Module

You can create modules through the angular. module function of AngularJS: 


<div ng-app="myApp">...</div>

<script>

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

</script>

The "myApp" parameter corresponds to the HTML element that executes the application.

Now you can add controllers, instructions, filters, etc. to AngularJS applications.

Add Controller

You can use the ng-controller directives to add controllers for applications:

AngularJS instance 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
});
</script>

</body>
</html>

Running effect:

John Doe

You can learn more about controllers in the AngularJS Controller section.

Add instruction

AngularJS provides many built-in commands that you can use to add functionality to your application.

Complete instructions can be found in the AngularJS reference manual.

In addition, you can use modules to add your own instructions for your application:

AngularJS Example 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" runoob-directive></div>

<script>

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

app.directive("runoobDirective", function() {
 return {
  template : " I created in the instruction constructor !"
 };
});
</script>

</body>
</html>

Run results:

I created it in the instruction constructor!

You can learn more about instructions in the AngularJS instructions section.

Modules and controllers are included in the JS file

Typically an AngularJS application includes modules and controllers in an JavaScript file.

In the following example, "myApp. js" contains the application module definition program, and the "myCtrl. js" file contains the controller:

AngularJS Example 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Run results:

John Doe

myApp.js

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

Note in the module definition, the [] parameter is used to define the dependencies of the module.

The brackets [] indicate that the module has no dependencies, and if there are dependencies, the name of the dependent module is written in the brackets.

myCtrl.js 


app.controller("myCtrl", function($scope) {
 $scope.firstName	= "John";
 $scope.lastName= "Doe";
});

Function affects the global namespace

Global functions should be avoided in JavaScript. Because they are easily overwritten by other script files.

The AngularJS module avoids this problem by having all functions scoped under it.

When will it be put into storage?

Note: In our example, all AngularJS libraries are loaded in the header of the HTML document.

For HTML applications, it is generally recommended that all scripts be placed in the < body > The bottom of the element.

This will speed up web page loading, because HTML loading is not subject to script loading.

In our multiple AngularJS instances, you will see that the AngularJS library is in the document < head > The region is loaded.

In our example, AngularJS is in the < head > Element, because calls to angular. module can only be made after the library is loaded.

Another solution is to use the < body > Element, but it must be placed before your AngularJS script:

AngularJS Example 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";
});
</script>

</body>
</html>

Run results:

John Doe

The above is the AngularJS module data collation, follow-up to continue to supplement, hoping to help programming friends.

Related articles: