angular-es

This is a helper library for developing [email protected] 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';
}