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 web application and add a webform to it:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AngularJsController.WebForm1" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="//"></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



  Modified On Nov-29-2017 04:28:53 PM

Leave Comment