AngularJS | Controllers - GeeksforGeeks

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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">    </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="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">   </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:  
 
surinderdawra388
AngularJS-Directives
Picked
AngularJS
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Angular | keyup event
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?
Angular PrimeNG Messages Component
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
Angular 10 (blur) Event