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,

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

  1. var employee = {  
  2.   
  3. firstName: "Akshay",  
  4. lastName: "Phadke",  
  5. Address : "Mumbai "  
  6. };  
Now we will attach to this scope object,

$scope.employee = employee;


So our final code is,
  1. var mypartone = angular.module("mymodule", []);  
  2.   
  3. //create a controller register the controller with the module  
  4. mypartone.controller("myController", function ($scope) {  
  5.   
  6. var employee = {  
  7.   
  8. firstName: "Akshay",  
  9. lastName: "Phadke",  
  10. Address : "Mumbai "  
  11. };  
  12. $scope.employee = employee;  
  13.   
  14. });  
Now let's switch back to our page as we want to display various details we will bind in data binding expressions,
  1. <div >  
  2. firstName :{{ employee.firstName}}  
  3. lastName : {{employee.lastName}}  
  4. Address : {{employee :Address}}  
  5. </div>  
Final code is,

code
Now just run  the application and you will get this output,

output

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

I had renamed our ng-controller to myController1,

code

Now just the solution.

output

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,

code

Just click on that error,

error

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

error

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

code

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

code

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

output

Now again press F12 .

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

error

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

output

What happens if a proper name is misspelled in the binding expression?
Suppose we had renamed,

As you can see in the below output,

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

code

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,

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all