AngularJS Filter with TypeScript and Injection

Question

Can someone provide me an example of how I can create an Angular filter in TypeScript that uses dependency injection. At the bottom is what I have now, which works fine, but I want it to be a function in which I want to access the $ filter, so that I can change the return date of the string. ToString () in $ filter 'Date'. So I use the built-in date filter to show a nice friendly short date.

class FriendlyDateFilter { public static Factory() { return function (input): string { if (angular.isDate(input)) { var date: Date = input; var today = new Date(); var days = Math.abs(getDaysBetweenDates(today, date)); if (days < 7) { var dayInWeek = date.getDay(); switch (dayInWeek) { case 0: return "Sunday"; break; case 1: return "Monday"; break; case 2: return "Tuesday"; break; case 3: return "Wednesday"; break; case 4: return "Thursday"; break; case 5: return "Friday"; break; case 6: return "Saturday"; break; } } else { return date.toString(); } } else { return input; } } function getDaysBetweenDates(d0, d1) { var msPerDay = 8.64e7; // Copy dates so don't mess them up var x0: any = new Date(d0); var x1: any = new Date(d1); // Set to noon - avoid DST errors x0.setHours(12, 0, 0); x1.setHours(12, 0, 0); // Round to remove daylight saving errors return Math.round((x1 - x0) / msPerDay); } } } } angular.module("ReadingLog").filter("FriendlyDateFilter", FriendlyDateFilter.Factory); 

Answer 1

In general, it is better to use function + module instead of class when writing an Angular filter. You can structure the code as follows:

 function FriendlyDateFilter($filter) { return function (s: string): string { /* Your logic here */ } /* Helper logic here */ } module FriendlyDateFilter { export var $inject = ['$filter']; } angular.module("ReadingLog").filter("FriendlyDateFilter", FriendlyDateFilter); 

You can also place FriendlyDateFilter declarations inside another module if you are trying to avoid adding too much to the global scope.

Answer 2

First you need to use angular.d.ts .

Then you simply do the following:

 MyFilter.$inject = ["$log"]; function MyFilter ($log: ng.ILogService): Function { return function(msg: string) { $log.log("I'm injected!"); return msg; }; } angular.module("testModule").filter("MyFilter", MyFilter); 

$inject property is available in Function thanks to these lines in angular.d.ts :

 // Support for painless dependency injection interface Function { $inject?: string[]; } 

See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/angularjs/angular.d.ts#L12

Answer 3

I had the same problem when writing my own DI system for AngularJs 1.3 and Typescript. To solve this problem, I wrote a decorator that takes a class that implements the following interface:

 interface IFilter { filter(value?: any, ...args): any; } 

and it registers a filter with the following code:

 var filterFactory = (...args) => { var filterObject = new target(...args); if (typeof filterObject.filter === 'function') { return filterObject.filter.bind(filterObject); } console.warn('Invalid filter: filter() method not found for:', filterName) return function() { }; //dummy filter, so it won't break everything }; var constructorArray: Array<any> = injector.resolveParamNames(target); app.filter(filterName, constructorArray.concat(filterFactory)); 

My library uses a custom version of the TypeScript compiler that can generate interface metadata that injector.resolveParamNames uses to create a classic array of constructors like this: ['$q', '$timeout', FilterFactory]

You can find my project here , and a sample filter here

Answer 4

You can use classes to enter dependencies, just use [] in the module and use the injection method as shown below:

 module Filters { export class MyFilter { public static Factory(injectableService: InjectableService) { return function (input:any) { // use injectableService to affect your input in desired way return input; } } } angular.module('app') .filter('myFilter', ['injectableService', MyFilter.Factory]);