Modules and Controllers in AngularJS

In the previous tutorial, we have learned about How created First application in Angular. In this tutorial, we will talk about Modules and Controllers in Angular.

A module is a container which defines the functionality of the application which is represented by the ng-app directive. It helps us to define services, directives, filters, etc.

And The role of controllers in Angular is to expose data to our view via $scope, and controllers contain logic to enhance view behavior.
Modules and Controllers in AngularJS


Contents

  1. Modules
  2. Controller
  3. Using controller with ng-click

 


 

1. Modules

A module is a container for different parts of your application. Or

You may think modules as a main() function in C programming, which bind together different parts of the application as same as Modules specific how Angular application should Bootstrap.

Create a Module

To create module use angular.modules() method to create.

var myApp = angular.modules('myModule',[]);

The first parameter specifies the name of the module which associates with ng-app as value and another parameter specify the dependencies. If there is no dependencies you can set empty square brackets [] .A module can depend on another module.


 

2. Controller

Controllers is a JavaScript constructor functions which are bound to a particular scope.

For defining controller in the Angular, we use angular.controller method which allows us to bind controller to the module. It takes controller name and a function.

Here, is an example of controller function which takes $scope object and we are assigning this function to a variable. We use this variable in controller function in the second parameter.

var myController = function($scope){
  $scope.language = "AngularJS";
}

$scope is an Angular object that is passed to Controller function automatically by Angular Framework. We attach the model to the $scope object then it available in the view.So, we can access model data via $scope object. language property is available in the View.

Example

Create a new Script file (.js) name it script.js

var application = angular.module('myLanguageApp',[]);
var myController = function($scope){
 $scope.language = "AngularJS";
};
application.controller("lang",myController);

Here, we create a module using angular.module. Our module name is a myLanguageApp and the second parameter is for dependencies but in our program, there are no dependencies so we set empty square brackets [].

In Next step, we created a controller lang, For creating it we first create a variable myController and defined an anonymous function and pass $scope object to it. In $scope object, we attach a property language and initialize it with "AngularJS" text.

Now the next step to register this controller with our module for this we use controller method. In controller method, the first parameter is the name of a controller ('lang' , NOTE – you can name it anything ,we use this name in ng-controller directive) and the second parameter is controller function (myController) which we created in the second step.

In controller method second parameter you can also define an inline function instead of passing variable name which holds the function. Because of that, we don’t need to create separate variable

application.controller("lang",function($scope){
 $scope.language = "AngularJS";
});

We have successfully created module and controller now we need to associate the module with ng-app directive and controller with the ng-controller directive.

Create a new HTML file (.html) name it index.html

First, define AngularJS library (which you can download it from it Offical website) within your page same as we include a jQuery library or any other JavaScript file.

<script type="text/javascript" src="angular.min.js"></script>

Or you can directly include from CDN <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<body ng-app="myLanguageApp">
 <div ng-controller="lang">
  {{ language }}
 </div>
</body>

Now, we specify the name of our module (myLanguageApp) in the ng-app directive as a value. We have been registered the controller with this module and we attach language property to the $scope object which we initialize with “AngularJS” string.

So, what we want to do is

We want to display language property value within the <div> element. For this, we define ng-controller directive to <div> element with our controller name (lang). Now we are able to use language property within the binding expression {{ }}.

When we run above program it gives the following output.

Full Code within the same page

<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Controller example</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myLanguageApp">
  <div ng-controller="lang">
  {{ language }}
  </div>
 
  <script>
  var application = angular.module('myLanguageApp',[]);
 
  var myController = function($scope){
  $scope.language = "AngularJS";
  };
  application.controller("lang",myController);
  </script>
</body>
</html>

 

3. Using controller with ng-click

The ng-click directive represents click event in Angular.

We are going to use a controller with ng-click. What we want to do is whenever we click on a Button control we want to update the View according to the Button.

We first create our controller from where we control this thing.

var application = angular.module('myLanguageApp',[]);
  application.controller('languages',function($scope){
  $scope.myFavLanguage = "None";
  $scope.lang = function(value){
  $scope.myFavLanguage = value;
  }
});

Here, we first created our module (myLanguageApp) and there are no dependencies so we set empty square bracket []. Now we create and register our controller. In controller method, we first define our controller name (languages) and in the second parameter contain controller function.

Function contain $scope object which represents Model. In $scope object, we attach myFavLanguage property and initialize it with "None". And also attach another property lang which we initialize with a function. Function have a value variable from this we change the myFavLanguage property value.

We use this lang property in ng-click and myFavLanguage in the binding expression.

Implement ng-controller and ng-click

<div ng-controller="languages">
  Select your Favourite Language :
  <button ng-click="lang('php programming')">PHP</button>
  <button ng-click="lang('javascript')">Javascript</button>
  <button ng-click="lang('python')">Python</button>
  <button ng-click="lang('ruby')">Ruby</button>
  <p>You have selected : {{ myFavLanguage }}</p>
</div>

We defined controller in <div> element and created 4 buttons and define ng-click directive and pass lang property with a different-different value in all of them.

Whenever we clicked on any of the Button it will update our view section based on click.

When we run above program it gives the following output.

Full Code

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Controller example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="myLanguageApp">
  <div ng-controller="languages">
  Select your Favourite Lanuage :
  <button ng-click="lang('php programming')">PHP</button>
  <button ng-click="lang('javascript')">Javascript</button>
  <button ng-click="lang('python')">Python</button>
  <button ng-click="lang('ruby')">Ruby</button>

  <p>You have selected : {{ myFavLanguage }}</p>
  </div>
 
  <script>
  var application = angular.module('myLanguageApp',[]);
  application.controller('languages',function($scope){
  $scope.myFavLanguage = "None";
  $scope.lang = function(value){
  $scope.myFavLanguage = value;
  }
  });
  </script>
</body>
</html>

  

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *