The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Friday, 15 July 2016

AngularJS - Modules

with 0 Comment

What is AngularJS module?


AngularJS support module approach. An angularjs module defines an application. From the word module, you can get the meaning right means angularjs module is used to separate different part of an application or the module is a container which contains different parts of an application like Services, filters, directives, controllers, application and so on. The module is defined in a separate file we will discuss this angularjs module with some example.

AngularJS Modules
AngularJS Modules
                                
You can think of an angularjs module as a main() method in other types of applications. Modules declaratively specified how the angular application should be bootstrapped. There are a lot of benefits of using module approach we will discuss few in this tutorial.

How to create a module?


Creating a module in angularjs is a pretty straight forward. Use the angularjs object’s module() method to create a module.

“var  exampleApp = angular.module (“exampleModule”,[]);”

Note one thing The module  object which is provided by angular contains 2 parameters those are

  • First, parameter specifies the name of the module (exampleModule).
  • The second parameter specifies the dependencies for the module.


An angularjs module can depend on other angularjs modules. But now in the above angular module that does not depend on any module we pass an empty array for the second parameter. This is how we can create a simple angularjs module.

What is a controller in angularjs?


In angulajs, a controller is a javaScript function. The controller is used to build a module for the view to display.

Angularjs Controller
Angularjs Controller working
          

How to create a controller in angularjs?


To create an angularjs controller is very simple just create a javaScript constructor function like below.

“Var exampleController = function($scope){
$scope.message = “angularjs module & controller tutorial”;
};

Note that in the above create example for controller there is an anonymous function and we are assigning that to a variable called “exampleController” this is an example of an angular controller function.

In that function, we are passing one parameter called “$scope “ do you know about this parameter $scope? $scope is an angular object that is passed to this angular controller function by the angular framework automatically. We attach the module for this $scope object then only this object available in the view. So within the view, we can use the data binding expression to retrieve the data from the scope object and display.

From the above example, we are attaching a message variable to the $scope object and storing the message string (angularjs module & controller tutorial) in the property. So the message property will be available in the view. Let’s have one example for this try that with let’s try button.

var  exampleApp = angular.module (“exampleModule”,[]);
Var exampleController = function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};);


In the above example, we create an anonymous function and assigning it to a variable then we are passing that variable to the controller instead of that we can do the things like below.


var  exampleApp = angular.module (“exampleModule”,[]);
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};            
 );


From the above, we can able to do two steps in a single line that is creating an angularjs controller function and register that to a module.

Now we need to associate this module with mg-module directive and controller with the ng-controller directive in the HTML page like below example.

Angularjs Module- Controller Example: 


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app= “exampleModule“ ng-controller=” exampleController”>
{{ message }}
</div>
<div>
{{ message }}
</div>
 
</body>
<script>
var  exampleApp = angular.module (“exampleModule”,[]);
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};            
 );
</script>
</html>


So from the above example, angularjs module and controller are combining to display the message property value. In the second div that will not display anything because that is not having any controller which is associated with that property.

Use the let's try option and comment and ask your doubts in the comment box bellow. 

0 comments:

Post a Comment