Globally defined AngularJS controllers and encapsulation

Question

According to AngularJS's tutorial, a controller function just sits within the global scope.

http://docs.angularjs.org/tutorial/step_04

Do the controller functions themselves automatically get parsed into an encapsulated scope, or do they dwell within the global scope? I know that they are passed a reference to their own $scope, but it appears that the function themselves are just sitting in the global scope. Obviously this can cause problems down the road, and I have learned through experience and education to encapsulate Further more, if they do dwell within the global scope, would it not be considered a best practice to encapsulate them within an object to be referenced like this:

    Object.functionName();

Rather than this:

    functionName();

So as to prevent issues that occur with the pollution of the global scope (ie overriding functions, etc..)

pkozlowski.opensource · Accepted Answer · 2012-11-13 15:23:11Z

53

AngularJS supports 2 methods of registering controller functions - either as globally accessible functions (you can see this form in the mentioned tutorial) or as a part of a modules (that forms a kind of namespace). More info on modules can be found here: http://docs.angularjs.org/guide/module but in short one would register a controller in a module like so:

angular.module('[module name]', []).controller('PhoneListCtrl', function($scope) {

  $scope.phones = [..];

  $scope.orderProp = 'age';
});

AngularJS uses a short, global-function form of declaring controllers in many examples but while this form is good for quick samples it rather shouldn't be used in real-life applications.

In short: AngularJS makes it possible to properly encapsulate controller functions but also exposes a simpler, quick & dirty way of declaring them as global functions.

answered Nov 13, 2012 at 15:23

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andrew Rhyne Over a year ago

Thanks! This is exactly the type of explanation I was looking for. Keep up the good work!

maxisam Over a year ago

There are tons of things should be mentioned in the docs lol. I guess this is the kinda the fun part of learning AngularJS, just like treasure hunting.

Andrew Rhyne Over a year ago

The Docs are inadequate because it's still new; atleast thats what I am assuming. I really hope they begin writing thorough documentation because there is a whole ton missing from their docs. They don't have all of the available functions listed in the API!

Neil Over a year ago

Does this also get around the minification issues?

pkozlowski.opensource Over a year ago

No, minification concerns are orthogonal. For minification you need to use the array-style notation: docs.angularjs.org/guide/di and the code example here: github.com/angular-app/angular-app/blob/master/client/src/app/…

|

Community · Accepted Answer · 2017-05-23 11:52:33Z

You can register a controller as part of a module, as answered by pkozlowski-opensource.

If you need minification you can simply extend this by providing the variable names before the actual function in a list:

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function($scope) {

    $scope.phones = [..];
    $scope.orderProp = 'age';
  }]);

This will work the same after "minification":

angular.module('[module name]', []).
  controller('PhoneListCtrl', ['$scope', function(s) {

    s.phones = [..];
    s.orderProp = 'age';
  }]);

This notation can be found under "Inline Annotation" at Dependency Injection.

To test a controller, that has been registered as part of a module, you have to ask angular to create your controller. For example:

describe('PhoneListCtrl test', function() {
  var scope;
  var ctrl;

  beforeEach(function() {
    module('[module name]');
    inject(function($rootScope, $controller) {
      scope = $rootScope.$new();
      ctrl = $controller('[module name]', {$scope: scope});
    });
  });

  it('should be ordered by age', function() {
    expect(scope.orderProp).toBe('age');
  });

});

This method of testing the controller can be found under "Testing Controllers" at Understanding the Controller Component.

Collectives™ on Stack Overflow

Globally defined AngularJS controllers and encapsulation

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related