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.

Now you will see the output as above with binding expression property. Now if you are running the solution in Chrome just press the F12 developer option. You will see 1 error at the top of your screen.

Just click on that error.

It has some URl and encoded messages. Let's click on a URL it will redirect to a page now it says.

Argument myController1 is not defined as we are using a minified version of Angular js.

So download the uncompressed version of angular js from the official website and include a reference in your solution.

Now again we will run our solution and we will see the same error.

Now again press F12.

This time we are getting a proper error of renaming a controller.

What happens when a controller's name is misspelled?

When a controller's name is misspelled an error is raised -- now you have to use developer tools. The Binding expression in the view that is in the scope of the controller will not be manipulated.

What happens if a proper name is misspelled in the binding expression?

Suppose we had renamed.

As you can see in the below output.

FirstName has not been displayed.

If you want to create a controller module and register that controller with a module in one line then.

By using the method of chaining in angular.

Just add a controller as .controller and specify a controller name and function.

Now everything should work. When you run the solution you will see the expected output.

So with the help of changing the mechanism all in one line, we also can achieve output.

Conclusion

This was about controllers in Angular JS. I hope this article was helpful.