Understanding the Controllers – Part 4

by Santhakumar Munuswamy

  Posted on  25 December 2015



This article explains understand the controller with a sample application and its usage of controller discussion to here.

In my previous article, we saw what is the difference between AngularJs and other java script frameworks? The series of article written on AngularJs and here are the links


A controller is a set of Java Script function which is bound to a specified scope. The ng-

controller directive, Angular wills instantiate the new controller object, and injects the new scope as a dependency.

It contains business logic for the view and avoids using to manipulate the DOM.  


Controller Rules 

  • We can use controller to set up the initial state of the scope object and add behavior to that object. 
  • We do not use controller to manipulate DOM.  It should contain only business logic and can use data binding and  directives for the DOM manipulation.
  • We do not use controllers to format input but can use angular form controls instead of that.
  • We do not use filter output but can use angular filters instead of that.
  • We do not use controllers to share code or state across controllers but can use angular services instead of that.
  • We do not manage the life-cycle of other components

Creating a Controller 

  • Requires ng-controller directive
  • Add controller code to a module
  • Name your controller based on functionality
  • Controller are named using camel case (i.e. SimpleController)

Setup the initial state of the scope object

When you have create an angularjs sample application in AngularJs. First, you need to initialize state of the scope object and associate the properties to the scope object in Angular. It is provide an in build directive to use ng-controller directive in the AngularJs application.

ng-Controller directive 

ng-Controller directive is an associated a controller class to the view

How to use ng-Controller 



<div ng-app="mainApp" ng-controller="SimpleController">

Step 1: 

Open Visual Studio 2015 and go to file menu and point the new and then click new project. New ASP.NET project window will open, you can select a ASP.NET Web Application and Type Project Name AngularJsControllerDemo, Choose the project  location path and then click OK button.

 New ASP.NET project window will open, you can select a Empty Template with No Authentication and

 then click OK button.  

Go to Solution Explorer and right click the project name and then click Manage NuGet Packages 

NuGet Package Manager window will open and you can type AngularJS and browse. Also select AngularJS.Core 
and click Install

Preview window will open and you can see the AngularJS version installing details and click OK button. 

After it is successfully installed in AngularJS, you can see the following,

You can see AngularJsControllerDemo project structure in the following screen shot.

Add SimpleController.html  

Go to Solution Explorer and right click the project name and point the Add then click the HTML Page. 

You can type the item name SimpleController.html and click OK button. 

Add SimpleController.js

Go to Solution Explorer and right click the Controller folder name and point the Add then click the Java script file. 

You can type the item name SimpleController.js and click OK button.

Step 2:  

SimpleController.html code here

<!DOCTYPE html>
    <title> San2debug.net | AngularJs Controller Application Demo</title>
	<meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Controller/SimpleController.js"></script>

    <h2>AngularJs Controller Application Demo</h2>
    <div ng-app="mainApp" ng-controller="SimpleController">
        First Name: <input type="text" ng-model="employee.firstName" /><br /><br />
        Last Name:  <input type="text" ng-model="employee.lastName" /><br /><br />
        <hr />                                                                
           <strong>Employee Full Name</strong> : {{employee.fullName()}}

SimpleController.js code here

var mainApp = angular.module("mainApp", []);

mainApp.controller("SimpleController", function ($scope) {
    $scope.employee = {

        firstName: "Santhakumar",
        lastName: "Munuswamy",

        fullName: function () {
            var employee;
            employee = $scope.employee;
            return employee.firstName + " " + employee.lastName;



MultipleController.html code here

<!DOCTYPE html>
    <title>San2debug.net | AngularJs Controller Application Demo</title>
	<meta charset="utf-8" />
    <link rel="stylesheet" href="Style/Style.css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Controller/MultipleController.js"></script>
<body ng-app="mainApp">
    <div class="main">
        <div ng-controller="MultipleController" >
            <div ng-controller="ChildController">
                <div ng-controller="ParentChildController">

MultipleController.js code here

var mainApp = angular.module("mainApp", []);

mainApp.controller("MultipleController", function ($scope) {

    $scope.name = "Welcome Microsoft";


mainApp.controller("ChildController", function ($scope) {

    $scope.name = "Welcome C# Corner";


mainApp.controller("ParentChildController", function ($scope) {

    $scope.name = "Welcome San2debug.net";


Steps 3: 

AngularJS Controller Application demo output as in the following screen shot


This article helps you to understand  
the Controller with a sample application using Visual Studio 2015. 

Thank you for reading my articles. Kindly share your comments or suggestion.


About the Author
Santhakumar Munuswamy is a seasoned Solution Architect and Most Valuable Professional in Cloud /AI solutions. He has been experienced around 14 years in Solution designing, Software Product Development, Technical Documentation, Project Management for Web and Cloud Applications. He has experience in the IT industry across different domains (Automotive, Telecommunications, Healthcare, Logistics & Warehouse Automation, etc.) with roles in Technical Architect, Genesys Consultant, Technical Lead, Team Lead, and Developer. He has experienced in mentorship and coaching high potential developers.

Follow Me: Facebook, Twitter, Google Plus, LinkedIn
blog comments powered by Disqus

Month List

Community Badges