Question

在C＃中，建议避免在构造函数中加载数据。相反，实例化一个类，然后在需要执行诸如从数据库加载数据之类的操作时创建一个方法。在使用TypeScript的AngularJS中，是通过构造函数在控制器中加载方法的唯一方法吗？即，下面的代码不能在TypeScript中编译。那是因为我必须从构造函数调用activate吗？

class BaHomeController{
    entries: any[];    
    static $inject = ["$http"];

    constructor(
        private $http
    ){}

    private loadEntries() {
        this.$http.get("api/blogEntries").then(function(response) {
            this.entries = response.data;
        });
    }

    private activate(): void{
        this.loadEntries();
    }

    activate();   
}

Answer 1

你的格式化对我来说可能搞砸了或许这种格式会让事情变得更清晰。你也不能在类声明中调用activate，就像你没有那样，这就是你没有编译的原因。

class BaHomeController{
    // private field
    entries: any[];

    static $inject = ["$http"];    
    constructor(private $http)
    {
        //This is calling the private activate method in the constructor
        this.activate();  
    }
    //private method
    private loadEntries() 
    {
        this.$http.get("api/blogEntries").then(function(response) {
            this.entries = response.data;
        });
    }
    //private method that return void
    private activate(): void
    {
        this.loadEntries();
    }     
}

Answer 2

您还可以解析路线中的数据：

angular.module('app.something')
    .config(routing);

routing.$inject = ['$stateProvider'];
function routing(stateProvider: angular.ui.IStateProvider) {
    stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'scripts/home/home.html',
            controller: 'app.something.BaHomeController',
            controllerAs: 'vm',
            resolve: {
                entries: loadEntries
            }
        })
}
function loadEntries() {
    //Make call to entries service
    return entriesService.getEntries(); //Make the http call in the service and also deal with the promise there.
}

您的控制器

class BaHomeController{

static $inject = ["$http"];    
constructor(private $http: ng.IHttpService,
            public entries: any){ }

}

另一种方法是在控制器中使用init函数并从html中调用它，以便在页面加载时调用它

class LayoutController {

    dataModel: app.layout.TopSearchHtmlDataModel;
    vehicleSearchModel: app.layout.VehicleSearchModel;

    static $inject = [
        'app.services.SlideService',
        'app.services.VehicleService',
        'app.services.CommonUtils',
        '$rootScope',
        '$filter',
        '$state'
    ];

    constructor(
        private slideService: app.services.SlideService,
        private vehicleService: app.services.VehicleService,
        private commonUtils: app.services.CommonUtils,
        private $rootScope: ng.IRootScopeService,
        private $filter: any,
        public $state: ng.ui.IStateService) {

        this.dataModel = new app.layout.TopSearchHtmlDataModel();
        this.vehicleSearchModel = new app.layout.VehicleSearchModel();
    }

    init(): void {
        this.getAllMakeAndModelData();
        this.getIrishCounties();
        this.getMinYearArray();
        this.getLogoSlides();
    }
    //Private methods omitted
}

html:
    <div ng-init="vm.init()"></div> //assuming you use controllerAs vm

Answer 3

无论如何，对数据的调用将是异步的，因此将调用放在构造函数中似乎没什么大不了的。

你试过这个吗？

   constructor(){
        this.loadEntries();
   }

请注意loadEntries内回调的异步性质意味着您的控制器将存在this.entries未定义，直到$http.get调用成功返回

无法在类的主体中编写JavaScript

3 个答案: