Angular Modules
AngularJS Modules
An AngularJS module defines an application.
The module is a container for the dissimilar parts of an application.
The module is a container for the application controllers.
Controllers e'er belong to a module.
Creating a Module
Influenza A virus subtype H5N1 module is created past times using the AngularJS business officeangular.module <div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script> Now yous tin add together controllers, directives, filters, together with more, to your AngularJS application.
Adding a Controller
Add a controller to your application, together with advert to the controller alongside theng-controller directive:Example
<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> Adding a Directive
AngularJS has a gear upwardly of built-in directives which yous tin utilization to add together functionality to your application.For a amount reference, view our AngularJS directive reference.
In improver yous tin utilization the module to add together your ain directives to your applications:
Example
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made inward a directive constructor!"
};
});</script> Modules together with Controllers inward Files
It is mutual inward AngularJS applications to grade the module together with the controllers inward JavaScript files.In this example, "myApp.js" contains an application module definition, acre "myCtrl.js" contains the controller:
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html> myApp.js
var app = angular.module("myApp", []); The [] parameter inward the module Definition tin live used to define subject modules.
Without the [] parameter, yous are non creating a novel module, exactly retrieving an existing one.
Without the [] parameter, yous are non creating a novel module, exactly retrieving an existing one.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
}); Functions tin Pollute the Global Namespace
Global functions should live avoided inward JavaScript. They tin easily live overwritten or destroyed past times other scripts.AngularJS modules reduces this problem, past times keeping all functions local to the module.
When to Load the Library
While it is mutual inward HTML applications to house scripts at the terminate of the<body> element, it is recommended that yous charge the AngularJS library either inward the <head> or at the start of the <body>.This is because calls to
angular.module tin exclusively live compiled after the library has been loaded.Example
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<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> 
Comments
Post a Comment