CODEWITHSUNDEEP
javascriptangularjs
StrugglingCoder
StrugglingCoder

Reputation: 5011

This keyword in Angular Controller

I just may get bombarded for asking such a silly question but it is more of a question that will help to make my understanding clear.

So in JavaScript, 

  var firstName = "Peter",
    lastName = "Ally";

    function showFullName () {
    // "this" inside this function will have the value of the window object
    // because the showFullName () function is defined in the global scope, just like the firstName and lastName
    console.log (this.firstName + " " + this.lastName);
    }

    var person = {
    firstName   :"Penelope",
    lastName    :"Barrymore",
    showFullName:function () {
    // "this" on the line below refers to the person object, because the showFullName function will be invoked by person object.
    console.log (this.firstName + " " + this.lastName);
    }
    }

    showFullName (); // Peter Ally​
​
    // window is the object that all global variables and functions are defined on, hence:​
    window.showFullName (); // Peter Ally​

This is clear to me. Now inside an Angular controller, when we try to replicate this, 

<script>
var app = angular.module("myApp", []);
console.log("Before Controller",this);
app.controller("myCtrl", function($scope) {
    console.log(this);
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    this.myTestFunction = function(){
        return this;
    }

    console.log("In test function ",this.myTestFunction());
});
</script>

The second line still should log window right as the controller function is defined in the global scope (I suppose). But in turn, it returns an Object. Why ?

Also , Can I use this.myTestFunction without using a ControllerAs syntax. What is the difference between two?

Why the last line also logsobject(In myTestFunction) when I am just simply returning this from within?

I am not sure about all of these. Could someone explain in simple terms?

Before Controller Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
VM2143 tryit.asp?filename=try_ng_module:5 Object {}
VM2408 tryit.asp?filename=try_ng_module:12 In test function  Object {myTestFunction: function}

Upvotes: 0

Views: 803

Answers (2)

AndreaM16
AndreaM16

Reputation: 3975

The second line still should log window right as the controller function is defined in the global scope (I suppose). But in turn, it returns an Object. Why ?

In AngularJs Controllers, Services, Factories etc, this keyword is definitely your controller/module itself. In facts, when a Module Constructor is called, this is the module itself. In few words, this on a Controller is an Object containing all of controller's functions and variables. If a Controller MyController is bound to a view MyView.html then only that precise view can access to MyController's variables and functions.

Also , Can I use this.myTestFunction without using a ControllerAs syntax. What is the difference between two?

No, you can't use this without using ControllerAs syntax. Let's suppose you have 

angular.module('myApp')
       .controller('MyController', MyController);

function MyController(){
   var vm = this;
   vm.hello = 'Hello There!';
}

And

<body ng-controller="MyController as myCtrl">
  <p>{{myCtrl.hello}}</p>
</body>

It would nicely render Hello There!.

Why the last line also logsobject(In myTestFunction) when I am just simply returning this from within?

Simply because, as said before, this is an object containing all the variables and functions instantiated inside the controller itself.

Extra

You should prefer using this instead of $scope inside your controller. There are few reasons for that. One of them is that when you define a function using this then you know for sure that this particular function is accessible to a given view or to a given module. Take a look at Angular Style Guide by John Papa on Controllers.

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

the reason why last console log show object object is that you try to concatenate object to a string. remove the string and just show the function response.

console.log(this.myTestFunction());

as for the 2nd question you can not access the this.myTestFunction in html without using the controller as function. without it, angular can only identify the scope functions in the controller.

var app = angular.module("myApp", []);
console.log("Before Controller",this);
app.controller("myCtrl", function($scope) {
    console.log(this);
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    this.myTestFunction = function(){
        return this;
    }

    console.log("In test function ",this.myTestFunction());
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 
</div>

Upvotes: 1

Related Questions