Angularamd in typescript controller registering

Question

I am setting up a site in angular along with requirejs using typescript. I got it working to a point where i can load my controllers asynchronously and set a variabele in the scope which will hold my controller:

///<reference path="./../typings/tsd.d.ts" />
import App = require("../Start");

App.application.app.register.controller("AppController",($scope: ng.IScope) => {
    $scope["vm"] = new AppController($scope);
});


class AppController {

    public test: string = "tedast";
    constructor(scope: ng.IScope) {

    }
}

which compiles to javascript like so:

define(["require", "exports", "../Start"], function (require, exports, App) {
    App.application.app.register.controller("AppController", function ($scope) {
        $scope["vm"] = new AppController($scope);
    });
    var AppController = (function () {
        function AppController(scope) {
            this.test = "tedast";
        }
        return AppController;
    })();
});

And in my viewtemplate i can access the variabele test like so

{{ vm.test }}

As you can see i have to prefix everything with "vm." and it is starting to feel a bit inefficient. I would like to know if it is possible to just bind the controller in typescript to the view directly so i dont have to save it in the scope and prefix it with vm.

i have tried to simply:

<div ng-controller="AppController">
      {{ test }}
</div>

But that throws an error that it cant find appcontroller once my view loads.

Answer 1

I know its Try registering your controller after AppController class.

///<reference path="./../typings/tsd.d.ts" />
import App = require("../Start");


class AppController {

    public test: string = "tedast";
    constructor(scope: ng.IScope) {

    }
}

App.application.app.register.controller("AppController",($scope: ng.IScope) => {
    $scope["vm"] = new AppController($scope);
});