AngularJS Modules
⇢ An AngularJS module defines an application.
⇢ The module is a container for the different parts of an application.
⇢ The module is a container for the application controllers.
⇢ Controllers always belong to a module.
Creating a Module
⇢ A module is created by using the AngularJS function angular.module
Example:
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
⇢ The "myApp" parameter refers to an HTML element in which the application will run.
⇢ Now you can add controllers, directives, filters, and more, to your AngularJS application.
Adding a Controller
⇢ Add a controller to your application, and refer to the controller with the ng-controller directive:
Example:
<div ng-app="myApp" ng-controller="MyController">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.firstName = "Dhaval";
$scope.lastName = "Purohit";
});
</script>
Adding a Directive
⇢ AngularJS has a set of built-in directives which you can use to add functionality to your application.
⇢ For a full reference, visit our AngularJS directive reference.
⇢ In addition you can use the module to add your own directives to your applications:
Example:
<div ng-app="myApp" testdirective></div>
<script>
var app = angular.module("myApp", []);
app.directive("testdirective", function() {
return {
template : "I was made in a 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, "myApp.js" contains an application module definition, while "myCtroller.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="myApp" ng-controller="MyController">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="MyController. js"></script>
</body>
</html>
myApp.js
⇨ var app = angular.module("myApp", []);
MyController
⇨ app.controller("MyController", function($scope) {
$scope.firstName = "Dhaval";
$scope.lastName= "Purohit";
});
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="myApp" ng-controller="MyController">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.firstName = "Purohit";
$scope.lastName = "Dhaval";
});
</script>
</body>
</html>
Note :
⇨ 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.
0 Comments