Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS – Different Ways to Declare Controllers

DZone's Guide to

AngularJS – Different Ways to Declare Controllers

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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 = '';
    }]);


What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
java ,html5 ,javascript ,tips and tricks ,angular js

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}