AngularJS Controllers (original) (raw)

Last Updated : 01 Aug, 2022

In this article, we will see the Controller in AngularJS along with knowing how Controller works, the concept of the Controller method & how the Controller can be implemented in an external. We will understand all these aspects with the help of their implementation & accordingly will its illustrations.

AngularJS controllers play a 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 controls the data of AngularJS applications and the controller is a 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, which is used in AngularJS scope and also the function $scope) is defined when the controller is defining and it returns the concatenation of the $scope.firstname and $scope.lastname.

Syntax:

Contents...

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

HTML

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

< body >

`` < center >

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

`` </ center >

</ body >

</ html >

Output:

Controller method: 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.firstnameandscope.firstname and scope.firstnameandscope.lastname. Here a controller can also have methods (variables as functions):

Example 2: This example illustrates the basic implementation of the Controller method in AngularJS.

HTML

<!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 <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>s</mi><mi>c</mi><mi>o</mi><mi>p</mi><mi>e</mi><mi mathvariant="normal">.</mi><mi>f</mi><mi>i</mi><mi>r</mi><mi>s</mi><mi>t</mi><mi>N</mi><mi>a</mi><mi>m</mi><mi>e</mi><mo>+</mo><mi mathvariant="normal">"</mi><mi mathvariant="normal">"</mi><mo>+</mo></mrow><annotation encoding="application/x-tex">scope.firstName + " " + </annotation></semantics></math>scope.firstName+""+scope.lastName;

`` };

`` });

`` </ script >

</ head >

< body style = "padding: 30px" >

`` < center >

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

`` </ center >

</ body >

</ html >

Output:

Controllers in External files: In larger applications, it is common to store controllers in an external file, you just need to copy that file name and paste it into a