Learn about Controllers in AngularJS


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.


We continue with our previous example.

Continue with our previous

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.

    First Name: {{ employee.firstName }}
    Last Name: {{ employee.lastName }}
    Address: {{ employee.Address }}

Final code is.

Final code

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

Run the application

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

I renamed our ng-controller to myController1.

Ng controller

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.

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.

Bad argument

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

Version of Angular

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

Uncompressed version

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

Run our soluion

Now again press F12.

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

Renaming 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.

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.

Changing 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.

Expected output

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


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

Similar Articles