st-decorated

Set of Decorators to create AngularJS apps with the Decorators of Angular 2 (kinda)

Contents

• Installation
• Usage
• Decorators
  • @Config
  • @Decorator
  • @Service
  • @Factory
  • @Component
  • @Directive
  • @Filter
  • @Run
  • @NgModule
  • @Inject

Installation

npm install angular-st-decorated --save-dev

Usage

This package works similarly to ng-decorated (Big shout to the guy who created it)
Import the Decorator you want and add to the class (Component, Service, Filter, etc) and it will add metadata to the Class to use it later in the @NgModule Decorator

Decorators

@Config

import { Config } from 'angular-st-decorated';

@Config('MyProvider', '$http')
class MyConfig {
  $execute(){
    // This method is mandatory, this will execute your config
    this.$httpProvider.interceptors.push('myInterceptorFactory');
  }
}

Config options

There is only one option which is the list of injections in this config

The $execute method is mandatory

@Decorator

import { Decorator } from 'angular-st-decorated';

@Decorator({
  decorate: 'MyService',
  inject: [
    'MyConstant'
  ]
})
class MyServiceDecorator {
  $decorate($delegate){
    // Do something with your service here, and then return the $delegate parameter
    return $delegate;
  }
}

Decorator options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | decorate | string | Name of what you're decorating (Service, Directive, Factory, Filter, etc) | undefined | Yes | | inject | any[] | List of injections (string or class) | undefined | No |

The $decorate method is mandatory, and you HAVE to return the parameter or your decorated service will not work

@Service

import { Service } from 'angular-st-decorated';
import { MyOtherSerivce } from './services';

@Service({
  inject: [
    '$http', MyOtherService
  ]
})
class MyService {
  getApi(){
    return this.$http.get('http://something.com').then(response => {
      return response.data;
    })
  }
}

Service options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | name | string | Name of your service (will be used as a injectable) | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No | | providers | any[] | List of injections (Only work with services), but it provides a new instance, that is, it will not use the global instance of your service | undefined | No | | global | boolean | Inject the Service globally (in the bootstraped Module, to be precise) and only if you import it in one of your injections | false | No |

@Factory

import { Factory } from 'angular-st-decorated';

@Factory({
  inject: [
    'MyService'
  ]
})
class MyFactory {
  myMethod(){
    return this.MyService.getApi();
  }
}

Factory options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | name | string | Name of your factory (will be used as a injectable) | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No |

I don't see any reason to use a Factory (other than HttpInterceptor or any other module that uses Factories), to be honest, Services has it all, and it's better because you can use non singletons and also inject non singletons, here you can't (yet)

@Provider

import { Provider } from 'angular-st-decorated';

@Provider({
  inject: [
    'MyConstant'
  ]
})
class MyProvider {
  @Inject('$http')
  $get($http){
    return this;
  }
}

Provider options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | name | string | Name of your provider (will be used as a injectable) | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No |

@Component

import { Component } from 'angular-st-decorated';

@Component({
  selector: 'my-component',
  template: '<p>MyComponent works</p>',
  inject: [
    'MyService'
  ],
  providers: [
    'MyNonSingletonService'
  ]
})
class MyComponent {
  $onInit(){
    /* do something with your service/factory here using 'this.MyService'
       or using your nonSingletonService (this.MyNonSingletonService), the instance of your nonSingletonService will be unique for every component/service you provide it
    */
  }
}

Component options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | selector | string | This is the selector of your component, used in the template, you can use Camel case or hyphen separated names (or mix them) | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No | | providers | any[] | List of injections (Only work with services), but it provides a new instance, that is, it will not use the global instance of your service | undefined | No |

More options: Angular component docs

@Directive

import { Directive } from 'angular-st-decorated';

@Directive({
  selector: 'my-directive',
  inject: [
    'MyService'
  ],
  scope = {
    'myDirective': '@'
  },
  restrict: 'EA'
})
class MyDirective {
  link($scope, $element){
    // Do something here
  }
  compile(tElement){
    // Do something here
  }
}

Directive options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | selector | string | This is the selector of your directive, used in the template, you can use Camel case or hyphen separated names (or mix them) | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No |

@Filter

import { Filter } from 'angular-st-decorated';

@Filter({
  name: 'myFilter',
  inject: [
    'MyService'
  ]
})
class MyFilter {
  $transform(value, option){
    return this.MyService.myMethod(value, option);
  }
}

Filter options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | name | string | Name of your filter | Name of your class | No | | inject | any[] | List of injections (string or class) | undefined | No |

@Run

Like the config, there only one options for Run, and it's the list of injections

import { Run } from 'angular-st-decorated';

@Run('$http', 'MyService')
class RunPh {
  $execute(){
    this.$http.get('http://myapi.com').then(response => {
      this.MyService.myApiResp = response;
    })
  }
}

Run options

There is only one option which is the list of injections

The $execute method is mandatory

@NgModule

import { NgModule } from 'angular-st-decorated';
import { MyComponent } from './app/myComponent';
import { MyDirective } from './app/myDirective';
import { MyFactory } from './app/myFactory';
import { MyService } from './app/myService';
import { MyOtherModule } from './app/myOtherModule/myOtherModule';

@NgModule({
  imposts: [
    MyOtherModule
  ],
  declarations: [
    MyComponent,
    MyDirective
  ],
  providers: [
    MyFactory,
    MyService
  ]
})
class MyModule {
}

NgModule options

| Name | Type | Description | Default | Required | | ---- | ---- | ----------- | ------- | -------- | | module | string | Name of your module | Name of your class | No | | import | any[] | An array with the others modules you want to import, this can be a name (string) or the class of the module | undefined | No | | configs | any[] | An array with the Config classes | undefined | No | | decorators | any[] | An array with the Decorators classes | undefined | No | | routing | any | A class with the routing config class | undefined | No | | providers | any[] | An array with the Services, Providers, Factories and Filters (classes) | undefined | No | | declarations | any[] | An array with the Components and Directives classes | undefined | No | | values | IConstant[] | An array of Values (module.value) | undefined | No | | constants | IConstant[] | An Array of Constants (module.constant) | undefined | No | | run | any[] | An Array of Run's (module.run) classes | undefined | No | | bootstrap | { element: HTMLElement, strictDi: boolean } | It's the same as angular.bootstrap. Only one module can have bootstrap | undefined | No |

@Inject

import { Inject } from 'angular-st-decorated';

@Inject('$http', 'MyService')
class Controller {
  constructor($http, MyService){
    this.$http = $http;
    this.MyService = MyService;
  }
}

Notes

If you plan to minify your files, you will need to use the "name" and "selector" properties, because if you let the default (Name of the class) for Services or for Components, and your class get the named changed in the minify process, it will break the app, so, it's a good thing to ALWAYS use the name/selector option

I'm very new to this world of publishing my things, so, if anyone has any tips on what to do, please, contact me.
[email protected] / [email protected]

I'll update this with more info later also