Best practice writing AngularJS controller in Typescript

Question

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.

How are you creating the controller? Are you minifying your JavaScript? How are you registering your services? Also instead of saying this.scope = $scope you can just change the constructor parameter to public $scope: UserControllerScope but that's not what is causing your issue. — rob
– rob, Commented Feb 18, 2014 at 19:31
Thanks for the comment. The answer of Anthony Chu lend me to the problem. It was using "this" directly in then-context. — thomacco
– thomacco, Commented Feb 19, 2014 at 7:45

Anthony Chu · Accepted Answer · 2014-02-18 19:46:59Z

3

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");
};

edited Feb 18, 2014 at 19:46

answered Feb 18, 2014 at 19:40

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

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

1 Comment

thomacco Over a year ago

Thanks for your help. I must have overseen that this changes in the then-context. Now it works perfectly.

Collectives™ on Stack Overflow

Best practice writing AngularJS controller in Typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related