Title
Angular JS Controllers
Introduction
Angular JS applications are controlled by controllers. The ng-controller directive defines the applications controller. A controller directive defines the applications controller. A controller is a JavaScript object, created by a standard JavaScript object constructor.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myApp">
<head>
<title>Angular JS Controllers</title>
<script src="mianAngularJS/angular.min.js"></script>
</script>
</head>
<body>
<div data-ng-controller="personController">
First Name: <input type="text" data-ng-model="firstName" />
<br />
Second Name: <input type="text" data-ng-model="secondName" />
<br />
Full Name: {{firstName + " " + secondName}}
</div>
</body>
</html>
<script>
function personController($scope) {
$scope.firstName = "Paras";
$scope.secondName = "Babbar";
}
var app = angular.module('myApp', []);
app.controller('personController', function ($scope) {
$scope.firstName = "Paras";
$scope.secondName = "Babbar";
$scope.fullname = function () {
return $scope.firstName + $scope.secondName;
}
});
</script>
Application Explained
- The Angular JS application is defined by ng-app. The application runs inside a <div>.
- The ng-controller directive names of the controller object.
- The person controller function is a standard JavaScript object constructor.
- Angular JS will invoke personController with a $scope object.
- In AJS $scope is the application object (the owner of application variables and function)
- The personController creates two properties (variable) in the scope (firstName and lastName).
- The ng-model directives bind the input fields to the controller properties (firstName & lastName).
- The ng-model directives bind the input field to the controller properties (firstName & lastName).
Controller Method
The example above demonstrated a controller object with two properties: firsttName & lastName. A controller can also have methods (function as object properties).
Angular JS Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myApp">
<head>
<title>Angular JS Controllers</title>
<script src="mianAngularJS/angular.min.js"></script>
</script>
</head>
<body>
<div data-ng-controller="personController">
<br />
Full Name : {{fullname()}}
</div>
</body>
</html>
JavaScript
<script>
function personController($scope) {
$scope.firstName = "Paras";
$scope.secondName = "Babbar";
}
var app = angular.module('myApp', []);
app.controller('personController', function ($scope) {
$scope.firstName = "Paras";
$scope.secondName = "Babbar";
$scope.fullname = function () {
return $scope.firstName + $scope.secondName;
}
});
</script>
Controllers in External Files
In larger applications, it is common to store controllers in external files. Just copy the code between the <script> tags into an external file named AJSControllers.js
Angular JS Example
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myApp">
<head>
<title>Angular JS Controllers</title>
<script src="mianAngularJS/angular.min.js"></script>
<script src="AJSControllers.js">
</script>
</head>
<body>
<div data-ng-controller="personController">
First Name: <input type="text" data-ng-model="firstName" />
<br />
Second Name: <input type="text" data-ng-model="secondName" />
<br />
Full Name: {{firstName + " " + secondName}}
</div>
</body>
</html>
Example 2
For this example we’ll first create external JavaScript File.
AJSController.js
var app = angular.module('myApp', []).controller('nameCtrl', function ($scope) {
$scope.name = [
{ name: 'Paras', country: 'India' },
{ name: 'Amit', country: 'Pakistan' },
{ name: 'John', country: 'America' }
];
});
And now we’ll use this controller file in our application.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="myApp">
<head>
<title>Angular JS Controllers</title>
<script src="mianAngularJS/angular.min.js"></script>
<script src="AJSControllers.js"></script>
</head>
<body>
<div data-ng-controller="nameCtrl">
<ul>
<li data-ng-repeat="x in name">
{{x.name + ', ' + x.country}}
</li>
</ul>
</div>
</body>
</html>
OUTPUT
