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

$3

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.

$3

Create 4 decoratar functions (Controller,Service,Provider,Decorator) to register angular component.

`typescript
module sample {
let angularModule = angular.module('sample');
export function Controller(clazz: any) {
angularModule.controller(clazz.$componentName, clazz);
}

export function Service(clazz: any) {
angularModule.controller(clazz.$componentName, clazz);
}

export function Provider(clazz: any) {
angularModule.controller(clazz.$componentName, clazz);
}

export function Directive(clazz: any) {
var args = [];
args.push.apply(args, clazz.$inject);
args.push(function() { return new clazz(arguments) });
angularModule.directive(clazz.$componentName, args);
}

}
`


$3

Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify decoratorModuleName option to your angular module name.

`javascript
var gulp = require('gulp');

var typescript = require('gulp-typescript');
var typescriptAngular = require('gulp-typescript-angular');

gulp.task('scripts', function () {
return gulp.src('./*/.ts')
.pipe(typescript())
.pipe(typescriptAngular({
decoratorModuleName:'sample'
}))
.pipe(gulp.dest('./dist'));
});
`


$3

- decoratorModuleName : Decorator Module Name

1.3 Examples

$3

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
`typescript
module sample {

@sample.Controller
class SampleController {

constructor(public $scope: angular.IScope) {
}

}

}
`
#### Compiled JavaScript
`javascript
var __decorate = this.__decorate || function (decorators, target, key, value) {
var kind = typeof (arguments.length == 2 ? value = target : value);
for (var i = decorators.length - 1; i >= 0; --i) {
var decorator = decorators[i];
switch (kind) {
case "function": value = decorator(value) || value; break;
case "number": decorator(target, key, value); break;
case "undefined": decorator(target, key); break;
case "object": value = decorator(target, key, value) || value; break;
}
}
return value;
};
var sample;
(function (sample) {
var SampleController = (function () {
function SampleController($scope) {
this.$scope = $scope;
}//SampleController.$inject = ['$scope'];SampleController.$componentName = 'SampleController'//
SampleController = __decorate([sample.Controller], SampleController);
return SampleController;
})();
})(sample || (sample = {}));

`

$3

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
`typescript
module sample {

@sample.Service
class SampleService {
constructor(public $q: angular.IQService) {
}
}

}
`
#### Compiled JavaScript
`javascript
var __decorate = this.__decorate || function (decorators, target, key, value) {
var kind = typeof (arguments.length == 2 ? value = target : value);
for (var i = decorators.length - 1; i >= 0; --i) {
var decorator = decorators[i];
switch (kind) {
case "function": value = decorator(value) || value; break;
case "number": decorator(target, key, value); break;
case "undefined": decorator(target, key); break;
case "object": value = decorator(target, key, value) || value; break;
}
}
return value;
};
var sample;
(function (sample) {
var SampleService = (function () {
function SampleService($q) {
this.$q = $q;
}//SampleService.$inject = ['$q'];SampleService.$componentName = 'sampleService'//
SampleService = __decorate([sample.Service], SampleService);
return SampleService;
})();
})(sample || (sample = {}));


`

$3

If class is annonated by @sample.Provider , gulp-typescript-angular add $inject parameter annotation code,//SampleManagerProvider.$inject = ['$q'];SampleManagerProvider.$componentName = 'sampleManager'//, after class constructor declaration.

#### TypeScript
`typescript
module sample {

@sample.Provide
class SampleManagerProvider {

constructor($q: angular.IQService) {
}

$get() {
return new $SampleManager(this);
}

}

class $SampleManager {
constructor(public provider: SampleManagerProvider) {
}
}
}
`
#### Compiled JavaScript
`javascript
var __decorate = this.__decorate || function (decorators, target, key, value) {
var kind = typeof (arguments.length == 2 ? value = target : value);
for (var i = decorators.length - 1; i >= 0; --i) {
var decorator = decorators[i];
switch (kind) {
case "function": value = decorator(value) || value; break;
case "number": decorator(target, key, value); break;
case "undefined": decorator(target, key); break;
case "object": value = decorator(target, key, value) || value; break;
}
}
return value;
};
var sample;
(function (sample) {
var SampleManagerProvider = (function () {
function SampleManagerProvider($q) {
}//SampleManagerProvider.$inject = ['$q'];SampleManagerProvider.$componentName = 'sampleManager'//
SampleManagerProvider.prototype.$get = function () {
return new $SampleManager(this);
};
SampleManagerProvider = __decorate([sample.Provider], SampleManagerProvider);
return SampleManagerProvider;
})();
var $SampleManager = (function () {
function $SampleManager(provider) {
this.provider = provider;
}
return $SampleManager;
})();
})(sample || (sample = {}));
`

$3

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
`typescript
module sample {

@sample.Directive
class SampleDirective {

restrict = 'A'

templateUrl = '/sample.html'

scope = {
text: '='
}

constructor(public $compile: angular.ICompileService) {
}


link(scope: angular.IScope, element: JQuery, attr: angular.IAttributes) {

}

}

}
`

#### Compiled JavaScript
`javascript
var __decorate = this.__decorate || function (decorators, target, key, value) {
var kind = typeof (arguments.length == 2 ? value = target : value);
for (var i = decorators.length - 1; i >= 0; --i) {
var decorator = decorators[i];
switch (kind) {
case "function": value = decorator(value) || value; break;
case "number": decorator(target, key, value); break;
case "undefined": decorator(target, key); break;
case "object": value = decorator(target, key, value) || value; break;
}
}
return value;
};
var sample;
(function (sample) {
var SampleDirective = (function () {
function SampleDirective($compile) {
this.$compile = $compile;
this.restrict = 'A';
this.templateUrl = '/sample.html';
this.scope = {
text: '='
};
}//SampleDirective.$inject = ['$compile'];SampleDirective.$componentName = 'sample'//
SampleDirective.prototype.link = function (scope, element, attr) {
};
SampleDirective = __decorate([sample.Directive], SampleDirective);
return SampleDirective;
})();
})(sample || (sample = {}));

`




2. Naming Rule Mode

$3

Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify moduleName option to your angular module name.

`javascript
var gulp = require('gulp');

var typescript = require('gulp-typescript');
var typescriptAngular = require('gulp-typescript-angular');

gulp.task('scripts', function () {
return gulp.src('./*/.ts')
.pipe(typescript())
.pipe(typescriptAngular({
moduleName:'sample'
}))
.pipe(gulp.dest('./dist'));
});
`


$3

- moduleName : AngularJS Module Name

2.2 Examples

$3

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
`typescript
module sample {

class SampleController {

constructor(public $scope: angular.IScope) {
}

}

}
`
#### Compiled JavaScript
`javascript
var sample;
(function (sample) {
var SampleController = (function () {
function SampleController($scope) {
this.$scope = $scope;
}
return SampleController;
})();
angular.module('sample').controller('sampleController',['$scope',SampleController]);
})(sample || (sample = {}));
`

$3

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
`typescript
module sample {

class SampleService {
constructor(public $q: angular.IQService) {

}
}

}

`
#### Compiled JavaScript
`javascript
var sample;
(function (sample) {
var SampleService = (function () {
function SampleService($q) {
this.$q = $q;
}
return SampleService;
})();
angular.module('sample').service('sampleService',['$q',SampleService]);
})(sample || (sample = {}));
`

$3

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
`typescript
module sample {

class SampleManagerProvider {

$get() {
return new $SampleManager();
}

}

class $SampleManager {

}
}


`
#### Compiled JavaScript
`javascript
var sample;
(function (sample) {
var SampleManagerProvider = (function () {
function SampleManagerProvider() {
}
SampleManagerProvider.prototype.$get = function () {
return new $SampleManager();
};
return SampleManagerProvider;
})();
angular.module('sample').provider('sampleManager',[SampleManagerProvider]);
var $SampleManager = (function () {
function $SampleManager() {
}
return $SampleManager;
})();
})(sample || (sample = {}));
`

$3

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
`typescript
module sample {

class SampleDirective {
restrict = 'A'
templateUrl = '/sample.html'
scope = {
test: '='
}
constructor(public $compile:angular.ICompileService){
}

link (scope:angular.IScope, element:JQuery) {

}

}

}
`
#### Compiled JavaScript
`javascript
var sample;
(function (sample) {
var SampleDirective = (function () {
function SampleDirective($compile) {
this.$compile = $compile;
this.restrict = 'A';
this.templateUrl = '/sample.html';
this.scope = {
test: '='
};
}
SampleDirective.prototype.link = function (scope, element) {
};
return SampleDirective;
})();
angular.module('sample').directive('sample',['$compile',function(){return new SampleDirective(arguments);}]);
})(sample || (sample = {}));
``