AngularJs uses MVC pattern to develop client side web applications. In MVC, “C” stands for Controller. AngularJs controller is the key object of AngularJs framework. It contains the application logic to organize data flow with in the application.
AngularJs Controller :
AngularJs Controllers are developed by using constructor function. At the time of executing the AngularJs, the framework itself creates an object for controller by using constructor function.
The AngularJs controllers can be identified by ng-controller directive.
The views are binding with the controllers by using a directory called ng-controller.
<div ng-controller="studentCotroller"></div>
The above binding statement generates a new object for the controller. So that view can access controller’s members (variables and methods).
The variables and methods that are prepared inside the controller are not directly accessible to the view. To sharing the data between the view and controller, AngularJs provides a special object called $scope. $scope is an inbuilt object of AngularJs.
Lets create AngularJs controller step by step :
Steps to create AngularJs Controller :
Step 1 :
We can create the AngularJs controller by using module object. Create an AngularJs module like below :
var object = angular.module(“moduleName”,[]);
Step 2 :
Create an AngularJs controller like below :
object.controller(“controllerName”, constructor-function);
Note : The constructor-function that we prepared to create controller object should take $scope as an argument. Because at run time the framework will create an object for the constructor with $scope as parameter.
Step 3 :
Bind Module like below :
<body ng-app=”moduleName”></body>
Step 4 :
Bind controller like below :
<div ng-controller=”controllerName”>
Here you can access all variables and methods of controller
</div>
AngularJs controller sample Example :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Controller Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller("studentCotroller", function($scope) {
$scope.stdId = "1002";
$scope.stdName = "chandra shekhar";
$scope.stdAddress = "Mumbai";
})
</script>
</head>
<body ng-app="myapp">
<div ng-controller="studentCotroller">
<span> Student Id : {{stdId}} <br> Student Name :
{{stdName}} <br> Student Address : {{stdAddress}} <br>
</span>
</div>
</body>
</html>
[/html]
Points to Note :
- The AngularJs application can be identified by the ng-app directive. Any thing related to angularjs inside the ng-app will be consider by the framework.
- ng-controller is a directive it is used to bind the AngularJs controller with specific view name. In the example above we bind the view with controller by using the name “studentController”.
- $scope is an object of AngularJs. It is used to share the data between view and controller. In the above example, we accessed the view’s properties and assign the data from controller.
- {{}} is angularJs expression, used for one way binding.
Output :
AngularJs Controller Example using Arrays :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Controller with Array Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("studentCotroller", function($scope) {
$scope.marks = [95,52,65,98,55,35];
})
</script>
</head>
<body ng-app="myApp">
<h1>Student Marks List</h1>
<div ng-controller="studentCotroller">
<ul>
<li ng-repeat="item in marks">
Subject {{$index+1}} : {{item}}
</li>
</ul>
</div>
</body>
</html>
[/html]
$index is way to get, where you’re in loop.
Output :
Happy Learning 🙂
