AngularJs Tutorials
![say]()
Important News
What is Module in AngularJs?
Modules are used to separate logics say services, controllers, application etc. Every application in Angular is created using modules. A module can have dependencies of other modules, or be a single module all by itself.
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.
A module is created by using the AngularJS function angular.module
Controllers always belong to a module.
To create a module, we hit the global angular Object, the framework's namespace, and use the module method.
How to Creating a Module?
A module is created by using the AngularJS function angular.module
<div ng-app="appname">...</div>
<script>
var app = angular.module("appname", []);
</script>
The "appname" parameter refers to an HTML element in which the application will run.
Adding a Controller
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="appname" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("appname", []);
app.controller("myCtrl", function($obj) {
$obj.firstName = "mahtab";
$obj.lastName = "habib";
});
</script>
</body>
</html>
Output :-
Here "appname" parameter refers to an HTML element in which the application will run. Add a controller to your application, and refer to the controller with the ng-controller directive:
Here we've declared an application appname module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules.
AngularJS will invoke the controller with a $obj object.
understanding $obj :-
We use $obj inside Controllers, where we bind data from the Controller to the View.
obj is a special javascript object which plays the role of joining controller with the views. obj contains the model data. In controllers, model data is accessed via $obj object.
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 "myCtrl.js" contains the controller:
File name : index.php
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
File name : myApp.js
var app = angular.module("myApp", []);
File name : myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "mahtab";
$scope.lastName= "Alam";
});
NOTE :-
Adding a Directive
AngularJS has a set of built-in directives which you can use to add functionality to your application.
you can use the module to add your own directives to your applications
File name : index.php
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="appName" w3-test-directive></div>
<script>
var app = angular.module("appName", []);
app.directive("w3TestDirective", function() {
return {
template : "Hello Angular"
};
});
</script>
</body>
</html>
Output :-
Module
A module is a container for different parts of your application.
Define module
angular.modules() method to create module.
var myApp = angular.modules('myModule',[]);
The first parameter specifies the name of the module which associates with ng-app value and
Another parameter specify the dependencies. If there is no dependencies you can set empty square brackets [] .
File name : index.php
<html lang="en" >
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myApp">
<script>
var application = angular.module('myLanguageApp',[]);
</script>
</body>
</html>
File name : index.php