Giter Club home page Giter Club logo

ng-facade's Introduction

ng-facade

Angular es6 annotations for AngularJS. Attemps to be a close as possible to Angular in syntax and functionality.

InjectableFacade, InjectFacade

Classes marked with @InjectableFacade() can:

  • be placed anywhere a traditional service string name is placed
  • use @InjectFacade('serviceName') to inject traditional services by string name
  • inject other @InjectableFacade() services by TypeScript type in the constructor
import {InjectableFacade, InjectFacade, NgModuleFacade} from "ng-facade";

@InjectableFacade()
class Logger {
    constructor(
        //Injection of non ng-facade services
        @InjectFacade("$http") private http,

        //Injection of ng-facade style services
        private otherService: OtherService
    )

    public log(msg: string) { ... }
}

@InjectableFacade()
class OtherService {}

@NgModuleFacade({
    id: "demo",
    providers: [Logger, OtherService]
})
class MyModule {}

$injector

@InjectableFacade()
class Service {
}

@NgModuleFacade({id: "test", providers: [Service]})
class Mod {}

...

$injector.has(Service);     //=> true
$injector.get(Service);     //=> the Service instance

const instance1 = $injector.instantiate(Service);
const instance2 = $injector.instantiate(Service);
instance1 == instance2;     //=> false


//To reference Angular/ng-facade style classes from AngularJS style injection
$injector.invoke(["$rootScope", Service, function($rootScope, serv) { ... }]);

module.run(["$rootScope", Service, function($rootScope, serv) { ... }])

module.service("ServiceName", ["$rootScope", Service, function ServiceClass() {
    constructor($rootScope, serv) { ... }
]);

NgModule

import {NgModuleFacade} from "ng-facade";

@NgModuleFacade({
    id: "my-module",

    imports: [
        "otherModule",
        angular.module("mydep"),            //importing AngularJS modules
        otherNgModule                       //importing @NgModule modules
    ],

    providers: [
        //TypeProviderFacade
        InjectableClass,

        //FactoryProviderFacade
        {
            provide: Provided,
            useFactory: function() { return ... }
        },

        //FactoryProviderFacade + use
        {
            provide: Provided,
            useFactory: function(AngularJSService, service: ServiceClass) { return ... }
            use: [
                "AngularJSService",
                ServiceClass
            ]
        },

        //ExistingProviderFacade
        SuperLogger,
        {
            provide: Logger
            useExisting: SuperLogger
        },

        //ClassProviderFacade
        {
            provide: Provided,
            useClass: ProvidedImpl
        },

        //PipeTransformFacade (ClassProviderFacade)
        MyPipe
    ],

    declarations: [Component, Directive, ...]
})
class MyModule {}

ComponentFacade, DirectiveFacade

@ComponentFacade and @DirectiveFacade annotations can be used to declare component/directives. The classes must then be passed to the @NgModuleFacade declarations.

@ComponentFacade({
    selector: "comp-selector",

    //Optional
    template: "...",

    transclude: ...,
    controllerAs: ...
})
class Comp {}


@DirectiveFacade({
    selector: "element" | ".class" | "[attribute]"
})
class Dir {}


@NgModuleFacade({id: "compMod", declarations: [Comp, Dir]})
class Mod {}

PipeFacade, PipeTransformFacade

import {PipeFacade, PipeTransformFacade, NgModuleFacade} from "ng-facade";

@PipeFacade({name: "myPipe"})
class MyPipe implements PipeTransformFacade {
    transform(x, y) { return x + y; }
}

@NgModuleFacade({id: "pipeMod", providers: [P]})
class Mod {}

@NgModuleFacade({
    id: "demo",
    providers: [MyPipe]
})
class MyModule {}
<span>{{myX | myPipe:myY}}</span>

@InputFacade, @InputStringFacade, @InputCallbackFacade

@OutputFacade, EventEmitterFacade

@RequireFacade

@HostListenerFacade

ng-facade's People

Contributors

jbedard avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

pearlsze

ng-facade's Issues

useFactory overwrites existing $inject

For example, if using ng-upgrade:

{provide: Clazz, useFactory: downgradeInjectable(Clazz)}

downgradeInjectable returns a function containing a $inject array. This is then overridden with an empty array because there is no use array.

Provide component lifecycle interfaces

This way when replacing ng-facade with Angular it will produce compile errors for the lifecycle event names.

Or should ng-facade support Angular lifecycle hook names instead of AngularJS hook names?

Fails with PhantomJS

Seems like Reflect.getMetadata("design:paramtypes", method) returns undefined. This is caused by PhantomJS having a bad Map implementation? Or the Reflect shim used in PhantomJS is bad. Using a proper shim seems to fix it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.