Angular-TypeScript

TypeScript 1.7+ annotations (decorators) for AngularJS 1.5

What ?

angular-typescript provides annotation like decorators:

@at.service(moduleName: string, serviceName: string)
@at.inject(dependencyOne: string, ...dependencies?: string[])
@at.controller(moduleName: string, controllerName: string)
@at.directive(moduleName: string, directiveName: string, directiveConfig?: angular.IDirective)
@at.resource(moduleName: string, resourceClassName: string)
@at.provider(moduleName: string, providerName: string)
@at.filter(moduleName: string, filterName: string)
@at.filter(moduleName: string, filterName: string)
@at.component(moduleName: string, componentName: string, componentConfig?: angular.IComponentOptions)
@at.valueObj(moduleName: string, valueName: string)
@at.valueProp(moduleName: string, valueName?: string)
@at.valueFunc(moduleName: string, valueName?: string)
@at.constantObj(moduleName: string, valueName: string)
@at.constantProp(moduleName: string, valueName?: string)
@at.constantFunc(moduleName: string, valueName?: string)

Why ?

Purpose of those decorators is to remove some ugly boilerplate from AngularJS applications written in TypeScript and in the same time promoting use a programming model as close as possible to AngularJS 2

How ?

Service

Now one have to:

classSomeService{constructor(){// do stuff $http and $parse}publicsomeMethod(anArg: number): boolean{// do some stuff}}angular.module('ngModuleName').service('someService',SomeService);

Using angular-typescript it will look like:

@service('ngModuleName','someService')classSomeService{constructor(){// do stuff}publicsomeMethod(anArg: number): boolean{// do some stuff}}

---

Inject

@service('ngModuleName','someServiceName')classSomeService{constructor(
@inject('$http')$http: angular.IHttpService,
@inject('$parse')private$$parse: angular.IParseService){// do stuff with $http and $$parse;}publicsomeMethod(anArg: number): boolean{// do some stuff with this.$$parse}}

or

@service('ngModuleName','someServiceName')
@inject('$http','$parse')classSomeService{constructor($http: angular.IHttpService,private$$parse: angular.IParseService){// do stuff with $http and $$parse;}publicsomeMethod(anArg: number): boolean{// do some stuff with this.$$parse();}}

---

Controller

@controller('ngModuleName','SomeController')classSomeController{constructor(
@inject('$scope')$scope: angular.IScope,
@inject('$parse')private$$parse: angular.IParseService){// do stuff with $scope and $$parse;}publicsomeMethod(anArg: number): boolean{// do some stuff with this.$$parse();}}

---

Component

@at.component(moduleName,'featureTest',{template: ()=>'<span>{{ $ctrl.test }}</span>'})
@at.inject('$log')exportclassFeature1Componentimplementsat.IComponent{publictest='Feature1Component';publicstatictemplate: angular.IComponentTemplateFn=()=>{return'<span>{{ $ctrl.name }}</span>';};constructor(privatelog: angular.ILogService){log.debug('Feature1 constructor');}public$onInit(): void{this.log.debug('Feature1 $onInit');}}

---

Filter

mportngModuleNamefrom'./example.module';'use strict';constngFilterName='example';
@at.filter(ngModuleName,ngFilterName)
@at.inject('$log')exportdefaultclassExampleFilterimplementsat.IFilter{constructor(privatelog: angular.ILogService){log.debug(['ngFilter',ngFilterName,'loaded'].join(' '));}publictransform=(input: string|Array<any>): number=>!input ? 0 : input.length;}

---

Provider

importngModuleNamefrom'./example.module';'use strict';// the provider will be available as 'sampleProvider'// the created service will be available as 'sample'constngProviderName='sample';interfaceIExampleProviderextendsangular.IServiceProvider{makeNoise(value: boolean): void;}
@at.provider(ngModuleName,ngProviderName)exportclassExampleProviderimplementsIExampleProvider{privatenotify=true;constructor(){this.notify=true;}publicmakeNoise(value: boolean): void{this.notify=value;}// $get must be declared as method, not as function property (eg. `$get = () => new Service();`)
@at.injectMethod('$log')public$get(log: angular.ILogService){returnnewExampleProviderService(log,this.notify);}}exportdefaultclassExampleProviderService{constructor(privatelog: angular.ILogService,privatenotify: boolean){lets=['ngProvider',ngProviderName,'has loaded an','ExampleProviderService'].join(' ');if(notify)log.info(s);elselog.debug(s);}}

---

Directive

importngModuleNamefrom'./message.module';'use strict';constngDirectiveName='tsfnMessageSection';
@at.directive(ngModuleName,ngDirectiveName,{restrict: 'E',scope: {},bindToController: {title: '@',theme: '@',messages: '='},templateUrl: 'message/message-section.directive.html'})exportdefaultclassMessagesSectionDirective{}

---

Resource

It encapsulates magic powers of angular $resource. $resource configs are gathered from static class members.

@resource('test','UserResource')
@inject('$http','$parse')classUserResourceextendsat.Resource{publicstaticurl: string='/fake/url';publicname: string;publicage: number;private$$http: angular.IHttpService;private$$parse: angular.IParseService;constructor(model?: ITestModel){if(model){this.name=model.name;this.age=model.age;}}publicgetLabel(): string{return`${this.name}-${String(this.age)}`;}}

---