In AngularJS, a controller is a javaScript constructor function which is attached with HTML DOM using ng-controller
attribute to defines a controller to be bound with the view. In AngularJS, controller provides great control over view and model in order to fatch the data as per request and display in the view.
Most important thing here is your model is lives inside the controller and therefore accept $scope as a parameter.
Once you decleare ng-controller
to the parent element, all child elements automatically belongs to that controller. You can think AngularJS controller as regular Javascript object with properties and functions.
A controller is defined using ng-controller
directive in AngularJS.
AngularJS controller used to:
Syntax1 : Define AngularJS Controller
function CustomerController($scope) { $scope.customer = { name: "Jimi Scott" }; }
<html>
<head>
<title>My first AngularJS Controller</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining AngularJS Controller Using Standard Javascrip Object Constructor
function CustomerController($scope) {
$scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "[email protected]" };
}
</Script>
</head>
<body>
<div ng-app="">
<div ng-controller="CustomerController">
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>
</div>
</div>
</body>
</html>
Syntax2 : Define AngularJS Controller
var app = angular.module('myApp', []); app.controller('CustomerController', function($scope) { $scope.customer = { name: "Jimi Scott" }; });
<html>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining AngularJS Controller Using AngularJS Module
var app = angular.module('myApp', []);
app.controller('CustomerController', function($scope) {
$scope.customer = { name: "Jimi Scott", address: "12-13-283/A1", email: "[email protected]" };
});
</Script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="CustomerController">
<p>Customer Name : {{ customer.name }}</p>
<p>Customer Name : {{ customer.address }}</p>
<p>Customer Name : {{ customer.email }}</p>
</div>
</div>
</body>
</html>
AngularJS allow you to add action handler method in controler and call these method from view. You just need to call the method as per require on the controller.
Syntax
<button id="btnSubmit" ng-click="onBtnClick()">Click Here</button>
<html ng-app>
<head>
<title>My first AngularJS code</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script type="text/javascript">
//Creating AngularJS controller here
function validateForm($scope)
{
$scope.show = function() {
if($scope.firstName == undefined || $scope.firstName == '')
alert('Name is Required');
else
alert('Hi - ' + $scope.firstName);
};
}
</Script>
</head>
<body>
<div ng-controller="validateForm" >
<form name="newForm">
Enter Name: <input type="text" id="firstName" name="firstName"
ng-model="firstName" ng-maxlength="20"> </br>
<button ng-click="show()" >Submit</button>
</form>
</div>
</body>
</html>