Categories: Javascript

AngularJS – Different Ways to Declare Controllers

The article represents various ways of declaring a controller along with code examples. Please feel free to comment/suggest if I have missed on any key aspects.Following are two different ways in which controllers can be declared:
  • Using “as aliasName” in ng-controller. Example: ng-controller=”HelloCtrl as ctrl”
  • Just the controller name. In this strategy, $scope object is bound to data and methods. Example: ng-controller=”HelloCtrl”

 

Using “as aliasName” in ng-controller (Recommended Way)

Using “as aliasName” specifier when defining the controller in ng-controller directive. The methods and properties can be bound on to the controller using “this” keyword. There are benefits of binding properties directly to the controller and thus, it is the recommended way (best practice) to declare the controller using “as alias” method. Following are some of the benefits:

  • In case of multiple controllers, one knows which controllers are accessed in reading the template.
  • Enhanced readability, in general
  • Helps create controller using prototypal inheritance.

Following is how view code looks like. Note the “as ctrl” and then, “ctrl.name”

<div ng-controller="HelloCtrl as ctrl">
    <input type="text" name="name" ng-model="ctrl.name"/>
</div>

Following is how the controller looks like:

angular.module( "helloApp", [] )
    .controller( "HelloCtrl", function() {
        this.name = '';
    }]);

 

Injecting the Scope Object into the Controller (Rookies Way)

This is most common and popular way of working with the controller. For rookies to quickly get on board, this may be the recommended way.

In this strategy, the properties and methods get bound as scope properties and methods and can be later accessed on scope object within the controller object. This strategy requires $scope object to be injected.

Following is how view code looks like. Note the absence of “as” in the ng-controller directive and “ctrl.” alias in ng-model directive.

<div ng-controller="HelloCtrl">
    <input type="text" name="name" ng-model="name"/>
</div>

Following is how the controller looks like. Notice that $scope is injected and the model is bound to $scope object.

angular.module( "helloApp", [] )
    .controller( "HelloCtrl", [ '$scope', function( $scope ) {
        $scope.name = '';
    }]);

[adsenseyu1]

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

View Comments

  • another way is registering a controller using a $controllerProvider. Then use the $controller service to create it. You can pass the $scope as parameters to $controller service.

Share
Published by
Ajitesh Kumar
Tags: angularjs

Recent Posts

Large Language Models (LLMs): Four Critical Modeling Stages

Large language models (LLMs) have fundamentally transformed our digital landscape, powering everything from chatbots and…

4 days ago

Agentic Workflow Design Patterns Explained with Examples

As Large Language Models (LLMs) evolve into autonomous agents, understanding agentic workflow design patterns has…

5 days ago

What is Data Strategy?

In today's data-driven business landscape, organizations are constantly seeking ways to harness the power of…

6 days ago

Mathematics Topics for Machine Learning Beginners

In this blog, you would get to know the essential mathematical topics you need to…

1 month ago

Questions to Ask When Thinking Like a Product Leader

This blog represents a list of questions you can ask when thinking like a product…

1 month ago

Three Approaches to Creating AI Agents: Code Examples

AI agents are autonomous systems combining three core components: a reasoning engine (powered by LLM),…

1 month ago