Modules and Controllers in AngularJS

Modules and controller is an important part of the AngularJS application.

A module is a container where functionality of the application is defined.

Controller belongs to the module where all logical part is done and updates the views.

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.

You may think modules as a main() function in C programming, which bind together different parts of the 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 [] .

Example

<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>

2. Controller

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

With angular.controller method controller is defined which allows us to bind controller to the module. It takes controller name and a function.

To access or update the value of model or a property $scope is been used in the controller.

Example

Define ng-controller='lang' on a <div> and in the <div> added {{ language }}. The value of language is assigned from the controller function.

To assign value in language use $scope.

$scope.language = "AngularJS";

Completed Code

<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Controller example</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/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>

Output


3. Using controller with ng-click

The ng-click directive represents click event in Angular.

Pass the method which you want to call on the click.

Example

I create a simple example where use the ng-click directive on the buttons to update the view with the controller.

Define ng-click="lang()" on the buttons where pass different values from each button.

Create lang() method in the script which is called on the button click. Assign the value in $scope.myFavLanguage.

The view is updated with the clicked button value.

Completed Code

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Controller example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/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>

Output

Related Post

Spread the love
  • 10
  •  
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

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