gulp plugin for class-based development in AngularJS with TypeScript. This make TypeScript classes add AngularJS registration codes.
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.
Install with npm
$ npm install gulp-typescript-angular
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.
Create 4 decoratar functions (Controller,Service,Provider,Decorator) to register angular component.
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);
}
}Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify decoratorModuleName option to your angular module name.
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'));
});- decoratorModuleName : Decorator Module Name
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.
module sample {
@sample.Controller
class SampleController {
constructor(public $scope: angular.IScope) {
}
}
}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;
}/*<auto_generate>*/SampleController.$inject = ['$scope'];SampleController.$componentName = 'SampleController'/*</auto_generate>*/
SampleController = __decorate([sample.Controller], SampleController);
return SampleController;
})();
})(sample || (sample = {}));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.
module sample {
@sample.Service
class SampleService {
constructor(public $q: angular.IQService) {
}
}
}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;
}/*<auto_generate>*/SampleService.$inject = ['$q'];SampleService.$componentName = 'sampleService'/*</auto_generate>*/
SampleService = __decorate([sample.Service], SampleService);
return SampleService;
})();
})(sample || (sample = {}));
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.
module sample {
@sample.Provide
class SampleManagerProvider {
constructor($q: angular.IQService) {
}
$get() {
return new $SampleManager(this);
}
}
class $SampleManager {
constructor(public provider: SampleManagerProvider) {
}
}
}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) {
}/*<auto_generate>*/SampleManagerProvider.$inject = ['$q'];SampleManagerProvider.$componentName = 'sampleManager'/*</auto_generate>*/
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 = {}));If class is annonated by @sample.Directive, gulp-typescript-angular add $inject parameter annotation,SampleDirective.$inject = ['$compile'];SampleDirective.$componentName = 'sample', after class constructor declaration.
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) {
}
}
}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: '='
};
}/*<auto_generate>*/SampleDirective.$inject = ['$compile'];SampleDirective.$componentName = 'sample'/*</auto_generate>*/
SampleDirective.prototype.link = function (scope, element, attr) {
};
SampleDirective = __decorate([sample.Directive], SampleDirective);
return SampleDirective;
})();
})(sample || (sample = {}));Add gulp-typescript-angular plugin to gulp pipe after typescript plugin. And modify moduleName option to your angular module name.
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'));
});- moduleName : AngularJS Module Name
If class name matches /Controller$/ or /Ctrl$/, gulp-typescript-angular add controller registration code,angular.module('sample').controller('sampleController',['$scope',SampleController]);,after class declaration.
module sample {
class SampleController {
constructor(public $scope: angular.IScope) {
}
}
}var sample;
(function (sample) {
var SampleController = (function () {
function SampleController($scope) {
this.$scope = $scope;
}
return SampleController;
})();
angular.module('sample').controller('sampleController',['$scope',SampleController]);
})(sample || (sample = {}));If class name matches /Service$/ or /Manager$/, gulp-typescript-angular add service registration code,angular.module('sample').service('sampleService',['$q',SampleService]);, after class declaration.
module sample {
class SampleService {
constructor(public $q: angular.IQService) {
}
}
}var sample;
(function (sample) {
var SampleService = (function () {
function SampleService($q) {
this.$q = $q;
}
return SampleService;
})();
angular.module('sample').service('sampleService',['$q',SampleService]);
})(sample || (sample = {}));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.
module sample {
class SampleManagerProvider {
$get() {
return new $SampleManager();
}
}
class $SampleManager {
}
}
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 = {}));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.
module sample {
class SampleDirective {
restrict = 'A'
templateUrl = '/sample.html'
scope = {
test: '='
}
constructor(public $compile:angular.ICompileService){
}
link (scope:angular.IScope, element:JQuery) {
}
}
}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 = {}));gulp-typescript-angular now supports ES6 modules! You can use export statements without wrapping your code in TypeScript internal modules.
When using ES6 modules, configure TypeScript to output CommonJS or ES6 modules and use gulp-typescript-angular with the moduleName option.
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({
target: 'es5',
module: 'commonjs' // or 'es6' for ES6 modules
}))
.pipe(typescriptAngular({
moduleName: 'sample'
}))
.pipe(gulp.dest('./dist'));
});ES6 modules use export statements instead of wrapping code in internal modules.
export class SampleController {
constructor(public $scope: angular.IScope) {
console.log('SampleController initialized');
}
}"use strict";
var SampleController = (function () {
function SampleController($scope) {
this.$scope = $scope;
console.log('SampleController initialized');
}/*<auto_generate>*/SampleController.$inject = ['$scope']; SampleController.$componentName = 'SampleController'/*</auto_generate>*/
return SampleController;
}());/*<auto_generate>*/angular.module('sample').controller('SampleController',SampleController);/*</auto_generate>*/
exports.SampleController = SampleController;Services work the same way with ES6 modules.
export class SampleService {
constructor(public $q: angular.IQService) {
}
getData() {
return this.$q.when({ data: 'test' });
}
}"use strict";
var SampleService = (function () {
function SampleService($q) {
this.$q = $q;
}/*<auto_generate>*/SampleService.$inject = ['$q']; SampleService.$componentName = 'sampleService'/*</auto_generate>*/
SampleService.prototype.getData = function () {
return this.$q.when({ data: 'test' });
};
return SampleService;
}());/*<auto_generate>*/angular.module('sample').service('sampleService',SampleService);/*</auto_generate>*/
exports.SampleService = SampleService;Directives also work with ES6 modules.
export class SampleDirective {
restrict = 'A'
templateUrl = '/sample.html'
scope = {
text: '='
}
constructor(public $compile: angular.ICompileService) {
}
link(scope: angular.IScope, element: JQuery, attr: angular.IAttributes) {
// directive logic
}
}"use strict";
var SampleDirective = (function () {
function SampleDirective($compile) {
this.$compile = $compile;
this.restrict = 'A';
this.templateUrl = '/sample.html';
this.scope = {
text: '='
};
}/*<auto_generate>*/SampleDirective.$inject = ['$compile']; SampleDirective.$componentName = 'sample'/*</auto_generate>*/
SampleDirective.prototype.link = function (scope, element, attr) {
// directive logic
};
return SampleDirective;
}());/*<auto_generate>*/angular.module('sample').directive('sample',['$compile',function(){return new (Function.prototype.bind.apply(SampleDirective,[null].concat(Array.prototype.slice.call(arguments))));}]);/*</auto_generate>*/
exports.SampleDirective = SampleDirective;