Skip to content
Related Articles

Related Articles

Improve Article

AngularJS | Controllers

  • Difficulty Level : Expert
  • Last Updated : 27 May, 2021

AngularJS controllers play significant role in AngularJS applications.All the AngularJS application mainly relies on the controllers to control the flow of data in that application. Basically, it control the data of AngularJS applications and controller is Javascript object, created by a standard JavaScript object constructor.

The ng-controller directive defines the application controller. In AngularJS, a controller is defined by a Javascript construction function and which is used AngularJS scope and also the function $scope) is defined when controller is defining and it’s return the concatenation of the $scope.firstname and $scope.lastname.

Syntax: 

<element ng-controller="expression">Contents...</element>

Example:This example uses ng-controller Directive to display the concatenation of First and Second input of a user. 

Javascript




<!DOCTYPE html>
<html>
 
<head>
    <title>ng-controller Directive</title>
 
    <script src=
    </script>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName = "Geeks";
            $scope.lastName = "Geeks";
        });
    </script>
 
</head>
<center>
 
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>ng-controller Directive</h2>
        <div ng-app="myApp" ng-controller="myCtrl">
 
            First Name:
            <input type="text" ng-model="firstName">
            <br> Last Name:
            <input type="text" ng-model="lastName">
            <br>
            <br> Full Name: {{firstName + "for" + lastName}}
 
        </div>
 
    </body>
</center>
 
</html>

Output: 
 



Controller methods 
This first example demonstrated a controller object with two properties:Fname and Lname.In AngularJS, the function($scope) is defined when controller is defining and it’s return the concatenation of the $scope.firstname and $scope.lastname. Here a controller can also have methods (variables as functions):

Example:  

Javascript




<!DOCTYPE html>
<html>
 
<head>
    <title>ng-controller Directive</title>
 
    <script src=
    </script>
 
    <script>
        var app = angular.module('geeks', []);
        app.controller('personCtrl', function($scope) {
 
            $scope.fullName = function() {
                return $scope.firstName + " " + $scope.lastName;
            };
        });
    </script>
 
</head>
<center>
<body style="padding: 30px">
    <div ng-app="geeks" ng-controller="personCtrl">
        <h1 style="color:green">GeeksforGeeks</h1>
        <h2>ng-controller Directive</h2> First Name:
        <input type="text" ng-model="firstName">
        <br><br> Last Name:
        <input type="text" ng-model="lastName">
        <br>
        <br> Full Name: {{fullName()}}
    </div>
</body>
</center>
</html>                   

Output: 
Before writing the name: 
 

After writing the name: 
 

Controllers in External files 

In larger applications it is common to store controllers in a external file, you just need to copy that file name and paste it in a <script> tag. Here the external file name is “geeksforgeeks.js”

Example: 

Javascript




<!DOCTYPE html>
<html>
<head>
   <script src=
   </script>
   <script src="geeksforgeeks.js"></script>
</head>
<body>
   <center>
      <h1 style="color:green">GeeksforGeeks</h1>
      <h2>ng-controller Directive</h2>
       
      <div ng-app="myApp" ng-controller="personCtrl">
          First Name: <input type="text" ng-model="firstName">
          <br>
          Last Name: <input type="text" ng-model="lastName">
          <br><br>
          Full Name: {{fullName()}}
      </div>
   </center>
</body>
</html>

Output: 
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :