gulp-typescript-angular
gulp plugin for class-based development in AngularJS with TypeScript. This make TypeScript classes add AngularJS registration codes.
Motivation
AngularJS and TypeScript works well with each other. TypeScript is good langulage for class-based programing.
But TypeScript class codes must have glue codes to work with AngularJS. This gulp plugin can remove the glue codes by to add generated angularjs code using gulp script.
Usage
Install
Install with npm
$ npm install gulp-typescript-angular
1.Decorator Mode (TypeScript ~1.5)
Decorator,which is new feature of TypeScript 1.5, is called after class declartion. It can remove glue codes to register angular component. But it can't handle paramters. so gulp-typescript-angular add $inject Property Annotation to annotated-classes.
1.1 create decorator functions
Create 4 decoratar functions (Controller,Service,Provider,Decorator) to register angular component.
1.2 modify gulpfile.js
Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify decoratorModuleName option to your angular module name.
var gulp = ; var typescript = ;var typescriptAngular = ; gulp;
Options
- decoratorModuleName : Decorator Module Name
1.3 Examples
1.3.1 Controller
If class is annotated by @sample.Controller
, gulp-typescript-angular add $inject parameter annotation code,SampleController.$inject = ['$scope'];SampleController.$componentName = 'SampleController'
,after class constructor declaration.
TypeScript
Compiled JavaScript
var __decorate = this__decorate || { var kind = typeof argumentslength == 2 ? value = target : value; for var i = decoratorslength - 1; i >= 0; --i var decorator = decoratorsi; return value;};var sample; { var SampleController = { { this$scope = $scope; }/*<auto_generate>*/SampleController$inject = '$scope';SampleController$componentName = 'SampleController'/*</auto_generate>*/ SampleController = ; return SampleController; };}sample || sample = {};
1.3.2 Service
If class is annotated by @sample.Service
, gulp-typescript-angular add $inject parameter annotation code,SampleService.$inject = ['$q'];SampleService.$componentName = 'sampleService'
,after class constructor declaration.
TypeScript
Compiled JavaScript
var __decorate = this__decorate || { var kind = typeof argumentslength == 2 ? value = target : value; for var i = decoratorslength - 1; i >= 0; --i var decorator = decoratorsi; return value;};var sample; { var SampleService = { { this$q = $q; }/*<auto_generate>*/SampleService$inject = '$q';SampleService$componentName = 'sampleService'/*</auto_generate>*/ SampleService = ; return SampleService; };}sample || sample = {};
1.3.3 Provider
If class is annonated by @sample.Provider
, gulp-typescript-angular add $inject parameter annotation code,/<auto_generate>/SampleManagerProvider.$inject = ['$q'];SampleManagerProvider.$componentName = 'sampleManager'/</auto_generate>/
, after class constructor declaration.
TypeScript
Compiled JavaScript
var __decorate = this__decorate || { var kind = typeof argumentslength == 2 ? value = target : value; for var i = decoratorslength - 1; i >= 0; --i var decorator = decoratorsi; return value;};var sample; { var SampleManagerProvider = { { }/*<auto_generate>*/SampleManagerProvider$inject = '$q';SampleManagerProvider$componentName = 'sampleManager'/*</auto_generate>*/ SampleManagerProviderprototype { return this; }; SampleManagerProvider = ; return SampleManagerProvider; }; var $SampleManager = { { thisprovider = provider; } return $SampleManager; };}sample || sample = {};
1.3.4 Directive
If class is annonated by @sample.Directive
, gulp-typescript-angular add $inject parameter annotation,SampleDirective.$inject = ['$compile'];SampleDirective.$componentName = 'sample'
, after class constructor declaration.
TypeScript
Compiled JavaScript
var __decorate = this__decorate || { var kind = typeof argumentslength == 2 ? value = target : value; for var i = decoratorslength - 1; i >= 0; --i var decorator = decoratorsi; return value;};var sample; { var SampleDirective = { { this$compile = $compile; thisrestrict = 'A'; thistemplateUrl = '/sample.html'; thisscope = text: '=' ; }/*<auto_generate>*/SampleDirective$inject = '$compile';SampleDirective$componentName = 'sample'/*</auto_generate>*/ SampleDirectiveprototype { }; SampleDirective = ; return SampleDirective; };}sample || sample = {};
2. Naming Rule Mode
2.1 modify gulpfile.js
Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify moduleName option to your angular module name.
var gulp = ; var typescript = ;var typescriptAngular = ; gulp;
Options
- moduleName : AngularJS Module Name
2.2 Examples
2.2.1 Controller
If class name matches /Controller$/
or /Ctrl$/
, gulp-typescript-angular add controller registration code,angular.module('sample').controller('sampleController',['$scope',SampleController]);
,after class declaration.
TypeScript
Compiled JavaScript
var sample; { var SampleController = { { this$scope = $scope; } return SampleController; };angular;}sample || sample = {};
2.2.2 Service
If class name matches /Service$/
or /Manager$/
, gulp-typescript-angular add service registration code,angular.module('sample').service('sampleService',['$q',SampleService]);
, after class declaration.
TypeScript
Compiled JavaScript
var sample; { var SampleService = { { this$q = $q; } return SampleService; };angular;}sample || sample = {};
2.2.3 Provider
If class name matches /Provider$/
, gulp-typescript-angular add provider registration code,angular.module('sample').provider('sampleManager',[SampleManagerProvider]);
, after class declaration.
If class name start with '$', gulp-typescript-angular don't add the angularjs registration code.
TypeScript
Compiled JavaScript
var sample; { var SampleManagerProvider = { { } SampleManagerProviderprototype { return ; }; return SampleManagerProvider; };angular; var $SampleManager = { { } return $SampleManager; };}sample || sample = {};
2.2.4 Directive
If class name matches /Directive$/, gulp-typescript-angular add directive instantination function,angular.module('sample').directive('sample',['$compile',function(){return new SampleDirective(arguments);}]);
, after class declaration.
Using directive class instance , Directive parameter is directive class's field.
TypeScript
Compiled JavaScript
var sample; { var SampleDirective = { { this$compile = $compile; thisrestrict = 'A'; thistemplateUrl = '/sample.html'; thisscope = test: '=' ; } SampleDirectiveprototype { }; return SampleDirective; };angular;}sample || sample = {};