AppGyver and Angular Controllers in Typescript 1.4

Question

I have issues with my angular controllers in AppGyver, since the constructor is never called. I am using the "controller as" syntax from angular, and I don't know if AppGyver is supporting it, since all his documentation is with the "$scope sintax", as far I see. This is my controller:

interface ILoginControllerScope extends ng.IScope {
    vm: LoginController;
}

interface ILoginController {
    Login(): any;
}

class LoginController implements ILoginController {
    static $inject: any = ['$scope', 'supersonic', 'steroids'];
    constructor(private $scope: ILoginControllerScope, private supersonic: any, private steroids: any) {
        this.supersonic.logger.log('This should be called');
        $scope.vm = this;

    }
    Login(): any {
    }
    static controllerId(): string {
        return 'loginController';
    }
 }

appUsers.controller(LoginController.controllerId(), LoginController);

And this is my view:

<div ng-controller="loginController as vm" class="padding">
   <div>

   </div>
    <div ng-hide="addonsUndefined">
        <h1 class="center">Caredfor</h1>
        <div class="center">
            <img class="logoSize" src="/images/logo.png">
        </div>

        <div>
           <button class="button button-block button-positive icon-left super-social-facebook" ng-click="vm.Login()">Sign in with Facebook</button>
        </div>
    </div>
</div>

Edit 1 The JS generated:

var LoginController = (function () {

    function LoginController($scope, supersonic) {
        this.supersonic = supersonic;
        supersonic.logger.log('This should be called');
        $scope.vm = this;

    LoginController.controllerId = function () {
        return 'loginController';
    };

    LoginController.prototype.Login = function () {
    };
    return LoginController;
})();

appUsers.controller(LoginController.controllerId(), LoginController);

score 0 · Answer 1 · answered Apr 30 '15 at 04:21

0

It looks mostly good. Here are some things to try:

Press F12 in the browser, and go to the Console tab, and see if there are any errors from Angular.

Instead of this:

static $inject: any = ['$scope', 'supersonic', 'steroids'];
constructor(private $scope: ILoginControllerScope, private supersonic: any, private steroids: any) {
    this.supersonic.logger.log('This should be called');
    $scope.vm = this;
}

try this:

    constructor() {
        var i:number = 7;
    }

In your browser, put a breakpoint on that line and see if it gets hit. If it does, then one at a time, put your constructor parameters back in, and see which is causing it to break. I have a suspicion that your ILoginControllerScope parameter is causing issues, because the dependency injection doesn't know how to instantiate one of those. It seems to me that you don't really need that, and you can just go with the vanilla ng.IScope instead. ILoginControllerScope isn't adding any value. Why do you need a separate class to store a reference to the controller?

answered Apr 30 '15 at 04:21

Rajeev Goel

1,395
8
8

I need the ILoginControllerScope because I have to extend the interface IScope to add the new property vm (since Typescript is typed), this style of code worked perfectly for me in regular browsers. I opened the browser console to see if I have any errors on the AppGyver Connect, and I see one related with an Infinite $digest Loop. Thanks for your help – dante_dubon Apr 30 '15 at 04:56
Okay, do what you feel is right. But I still don't think you need ILoginControllerScope. In your HTML, when you specify "loginController as vm", that already gives you a "vm" variable that you can use to access the properties of your controller. You don't need to separately store a reference to your controller inside your IScope. – Rajeev Goel Apr 30 '15 at 13:49
Well, it's only a syntactic sugar, in the end the generated JS doesn't have it, and the JS is what AppGyver is using. I copy the generated JS on my Edit 1 – dante_dubon Apr 30 '15 at 14:27

AppGyver and Angular Controllers in Typescript 1.4

1 Answers1