Controllers – AngularJS

AngularJS supports Model-View-Controller (MVC) architecture pattern.

A Controller is a javascript object which has properties and functions.

AngularJS Controller is the only object that communicates with both Models and Views.


Controller Directive

In AngularJS application, a controller directive is defined with ng-controller directive.

<div ng-controller="empController">

Controller Syntax

<script>
	angular.module('empApp', []).controller('empController', ['$scope', function($scope)
	{
		$scope.name = '';
		$scope.getName = function() {
			$scope.greeting = 'Hello ' + $scope.name;
		}
	}]);
</script>
  • Create new module empApp using the angular.module function.
  • Create empController controller using the empApp module object.
  • Pass $scope as an argument to controller function. $scope is an object that refers to the application model.
  • Create name property on the controller object.
  • Create getName function on the controller object.

as Syntax

You can create alias for a controller using “as”.

To use an alias with the controller, you must use “this” instead of $scope parameter.

<body ng-app="empApp">
	<div ng-controller="empController as mainCtrl">
		<span>{{ mainCtrl.name }}
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	angular.module('empApp', []).controller('empController', [function()
	{
		this.name = 'James';
	}]);
</script>

Controller Inheritance

A controller can be nested into another controller.

A child controller can inherit properties and functions from their parent controller.

<body ng-app="empApp">
	<div ng-controller="mainCtrl">
		<p>{{ name }}</p>
		<p>{{ greeting() }}</p>
		<div ng-controller="empCtrl">
			<p>{{ name }} </p>
			<p>{{ Age }} </p>
			<p>{{ greeting() }} </p>
		</div>
		<div ng-controller="mgrCtrl">
			<p>{{ name }} </p>
			<p>{{ position }} </p>
			<p>{{ greeting() }} </p>
		</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('empApp', []);
	
	//main controller
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.name = 'James';
		$scope.greeting = function() {
			return "Hello " + name;
		};
	}]);
	
	//employee controller
	app.controller('empCtrl', ['$scope', function($scope) {
		$scope.age = 24;
	}]);
	
	//manager controller
	app.controller('mgrCtrl',['$scope', function($scope) {
		$scope.position = 'manager';
	}]);
</script>
</body>
  • Create three controller mainCtrl, empCtrl, mgrCtrl.
  • empCtrl and mgrCtrl are the child controllers of mainCtrl.
  • mainCtrl contains one property name and a single function greeting.
  • empCtrl inherit both name and greeting function from the mainCtrl.
  • mgrCtrl inherit both name and greeting function from the mainCtrl.
  • empCtrl introduce new property age.
  • mgrCtrl introduce new property position.