Quick Contact


    AngularJS Controllers

    Angular JS controllers are used to controlling the flow of data of AngularJS application. Data is taken from the view part as an input by the controller, then it processes the data and sends it back to the view part (HTML part) that is being displayed to the user. It consists of the core business logic. It is defined in an angular application using a directive known as ng-controller.

    Controllers in AngularJS

    There are two ways to define a controller in an AngularJS application.

    • Define as an application module
    • Define as a JavaScript function
    An application Module

    A controller define as an application module.

    Syntax –

    angular.module(“myapp”, [])

    .controller(“appController”, function($scope) {

    // definition of controller

    } );

    Example –
    	< !DOCTYPE html> 
    	< html> 
    	< head> 
    	< title>Controllers In AngularJS< /title> 
    	< script src="angular.js">< /script> 
    	< /head> 
    	< body ng-app="myapp"> 
    	< div>Application.controller< /div> 
    	< div ng-controller="appController"> 
    	< div> My Name (app.contrller): {{myName}} < /div> 
    	< /div> 
    	< br/> 
    	< script> 
    	angular.module("myapp", []) 
    	.controller("appController", function($scope)
    	{ 
    	$scope.myName = "DucatIndia"; 
    	}); 
    	< /script> 
    	< /body> 
    	< /html>
    	
    Output-

    Application.controller

    My name (app.controller): DucatIndia

    JavaScript Function

    AngularJS controller defines as a Javascript function.

    Syntax–

    functioncontrollerAsFunction($scope){

    //definition of controller

    }

    Example –
    	< !DOCTYPE html> 
    	< html> 
    	< head> 
    	< title>Controllers and Services In AngularJS< /title> 
    	< script src="angular.js">< /script> 
    	< /head> 
    	< body ng-app="myapp"> 
    	< div> Controller as function< /div> 
    	< div ng-controller="Controller As Function"> 
    	< div> My Name (controller as function): {{myName}} < /div> 
    	< /div> 
    	< script> 
    	function controllerAsFunction($scope) { 
    	$scope.myName = "DucatIndia"; 
    	} 
    	< /script> 
    	< /body> 
    	< /html>
    	
    Output-

    Controller As Function

    My name (controller as function): DucatIndia

    Use of AngularJS Controller

    There are two uses of the controller:

    • The initial value of the $scope object is set by using a controller.
    • Behaviour is attached to $scope object using a controller.
    AngularJS Controller in External Files

    For a larger application, it is possible that we can store controller in external files.

    Create an external file named “personController.js” to store controller.

    Here, “personController.js” is:

    angular.module(‘myApp’, []).controller(‘personCtrl’, function($scope)

    {

    $scope.firstName = “Navi”,

    $scope.lastName = “Singh”,

    $scope.fullName = function() {

    return $scope.firstName + ” ” + $scope.lastName;

    }

    });

    Example
    	< !DOCTYPE html>  
    	< html>  
    	< script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script>  
    	< body>  
    	< 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: {{firstName + " " + lastName}}  
    	< /div>  
    	< script src="personController.js">< /script>  
    	< /body>  
    	< /html>  
    	
    Output –

    First Name:

    Last Name:

    Full Name: {{firstName + ” ” + lastName}}

    Enroll Yourself in Live Classes For Online Summer Training.

    Restrictions on Controller in AngularJS

    Look at the scenarios where we can’t use a controller:

    We cannot use a controller to share code or state across.

    We cannot use the AngualrJS controller to filter output. For this purpose, there are various built-in filters provided by AngularJS, such as uppercase, lowercase and many more. Also, one can create custom filters too.

    DOM (Document object model) can’t manipulate by a controller. For this purpose, data binding or directives are theirs.

    We can’t use the controller to format input. For that angular form, controls are there.

    We should keep the AngularJS controller as short and straightforward as possible. This is because a controller contains business logic only. When we can include presentation logic with business logic in a controller, its testability gets effects.

    The easiest and efficient alternative for these services encapsulate all those works that do not deal with business logic (or that does not belong to a controller) into services. We can use these services by dependency injection in a controller.

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.