Web Programming TutorialsLearn about Controllers in AngularJS

Learn about Controllers in AngularJS


AngularJs is a front-end framework based on the MVC model – Model, View, Controller. It’s built on top of Javascript and jQuery. The model represents the data source, the View the webpage, and the Controller to the connection between the two. Maintaining that separation makes our code easier to update and manage. Angular allows us to extend HTML tags and attributes with directives, whichbind the data directly to HTML objects. In order to use the AngularJS library, we need to include it in a web page, like so:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

ng-init is a directive that initializes application data by assigning values to variables. We can put it right after the ng-app tag, like so:

<div ng-app='"firstA" ng-init="student={name:'Amy', GPA:'85'}; Groceries=[{name:'tomato', group: 'veggies'},{name:'banana', group: 'fruit'}]"</div>

We have defined 2 variables, the first an object with key-value pairs, and another an array of such objects.

< ng-controller="firstC"></div>

This basically means that this particular div element, as well as all the elements inside it, are going to be the View. ng-controller is the application controller, which is an object.
By ng-controller=”” we are defining the controller.
So far we have:

<div ng-app='"firstA" ng-init="student={name:'Amy', GPA:'85'}; Groceries=[{name:'tomato', group: 'veggies'},{name:'banana', group: 'fruit'}]" ng-controller="firstC" </div>

We are going to use the $scope element to provide data to our View. We’re going to use our controller to connect the two.

var firstA = angular.module("firstA", []);
firstA.controller("firstC", function($scope) {
 $scope.firstN = 12;
 $scope.secondN = 5;
 $scope.multy = function() {
   return $scope.firstN + "*" + $scope.secondN+"="+(+$scope.firstN*+$scope.secondN);



Explanation: We are defining the firstA application, and then the application controller. We’re referencing the controller’s name inside the brackets(the same name we gave it in the HTML).
Inside the controller function, which is called a factory function, $scope links our HTML elements to variables in our function. We defined 2 variables, $scope.firstN and $scope.secondN and gave them initial values. We then defined a function for the $scope object, which multiplies our first variable by our second variable and returns the result. The ‘+’ in front of the variables inside the brackets converts string to integer. So, here we have a variable (multy) which is also a function.
We are now going back to the HTML and defining two elements which would be bound to our controller data, using ng-model to make the connection. Like so:

<div ng-app="firstA"  ng-init="student={name:'Amy', GPA:'85'}; Groceries=[{name:'tomato', group: 'veggies'},{name:'banana', group: 'fruit'}]"  ng-controller="firstC" >
<p> select numbers: </p>
<input type="text" ng-model="firstN"><br/>
<input type="text" ng-model="secondN"><br/>
<p> Result: {{multy()}} </p>

We got the value of $scope.multy to display in our HTML by using the expression {{multy()}}
When a user enters values in the text fields, the result will be automatically generated and displayed  to them.

In summary, we’ve shown how Angular controllers can be used to manage the data of Angular applications. A controller is defined in the HTML using the ng-controller attribute. The controller function creates variables which belong to the $scope object. As we have seen in the example, the controller can have a method as a variable (multy() in our example).
The controller (or $scope) variables are connected to the View using the ng-model attribute.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -Newspaper WordPress Theme

Latest article


More article

- Advertisement -Newspaper WordPress Theme