Dot Net Stuff

Defining Controllers in Angular JS Application

Controllers are one of the most important building blocks of an AngularJS application, and they act as a channel between the model and the views. When we are developing a big Angular JS Application, we have to works with multiple controllers, each of which delivers the data and logic required for one aspect of the application. We can define a Controllers are using the Module.controller method, which takes two arguments: the name of the controller and a factory function, which is used to set up the controller and get it ready for use. Following statements that create the controller.

myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here

The commonly used convention for controller names is to use the suffix Ctrl. Above statement will creates a new controller called dayCtrl. The function passed to the Module.controller method is used to declare the controller’s dependencies, which are the AngularJS components that the controller requires. AngularJS provides some built-in services and features that are specified using argument names that start with the $ symbol. In the above code you can see that we have specified the $scope, which asks AngularJS to provide the scope for the controller. To declare a dependency on $scope, We just have to use the name as an argument to the factory function. E.g :

myApp.controller("dayCtrl", function ($scope) {

This is an example of dependency injection (DI), where AngularJS inspects the arguments that are specified for a function and locates the components they correspond to; It is suggested to read “Understanding Dependency Injection in Angular JS” article for more details. The function we passed to the controller method has an argument called x, and AngularJS will automatically pass in the scope object when the function is called. You can also read dependency injection Tutorials in order to understand in details.

As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and methods.

Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus