Hello folks! welcome back to a new section of our tutorial on AngularJS. In this tutorial, we're going to be studying about AngularJS Controllers.
AngularJS applications mainly depends on controllers to control the flow of data in the application. A controller is defined using ng-controller. A controller is a JavaScript object holding attributes/properties and functions. Each controller accept $scope as parameter, which refers to the application and module that the controller needs to handle.
AngularJS applications mainly depends on controllers to control the flow of data in the application. A controller is defined using ng-controller. A controller is a JavaScript object holding attributes/properties and functions. Each controller accept $scope as parameter, which refers to the application and module that the controller needs to handle.
<div ng-app = "" ng-controller = "studentController"> ... </div>
Here, we have declared a controller named studentController, via ng-controller directive. We define it as follows -
<script> function studentController($scope) { $scope.student = { firstName: "Kennedy", lastName: "Nkpara", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; } </script>
- The studentController is defined as a JavaScript object with $scope as an argument.
- The $scope refers to the application which uses studentController object.
- The $scope.student is a property of the studentController object.
- The firstName and lastName are two properties of $scope.student object. We pass the default values to them.
- The property fullName is function of $scope.student object which returns the combined name.
- In the fullName function, we receive the student object and then return the combined name.
- We also define the controller object in a separate JS file and refer that file in the HTML page.
READ: AngularJS | Expressions
Now we can make use of studentController student property using ng-model or making use of expressions as follows -
Now we can make use of studentController student property using ng-model or making use of expressions as follows -
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
- Here, we bound student.firstName and student.lastName to two input boxes.
- We bound student.fullName to HTML.
- Whenever you type anything into first name and last name input boxes, you can see the full name getting updated automatically.
Example
The following example below illustrates the use of controllers -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<html> <head> <title>Angular JS Controller</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "studentController"> Enter first name: <input type = "text" ng-model = "student.firstName"><br> <br> Enter last name: <input type = "text" ng-model = "student.lastName"><br> <br> You are entering: {{student.fullName()}} </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Kennedy", lastName: "Nkpara", fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html>
Output
Open the file testAngularJS.html in any web browser and see the result -
AngularJS Sample Application
Enter first name:
Enter last name:
You are entering: Kennedy Nkpara
Enter last name:
You are entering: Kennedy Nkpara
READ: AngularJS | Directives
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Filters.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.