如何在控制器中使用角度服務 - TypeScript

Question

我正在嘗試使用打字稿來編寫angularjs，但我現在被卡住了。我有一個名爲AgeService的服務。該服務有一個名爲calculateAge的函數。即時通訊調用它到我的控制器，但我得到一個錯誤寫在下面。

SERVICE.TS

var servicesModule = angular.module('services', []); 
class AgeService { 
    static AngularDependency = [AgeService]; 
    constructor(private $scope: ng.IScope) { 

    } 
    public calculateAge(birthdate: string) { 
     var today = new Date(); 
     var dob = new Date(Date.parse(birthdate)); 

     var years = today.getFullYear() - dob.getFullYear(); 
     if (today.getMonth() < dob.getMonth() || (today.getMonth() == dob.getMonth() && today.getDate() < dob.getDate())) 
      years -= 1; 
     return years; 
    } 
} 

servicesModule.service('ageService', AgeService.AngularDependency) 

CONTROLLER.TS

var controllersModule = angular.module('controllers', []); 
class PersonController { 
    static AngularDependency = ['$scope', PersonController, 'ageService']; 

    constructor(private $scope: PersonScope, private ageService: AgeService) { 
     this.initController(); 
    } 

    private initController() { 
     this.$scope.name = 'Berkin'; 
     this.$scope.person = { 
      name: 'Berkin', 
      dob: '25-06-1995' 
     }; 
     this.$scope.person.age = this.ageService.calculateAge(this.$scope.person.dob); 
    } 

} 

controllersModule.controller('personController', PersonController.AngularDependency); 

HTML

<h4 ng-controller="personController">{{name}} {{person.age}}</h4> 

ERROR

謝謝...

Answer 1

SOLUTION

首先，我總結我的代碼到模塊，@Rahul說。

之後，我省略了「PersonController」變量到AngularDependency數組中。

將「服務」模塊導入到「控制器」模塊中以創建AgeService。

現在一切正常。

CONTROLLER.TS

module Application.Controller { 
import Services = Application.Services; 

class PersonController { 
     static AngularDependency = ['$scope', 'ageService']; 
     ageService: Application.Services.AgeService; 
     constructor(private $scope: PersonScope, ageService: Application.Services.AgeService) {   
      this.ageService = ageService; 
      this.initController(); 
     } 

     private initController() { 
      this.$scope.name = 'Berkin'; 
      this.$scope.person = { name: 'Berkin', dob: '01-01-1995' }; 
      this.$scope.person.age = this.ageService.calculateAge(this.$scope.person.dob); 
     } 
    } 
} 

SERVICES.TS

module Application.Services { 
    var servicesModule = angular.module('services', []); 

    export class AgeService { 
     static AngularDependency = [AgeService]; 

     public calculateAge(birthdate: string) { 
      var today = new Date(); 
      var dob = new Date(Date.parse(birthdate)); 
      var years = today.getFullYear() - dob.getFullYear(); 
      if (today.getMonth() < dob.getMonth() || (today.getMonth() == dob.getMonth() && today.getDate() < dob.getDate())) 
       years -= 1; 
      return years; 
     } 
    } 

    servicesModule.service('ageService', AgeService); 
} 

如果這些步驟是不夠的你，請告訴我。謝謝

Answer 2

App.filter('ageFilter', function() { 
    //<input type="text" ng-model="employee.birthday | ageFilter" class="form-control" disabled/> 
    function calculateAge(birthday) { // birthday is a 
     var birthday = new Date(birthday); 
     var NOW = Date.now(); 
     var ageDifMs = NOW - birthday.getTime(); 
     var ageDate = new Date(ageDifMs); // miliseconds from epoch 
     return Math.abs(ageDate.getUTCFullYear() - 1970); 
    } 
    function monthDiff(d1, d2) { 
     if (d1 < d2){ 
     var months = d2.getMonth() - d1.getMonth(); 
     return months <= 0 ? 0 : months; 
     } 
     return 0; 
    } 

    return function(birthdate) { 
     if(angular.isUndefined(birthdate) || birthdate instanceof Date){ return ""; }else{ 

      return calculateAge(birthdate); 
     } 
    }; 
});