CODEWITHSUNDEEP
javascriptangularjstypescript
thomacco
thomacco

Reputation: 181

Best practice writing AngularJS controller in Typescript

I am really new to AngularJS and Web Development and more experienced in C# and C++. Because of that I try to use Typescript.

I am working on a controller right now and got some strange behavior. When using the login-function like in the code below a have the problem, that the services sessionService and userDataService are not defined inside the then-statement. It is accessible before and after the then.

class UserController {
  scope: UserControllerScope;
  location: ng.ILocationService;
  sessionService: SessionService;
  userDataService: UserDataService;

  constructor($scope: UserControllerScope,
              $location: ng.ILocationService,
              userDataService: UserDataService,
              sessionService: SessionService){
    this.scope = $scope;
    this.location = $location;
    this.userDataService = userDataService;
    this.sessionService = sessionService;
  }

  loginUser(username: string, pw: string) {
    var foundUser;
    console.log(this.sessionService);
    console.log(this.userDataService);
    console.log("Got into LoginUser");

    this.userDataService.getUserAsync(username, pw).then(function(foundUserFromDb) {
      console.log(this.sessionService);
      console.log(this.userDataService);
    });

    console.log(this.sessionService);
    console.log(this.userDataService);
    this.location.path("views/projects.html")
  }
}

Is there a way the custom services needs to be injected so that they can be access everywhere in the class or do you have better ways to deal with the injection of services and controllers?

Thanks in advance.

Upvotes: 0

Views: 1392

Answers (1)

Anthony Chu
Anthony Chu

Reputation: 37520

this in the context of then() isn't the controller. You have to capture this into another variable like self. TypeScript will do this for you if you use arrow functions...

loginUser = (username: string, pw: string) => {
    var foundUser;
    console.log(this.sessionService);
    console.log(this.userDataService);
    console.log("Got into LoginUser");

    this.userDataService.getUserAsync(username, pw).then(foundUserFromDb => {
        console.log(this.sessionService);
        console.log(this.userDataService);
    });

    console.log(this.sessionService);
    console.log(this.userDataService);
    this.location.path("views/projects.html")
}

The compiled JavaScript should look something like this...

var _this = this;
this.loginUser = function (username, pw) {
    var foundUser;
    console.log(_this.sessionService);
    console.log(_this.userDataService);
    console.log("Got into LoginUser");

    _this.userDataService.getUserAsync(username, pw).then(function (foundUserFromDb) {
        console.log(_this.sessionService);
        console.log(_this.userDataService);
    });

    console.log(_this.sessionService);
    console.log(_this.userDataService);
    _this.location.path("views/projects.html");
};

Upvotes: 3

Related Questions