Javascript AngularJS uygulama denetleyicimi Typescript kullanacak şekilde nasıl dönüştürebilirim?

AngularJS tanımlarını zaten ekledim. Şu anda uygulama denetleyicim şöyle görünüyor:

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

}

TS'den tam anlamıyla faydalanmak istiyorsam sınıfa mı dönüştürmeliyim ve öyleyse broadcast fonksiyonu gibi fonksiyonların tanımını nasıl ele almalıyım?

Cevap #1

İşte ilke

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

Öz:

  • View üzerinden kontrolcü fonksiyonlarına vm.something kullanarak erişirsiniz, örneğin ng-click="vm.broadcast('tada')"
  • Ayrıca servisler için sınıfları kullanın, örneğin utilityService, UtilityService sınıfının bir örneğidir ve tip güvenliği elde edersiniz. Daha fazlası: https://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

Daha fazla sınıfı kontrolör olarak kullan deseni: https://www.youtube.com/watch?v=WdtVn_8K17E&hd=1

Cevap #2

işte nasıl yapıyorum

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

  }
}

İlgili makaleler