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.
![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.
<div>
First Name: {{ employee.firstName }}
Last Name: {{ employee.lastName }}
Address: {{ employee.Address }}
</div>
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.
![Firstname]()
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.
![Elements]()
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.
![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.
Conclusion
This was about controllers in Angular JS. I hope this article was helpful.