Categories: AngularJS

AngularJS Controller

To control the flow of data AngularJS mainly relies on controllers. It is defined using ng-controller directive. Controller contain attributes, properties and functions.

Example of Controller:

<html>
<head>
<title>AngularJS Controllers</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Controllers</h2>
<div ng-app="ngApp" ng-controller="nameController">
    First name: <input type="text" ng-model="name.firstName"><br><br>
    Last name: <input type="text" ng-model="name.lastName"><br>
    <br>
    Full name: {{name.fullName()}}
</div>
<script>
var ngApp = angular.module("ngApp", []);
ngApp.controller('nameController', function($scope) {
   $scope.name = {
      firstName: "Mark",
      lastName: "Taylor",
      fullName: function() {
         var nameObject;
         nameObject = $scope.name;
         return nameObject.firstName + " " + nameObject.lastName;
      }
   };
});
</script>
</body>
</html>

nameController defined with $scope as argument.
$scope refers to the application which is to use the nameController object.
$scope.name is property of nameController object.
$scope.name object has two properties: firstName and lastName.
$scope.name object has fullName function which return the concatenate name.
When you type anything in first name and last name input boxes, Full name will be updated automatically.

Namaste UI

For any types of queries, you can contact us on info[at]namasteui.com.