Home > DeveloperSection > Articles > AngularJs Controllers

AngularJs Controllers

Angular JS Angular JS  JavaScript  Single Page App 
1 Comment(s)
 2745  View(s)
Rate this:

AngularJs Controllers

In this article, I’m explaining the controller concept in angularjs.

In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope.

Use controllers to:

1.     Set up the initial state of the $scope object.

2.     Add behavior to the $scope object.

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:

Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.

View — The template (HTML with data bindings) that is rendered into the View.

Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.


First create an asp.net web application and add a webform to it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AngularJsController.WebForm1" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">


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


        function personController($scope) {

            $scope.person = {

                firstname: "",

                lastname: ""



            $scope.greet = function () {

                alert($scope.person.firstname + " " + $scope.person.lastname);









        <div ng-app="" ng-controller="personController">

            <p>Enter Your Name :

                <input type="text" ng-model="person.firstname" /></p>

            <p>Enter Your Name :

                <input type="text" ng-model="person.lastname" /></p>

            <p>Fullname : {{ person.firstname + " " + person.lastname }}</p>

            <p><input type="button" value="Greet" ng-click="greet()"/></p>





Now run the application

AngularJs Controllers


Type firstname and lastname and both of them will come in full name

AngularJs Controllers

And when click on Greet button – it will give a message like this:

AngularJs Controllers



nice article

By Chintoo Semi on   2 years ago
nice article

Don't want to miss updates? Please click the below button!

Follow MindStick