Definition – The module contains controllers.
Syntax –
var app = angular.module(“”, [dependencies]);
Example snippet- var app = angular.module(“NewWeb”, [dependencies]);
Basic structure of angular module-
angular.module(“myApp”, [dependencies])
├── .controller(“myCtrl”, function($scope) {})
├── .directive(“myDirective”, function() {})
├── .factory(“myFactory”, function() {})
├── .service(“myService”, function() {})
├── .filter(“myFilter”, function() {})
├── .constant(“myConstant”, value)
├── .value(“myValue”, value)
└── .config(function() {})
Now look on below code example,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Module Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h1>{{message}}</h1>
<p>{{myFactory.getMessage()}}</p>
<p>{{myService.getMessage()}}</p>
<p>{{"myValue: " + myValue}}</p>
<p>{{"myConstant: " + myConstant}}</p>
<p>{{"2 + 2 = " + (2 | myFilter)}}</p>
<my-directive></my-directive>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, myFactory, myService, myValue, myConstant) {
$scope.message = "Welcome to my AngularJS Module Example!";
$scope.myValue = myValue;
$scope.myConstant = myConstant;
});
app.directive("myDirective", function() {
return {
template: "<p>This is myDirective!</p>"
};
});
app.factory("myFactory", function() {
return {
getMessage: function() {
return "This is myFactory!";
}
};
});
app.service("myService", function() {
this.getMessage = function() {
return "This is myService!";
};
});
app.filter("myFilter", function() {
return function(input) {
return input + 2;
};
});
app.constant("myConstant", "I am a constant!");
app.value("myValue", "I am a value!");
app.config(function() {
// Configuration code here
});
</script>
</body>
</html>
Note – We didn’t use any dependency while creating module.
angular.module(“myApp”, []);
Now look on below example where we will use 1 dependency – ngRoute
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/oye", {
template: "<h1>Welcome to my AngularJS app!</h1>"
})
.otherwise({
template: "<h1>Page not found</h1>"
});
});
</script>
</body>
</html>
Core Java in 25 hours 