Controllers in AngularJS

Overview

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

Introduction

We continue with our previous example,


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

That means the controllers are not communicating directly with the DOM elements. When you are writing a 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 setup the initial stage of the scope object and various behavior 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 which displays first name, lastname 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 >
firstName :{{ employee.firstName}}
lastName : {{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 had 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 F12 developer option . You will see 1 error at the top of your screen,



Just click on that error,



It's having some URl and encoded messages. Let's click to a URl it will redirect to a page now it says,



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



So download the uncompressed verison of angular js from 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 method 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.

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