Post
Ask Question

AngularJS Controller

Introduction

AngularJS Controllers follows MVC ( Model-View-Controller ) pattern. In the MVC pattern in AngularJS, a Controller controls the interaction between the View and Model. View handles the layout while the Model handles business logic.

A Controller is defined using ng-controller in an AngularJS application. AgnularJS applications depend on Controller which controls the flow of data. Each Controller accepts $Scope as a parameter which refers to the application or module that the Controller is needed to control.

CSS

  1. <style>  
  2.         .input { border-radius: 5px; text-align: center; padding-left: 10px;  
  3.             border: 1px solid gray; margin: 5px; background-color: lightgray;  
  4.             width: 200px;  
  5.         }  
  6.     </style>  
JS
  1. <script>    
  2.         var app = angular.module("App", [])    
  3.         app.controller("AjController", function ($scope) {    
  4.             $scope.message = "Please enter your name and age";    
  5.             $scope.person = {    
  6.                 Name: null,    
  7.                 Age: null,    
  8.           Show: function () {    
  9.                         var personObj = $scope.person;    
  10.                         $scope.NameAndAge = "Hello, " + personObj.Name + " you are "                                                      + personObj.Age + " year old.";    
  11.                         $scope.disabled = true;    
  12.                 }    
  13.             };    
  14.         });    
  15.     </script>    
HTML
  1. <body ng-app="App" style="padding:15% 10% 15% 40%">  
  2.     <div style="text-align:center; border:solid 2px gray;width:50%">  
  3.         <h2 style="text-decoration: underline;color:dodgerblue">AngularJs - Controllers</h2>  
  4.         <div ng-controller="AjController"> <span>{{message}}</span>  
  5.             <hr /> <input type="text" ng-disabled={{ "disabled"}} ng-model="person.Name" class="input" placeholder="Enter your Name" /> <br /> <input type="text" ng-disabled={{ "disabled"}} ng-model="person.Age" class="input" placeholder="Enter your Age" /> <br /> <button ng-model="all" ng-click="person.Show()"> Show</button>  
  6.             <hr /> <span ng-show="person.Name===''||person.Age===''?false:true">{{NameAndAge}}    
  7. </span> </div>  
  8.         <div>  
  9. </body>    
AjController is an Angular controller defined with $scope as argument. $scope refers to the application which is using the AjController. $scope.person is the property of AjController. Name, Age, and Show is the property of $scope.person object.
 
Figure 1.1 

Put your name and age and click the "Show" button. 
 
Figure 1.2

Summary

In this blog, I discussed how we can use ternary operator using AngularJS and in which directives of AngularJS we can use them.
Next Recommended Reading Pass Data from Parent Controller to Child Controller in AngularJS