如何在Controller中使用Angular服务 - 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

解

首先，我将代码包装成模块，如@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);
        }
     }; 
});