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.

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);
    }

}

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 = 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'));
});

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

module sample {

    @sample.Controller
    class SampleController {

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

    }

}

Compiled 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;
        }/*<auto_generate>*/SampleController.$inject = ['$scope'];SampleController.$componentName = 'SampleController'/*</auto_generate>*/
        SampleController = __decorate([sample.Controller], 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

module sample {

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

}

Compiled 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;
        }/*<auto_generate>*/SampleService.$inject = ['$q'];SampleService.$componentName = 'sampleService'/*</auto_generate>*/
        SampleService = __decorate([sample.Service], 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

module sample {

    @sample.Provide
    class SampleManagerProvider {

        constructor($q: angular.IQService) {
        }

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

    }

    class $SampleManager {
        constructor(public provider: SampleManagerProvider) {
        }
    }
}

Compiled 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) {
        }/*<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 = {}));

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

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

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 = {}));

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 = 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'));
});

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

module sample {

    class SampleController {

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

    }

}

Compiled 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 = {}));

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

module sample {

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

        }
    }

}

Compiled 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 = {}));

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

module sample {

    class SampleManagerProvider {

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

    }

    class $SampleManager {

    }
}

Compiled 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 = {}));

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

module sample {

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

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

        }

    }

}

Compiled 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 = {}));