Post
Ask Question

Basics of AngularJs Controller: Part 2

MVC Architecture In AngularJs
 
Before going through this article, please go through the basics of AngularJs at the following Link. Fundamental of AngularJs: Part 1.
  1.  AngularJs uses client-side MVC pattern. That means MVC in the UI part.
  2.  The main purpose of MVC is Seperation of Concerns.
  3.  So AngularJs makes a clear separation of the UI, JavaScript code (controllers) and model (data that comes directly to the controller from a form or using the web API from the database).
  4. MVC is popular because it isolates the application logic from the user interface layer and supports Seperation of Concerns.
  5. The controller receives all the requests for the application and then works with the model to prepare any data needed by the view.
  6. The view then uses the data prepared by the controller to generate a final presentable response.
Before describing the controller we will explain a module.
 
Module

A module is just like a container inside which we can define controllers, services, directives and so on. We can say it is like a namespace.
 
How to create a module

 
 
A  module contains the following 2 parameters: 
  • Module Name
  • Array

Controller


An AngularJs controller controls the data of the AngularJs application.

Declaring a Controller
  1. For declaring AngularJs we need a “ng-controller” directive.
  2. The AngularJs controller is a JavaScript object and is always defined inside <script> tags.
  3. The controller always contains the business logic.
  4. The controller takes one parameter that is “$scope” that accepts data that comes from modules/applications.
  5. Before creating a controller we must create a module.
 

We can use the controller in the following 2 ways:

  1. We can write the code in HTML code itself.
  2. We can define the controller in a separate JavaScript file and provide a reference to the HTML file.
Example 1
 
VIEW
  1.  <div ng-app="mymodule" ng-controller="mycontroller">  
  2.       <input type="button" value="Click" ng-click="alert()" />  
  3. </div> 
 
Controller
  1. <head>  
  2.     <title>Angular JS Controller</title>  
  3.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  4.     <script type="text/javascript">  
  5.         var mymodule = angular.module("mymodule", []);  
  6.         mymodule.controller('mycontroller', function ($scope) {  
  7.             $scope.alert = function ()  
  8.             {  
  9.                 alert("Hi Debendra");  
  10.             }  
  11.         });  
  12.     </script>  
  13. </head> 
Now when the button is clicked the program produces the following output:
 
 
 
Example 2
 
VIEW
  1. <div ng-app="mymodule" ng-controller="mycontroller">  
  2.         Enter first No :   
  3.     <input type="text" ng-model="no1">  
  4.         <br>  
  5.             <br>  
  6.                 Enter Second NO:   
  7.                 <input type="text" ng-model="no2">  
  8.                     <br>  
  9.                 <input type="button" value="Click" ng-click="add()" />  
  10.         <br />  
  11.     <br />  
  12. </div> 
  
 
Controller
  1. <head>  
  2.     <title>Angular JS Controller</title>  
  3.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  4.             <script type="text/javascript">  
  5.                 var mymodule = angular.module("mymodule", []);  
  6.                 mymodule.controller('mycontroller', function ($scope) {  
  7.                 $scope.add = function () {  
  8.                      var x = parseInt($scope.no1) + parseInt($scope.no2);  
  9.                      alert(x.toString());  
  10.                 }  
  11.             });  
  12.         </script>  
  13.     </script>  
  14. </head> 
When we click the button the output will be:
 
Example 3
VIEW
  1. <h2>AngularJS Sample Application</h2>  
  2. <div ng-app="mymodule" ng-controller="mycontroller">  
  3.     Enter first Name:   
  4.     <input type="text" ng-model="firstName">  
  5.         <br>  
  6.             <br>  
  7.                 Enter Second Name:   
  8.                 <input type="text" ng-model="lastName">  
  9.                     <br>  
  10.                     <br />  
  11.             <br />  
  12.                 <b>{{GetName()}}</b>  
  13.         </b>  
  14.     </input>  
  15. </div> 
Controller
  1. <head>  
  2.     <title>Angular JS Controller</title>  
  3.     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
  4.     <script type="text/javascript">  
  5.         var mymodule = angular.module("mymodule", []);  
  6.         mymodule.controller('mycontroller', function ($scope) {  
  7.             $scope.GetName = function ()  
  8.             {  
  9.                 return "Hello Mr." + $scope.firstName + " " + $scope.lastName;  
  10.             }  
  11.         });  
  12.     </script>  
  13. </head> 
  


Similar Articles