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.

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.

Or you can directly include from CDN

 

  {{ language }}
 

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

 

  {{ language }}
  
 
  

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

  Select your Favourite Language :
  PHP
  Javascript
  Python
  Ruby
  
You have selected : {{ myFavLanguage }}

  

  Select your Favourite Lanuage :
  PHP
  Javascript
  Python
  Ruby

  
You have selected : {{ myFavLanguage }}