angular-es

This is a helper library for developing Angular@1.x applications with ES7 decorators.

Benefits

• Perfectly runs with jspm, webpack & babel
• Supports lazy loading & initialization with libraries like $ocLazyLoad
• Perfectly suits for folder-by-feature application structure
• Simple in usage

Installation

npm install angular-es

Available decorators

• @Component
• @Config
• @Constant
• @Controller
• @Decorator
• @Directive
• @Factory
• @Filter
• @Inject
• @InjectAsProperty
• @Module
• @Provider
• @Run
• @Service
• @Value

Usage

Component

Define component

import {Component, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Component({
    selector: 'my-component',
    bindings: {
        data: '='
    },
    template: `<p>{{ $ctrl.data }}</p>`
})
@Inject('myService')
class MyComponentController {
 
    myService;
    
    constructor(myService) {
        this.myService = myService;
    }
}

Config

Add config block

import {Config, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Config
@Inject('$myServiceProvider')
class MyModuleConfig {
    
    constructor($myServiceProvider) {
    }
}

Constant

Register constant

import {Constant, Module} from 'angular-es';
 
@Module('my.module')
@Constant('MY_CONSTANT')
class MyConstant {
    foo = 'foo';
    bar = 'bar';
}

Controller

Register controller

import {Controller, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Controller('MyController')
@Inject('$myService')
class MyController {
    
    $myService;
    
    constructor($myService) {
        this.$myService = $myService;
    }
}

Decorator

Provide decorator

import {Decorator, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Decorator('$http')
@Inject('$delegate')
class HttpDecorator {
    constructor($delegate) {
        $delegate.decorated = true;
 
        return $delegate;
    }
}
 
export {HttpDecorator};
 

Directive

Register directive

import {Directive, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Directive('my-directive')
@Inject('$myService')
class MyDirective {
    
    $myService;
    
    restrict = 'A';
    controllerAs = 'vm';
    
    constructor($myService) {
        this.$myService = $myService;
    }
    
    @Inject('$scope')
    controller($scope) {
    }
    
    link(scope) {
        this.$myService;
    }
}

Factory

Register factory

import {Factory, Module, Inject} from 'angular-es';
 
class TestModel {
    static $q;
    static myService
}
 
@Module('my.module')
@Factory('TestModel')
@Inject('$q', 'myService')
class TestModelFactory {
    constructor($q, myService) {
        TestModel.$q = $q;
        TestModel.myService = myService;
        return TestModel;
    }
}
 

Filter

Register filter

import {Module, Filter, Inject} from 'angular-es';
 
@Module('my.module')
@Filter('test')
@Inject('$q')
class TestFilter {
 
    $q;
 
    constructor($q) {
        this.$q = $q;
        return ::this.filter;
    }
 
    filter(input) {
        const $q = this.$q;
        return input.toUpperCase();
    }
}

Inject

Adds $inject to target

import {Inject} from 'angular-es';
 
@Inject('$rootScope')
class BaseInjectedClass {
}
 
@Inject('$http', '$q')
class InjectedClass extends BaseInjectedClass {
 
    constructor($rootScope, $http, $q) {
    	super($rootScope);
    }
 
    @Inject('$q')
    injectedMethod() {
    }
 
    @Inject('$q')
    static injectedMethod() {
    }
}

InjectAsProperty

Injects provided dependencies as properties

import {Module, Service, InjectAsProperty} from 'angular-es';
 
@Module(test.name)
@Service('testService')
@InjectAsProperty('$q', '$http')
class TestService {
    testMethod() {
        return this.$http();
    }
}

Module

Attaches target to specified angular module
@Module decorator is required and it has to be present at the top level of target annotation block
Make sure that used angular module is already available

import {Module, Controller} from 'angular-es';
import my from './my.module';
 
@Module(my.name)
@Controller('MyController')
class MyController {
}

Provider

Register provider

import {Provider, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Provider('myService')
class MyServiceProvider {
 
    static config;
 
    config(config) {
        MyServiceProvider.config = config;
    }
 
    @Inject('$q')
    $get($q) {
        return {
            getConfig: getConfig
        };
 
        function getConfig() {
            return $q.resolve(MyServiceProvider.config);
        }
    }
}
 

Run

Add run block

import {Run, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Run
@Inject('$rootScope')
class MyRunBlock {
    
    constructor($rootScope) {
    }
}

Service

Register service

import {Service, Module, Inject} from 'angular-es';
 
@Module('my.module')
@Service('MyService')
@Inject('$http')
class MyService {
    
    $http;
    
    constructor($http) {
        this.$http = $http;
    }
}

Value

Register value

import {Value, Module} from 'angular-es';
 
@Module('my.module')
@Value('myValue')
class MyValue {
    foo = 'foo';
    bar = 'bar';
}