How can I convert my javascript AngularJS app controller to use Typescript?

Question

I already added the AngularJS definitions. Presently my app controller looks like this:

app.controller('appController',
    [
        '$scope',
        '$state',
        'utilityService',
        appController
    ]);

function appController(
    $scope: ng.IScope,
    $state,
    utilityService
    ) {

    var app = this;

    $scope.broadcast = function (val) {
        $scope.$broadcast('broadcast', val);
    };

    if (app.auth.user.isAuthenticated()) {
        app.state.text = null;
        $state.transitionTo('home.content', { content: 'overview' });
    } else {
        $state.transitionTo('authentication');
        // app.auth.loginData = app.cache.get('loginData');
        app.state.text = "Please Login ...";
    }

} 

Should I convert into a class if I want to take full advantage of TS and if so how do I handle the definition of functions like the broadcast function?

Answer 1

Here is the principle

app.controller('appController', AppController);

interface AppControllerScope extends ng.IScope{
    vm: AppController; 
}

class AppController{

    text: string;

    static $inject=[
        '$scope',
        '$state',
        'utilityService'
    ]
    constructor(
    public $scope: AppControllerScope,
    public $state,
    public utilityService: UtilityService
    ) {
        $scope.vm = this; 

        // NOTE: unclear what app is, perhaps its a service?
        if (app.auth.user.isAuthenticated()) {
            this.text = null;
            $state.transitionTo('home.content', { content: 'overview' });
        } else {
            $state.transitionTo('authentication');
            // app.auth.loginData = app.cache.get('loginData');
            this.text = "Please Login ...";
        }
    }

    broadcast = (val) => {
        this.$scope.$broadcast('broadcast', val);
    };
} 

Gist:

• You access the controller functions form the view using vm.something e.g. ng-click="vm.broadcast('tada')"
• Also use classes for services e.g. utilityService is an instance of UtilityService and you get typesafety. More: https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

More the use class as controller pattern : https://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

Answer 2

here is how i do

module protal{

   var app =angular.module('portal',[]);
   app.controller(controllers)          
}


module portal.controllers{


 // register any no of controllers here in this namespace
export class masterController{
    public fooFunc(){

    }
   static $inject=['$scope'];
    constructor($scope){
        $scope.vm=this;
    }

  }
}