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

Question

I have already added AngularJS definitions. Currently, my application controller is as follows:

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 to a class if I want to make full use of TS, and if so, how do I handle the definition of functions, such as a 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);
    };
} 

Hist:

• Access to the functions of the controller is carried out using vm.something, for example.ng-click="vm.broadcast('tada')"
• , . utilityService - utilityService, . : https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

: https://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

Answer 2

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

  }
}