Learn about Controllers in AngularJS

Overview

In Part One of my previous article, we saw what models and controllers are. Here in this article, we will have a look at what are controllers in Angular JS and we will see how controllers behave and when we rename a controller and what error we get.

Introduction

We continue with our previous example.

In this, we are passing a $scope parameter and we are passing a message as this above example is a model and expression binding {{}} which displays messages directly from the model.

That means the controllers are not communicating directly with the DOM elements. When you are writing code for a controller make sure that you are making a clean code or separation between Model-View-Controller. The controller should be only used to set up the initial stage of the scope object and various behaviors to it.

We see an example of a controller.

Now in the same example, I am taking a variable called employee and writing a code that displays first name, last name, and address.

var employee = {
  firstName: "Akshay",
  lastName: "Phadke",
  Address : "Mumbai "
}; 

Now we will attach to this scope object.

$scope.employee = employee;

So our final code is.

var mypartone = angular.module("mymodule", []);
//create a controller register the controller with the module
mypartone.controller("myController", function ($scope) {
    var employee = {
        firstName: "Akshay",
        lastName: "Phadke",
        Address : "Mumbai "
    };
    $scope.employee = employee;
});

Now let's switch back to our page as we want to display various details we will bind in data binding expressions.

<div>
    First Name: {{ employee.firstName }}
    Last Name: {{ employee.lastName }}
    Address: {{ employee.Address }}
</div>

Final code is.

Now just run the application and you will get this output.

Now suppose if we rename a controller then what error do we get?

I renamed our ng-controller to myController1.

Now just the solution.