Skip to content
Related Articles

Related Articles

AngularJS | Controllers
  • Last Updated : 21 Jun, 2019

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.




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-controler 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-controler 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:



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




<!DOCTYPE html>
<html>
  
<head>
    <title>ng-controler 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-controler 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 application it is common to store controllers in a external file, you just need to copy that file nime and paste it in a <script> tag. Here the external file name is “geeksforgeeks.js”

Example:




<!DOCTYPE html>
<html>
<head> 
   <script src=
   </script>
   <script src="geeksforgeeks.js"></script>
</head>
<body>
   <center>
      <h1 style="color:green">GeeksforGeeks</h1>
      <h2>ng-controler 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 :