CODEWITHSUNDEEP
javascriptangularjs
user4982150
user4982150

Reputation:

How controller components are instantiated in AngularJS?

This is my controller. 

angular.module('homePage').controller('buttonViewCtrl',  [function() {
    console.log(this);
    this.buttonDisplay = false;
    console.log(this);

    this.nav = function() {
        console.log(this);  //returns Object {buttonDisplay: false}
        //console.log(JSON.stringify(this));
        this.buttonDisplay = true;
    };

    this.closeNav = function() {
        console.log(this); //returns Object {buttonDisplay: true}
        //console.log(JSON.stringify(this)); 
        this.buttonDisplay = false;
    };
}])

The first console.log method logs an empty object.

The second console.log method logs the controller object with a property buttonDisplay added to it. enter image description here

The third console.log method (in nav()) logs the controller object with all its methods like so: enter image description here

The fourth console.log method logs the same object with the buttonDisplay property changed.

enter image description here

I have two questions.

1) From this example, as per my understanding, when Angular sees a controller definition it declares an empty object. It then attaches properties to the object as they are executed. My question is that how come when the nav() method is triggered, it detects that there are other methods in the controller and attaches them to the controller object too (closeNav() in this case). The behavior I expected was it to attach only the nav() method when it was triggered, and when closeNav() would be triggered it would attach that too to the controller object. As you can see though, in figure 3, Angular has attached closeNav() to the controller without it being triggered. How is Angular doing this?

2) According to the best practices of Angular, we should not manipulate the DOM in the controller. In my controller, the nav() function dispalys a navigation bar template and the closeNav() function closes it. Is this considered as DOM manipulation? Am I adding too much presentation logic in my controller?

Upvotes: 0

Views: 224

Answers (1)

plamut
plamut

Reputation: 3206

1) From this example, as per my understanding, when Angular sees a controllerdefinition it declares an empty object.

Actually no, Angular just remembers that a controller has been registered under some name. The controller is instantiated when Angular determines that it is needed, e.g. when encountering a DOM node with the ng-controller="..." directive. At that point it calls new ControllerFunction(...), passing in all of its declared dependencies as arguments.

The first two console.log() calls thus execute while the controller is still being initialized, and that's the reason you don't see all of its members there yet.

2) According to the best practices of Angular, we should not manipulate the DOM in the controller. In my controller, the nav() function dispalys a navigation bar template and the closeNav() function closes it. Is this considered as DOM manipulation?

No, it isn't, that's perfectly fine. After all it's controller's job to provide all the data the view (template) needs. Direct DOM manipulation would be if you, for example, start creating new DOM elements, directly manipulating their attributes, registering event handlers on them, etc. (that kind of stuff belongs to directives).

Upvotes: 1

Related Questions