angular-st-decorated v0.7.4

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

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

@Factory

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

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

Factory options

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

@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

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

@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

@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

@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.\ gui.stlmpp@hotmail.com / gui.stlmpp@gmail.com\ \ I'll update this with more info later also