Modules in AngularJS
In angularJs, a module is a component that contains all the other components in angularJS, like controllers, services, filters, directives … or anything that can be referenced through the module. In angularJS we do all the functionality in modules, and An HTML page has only one module, and this module one can use to initialize and start an application.
Consider the example below
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Module</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> </body> <script> var app = angular.module('myApp', []); console.log(app); </script> </html>Results when logging to the browser console
Analyze the above code:
- Line 10: in the body, there is an html attribute named ng-app , the value inside is "myApp". This is called a directive, telling angularJS this is the module of the application, when initializing the module under the script layer, we will pass this name "myApp" to initialize
- Line number 14: var app = angular.module('myApp', []); Here, we declare the variable app and assign the value equal to the return value from the angular object's .module() method, this method passes 2 parameters, the first parameter is the string 'myApp' exactly matches the ng-app directive value in the html tag structure, the 2nd parameter in this example is an empty array [], in the next articles, we will talk about passing values into this array and conceptualize it as dependency . In this context, we are not passing any dependencies so this array is declared empty
- Line 15: log the app variable to the browser and we see that this app variable is an object, containing a lot of methods such as controller, component, filter, service … these concepts we will continue Approach in the next posts
At least, up to the present post, we understand that the main module is the largest object of angularJS and this object is the container for other child components in an angularJS application.
