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 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



Last updated:9/7/2019 12:14:57 AM


Leave Comment