Controllers in AngularJS

Applications in AngularJS are controlled by controllers. It controls the data of application. These are the JavaScript Object which holds attributes and functions. It is defined by ng-controller. It uses $scope as a parameter. $scope objects communicates with view and exposes model to the view.
Syntax

<div ng-app = "" ng-controller = "controller_name">
//code
</div>

Watch this TypeScript vs JavaScript Tutorial Video for Beginners:


Example

<html>
<head>
<title>AngularJS Controller</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Example of AngularJS Controllers </h2>
<div ng-app="details" ng-controller="employeecontroller">
Id: <input type="text" ng-model="id"><br><br>
Name: <input type="text" ng-model="name"><br>
<br>
Details of Employee: {{id + " " + name}}
</div>
<script>
var e = angular.module('details', []);
e.controller('employeecontroller', function($scope) {
$scope.id = 20;
$scope.name = "abc";
});
</script>
</body>
</html>

Output
output4

Recommended Videos

Leave a Reply

Your email address will not be published. Required fields are marked *