AngularJS | Controllers

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.