AngularJS ng-controller Directive

The AngularJS ng-controller directive adds a controller class to the view (your application). It is the key aspect which specifies the principles behind the Model-View-Controller design pattern.

It facilitates you to write code and make functions and variables, which will be parts of an object, available inside the current HTML element. This object is called scope.

This is supported by all HTML elements.

Syntax:

Parameter explanation:

expression: It specifies the name of the controller.

Let's take an example to demonstrate ng-controller directive.

See this 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="myCtrl">
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "Aryan";
    $scope.lastName = "Jaiswal";
});
</script>
<p>In this example you can see how to define a controller, and how to use variables made for the scope.</p>
</body>
</html>

Test it Now

Next TopicAngularJS ng-copy Directive

← prev next →