Pure Controller objects

Question

In AngularJS, a Controller itself is an object defined by a Javascript constructor function and this constructor function is a callback to .controller method.

var myapp=angular.module('scopeExample', []);
myapp.controller('MyController',function MyController($scope){
  $scope.name="john";
  this.num=700;
});

In the above example, MyController is the constructor function which creates the Controller object with one property (num). I have three queries upon that:

Actually, what is the use of the Controller object in that case?
Does it have some more properties not visible and is it accessible from outside Angular?
How it is interconnected to its scope which in turn is another object?

I came upon the following queries because of the controller as syntax which creates a controller object that is a property of controller's scope and therefore easily accessible, e.g.

<div ng-app="scopeExample" ng-controller="MyController as ctrl">
    <input id="box" ng-model="ctrl.num"> equals {{ ctrl.num }}   
</div>

<script> 
angular.module('scopeExample', [])
.controller('MyController', [function () {
     this.num=12;
}]);
</script>     

var x=angular.element('#box').scope().ctrl;    //x is the controller object itself

score 1 · Answer 1 · edited May 23 '17 at 12:07

1.a. What is the use of the Controller object in that case?

There is nothing special about this example, angular is an MVC framework(or any other buzz word you wish to use that describes almost the same thing), the controller's responsibility is to response to view events, update the model accordingly and execute business logic tasks (you can choose where to actually implement the logic, wheres in the controller itself or use services).

Of course that in this example the controller is pretty useless, because you have no logic, and only 2 proprieties.

1.b. Specking of ctrl-as syntax, in your example you injected 'scope' into the controller and added property ($scope.name), when you're using controller as it is recommended for you to avoid using scope unless you are obligated to do so. (e.g. $watch, parent...)

2.a. Does it have some more properties not visible?

No it doesn't have any invisible properties, you can check it easily by your self with the following code:

.controller('MyController', function () { window.DoesThisControllerHaveInvisibleProps = this; });

2.b. is it accessible from outside Angular?

I'm not sure that I fully understood what you've meant with "outside Angular", if so here is an example that the controller obj can be accessible from "outside":

class MyController {
    static foo() {
        console.log('hello!');
    }
}

myapp.controller('MyController', MyController);
// maybe somewhere else in that module
MyController.foo();

3.How it is interconnected to its scope which in turn is another object?

As you said, when using controller as syntax angular is initializing the controller and put it on the $scope so it will be accessible in the template.

$scope is just an unnecessary glow and you should avoid using it. my way of seeing it is like it was angular implantation details, when migrating to ng-2 you will see that there is no more scope.

If you're interested in more detailed info about how exactly $scope and controllers in angular are working I suggest you have a look at

Pure Controller objects

1 Answers1