feat(playground): add config function, factory, dynamic providers reg…

…istration via config example
ngParty · Jun 12, 2016 · 916118e · 916118e
1 parent 80608ed
commit 916118e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/playground/app/app.component.ts b/playground/app/app.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from 'ng-metadata/core';
+import { Component, Inject, OnInit } from 'ng-metadata/core';
+import { DynamicValueToken, NgRxStore, SomeFactoryFnToken, SomeClassToInstantiate } from './index';
 import { TodoAppCmp } from './todo/todo-app.component';
 
 @Component( {
@@ -7,9 +8,20 @@ import { TodoAppCmp } from './todo/todo-app.component';
   templateUrl: './app/app.component.html'
 } )
 export class AppComponent implements OnInit {
-  constructor() { }
+  constructor(
+    private store: NgRxStore,
+    @Inject(SomeFactoryFnToken) private myFactory: ()=>SomeClassToInstantiate,
+    @Inject(DynamicValueToken) private dynamicValue: string
+  ) { }
 
-  ngOnInit() { }
+  ngOnInit() {
+    console.info('===> provider(value) registered within config:',this.dynamicValue);
+    console.info('===> provider(service) registered within config:', this.store, this.store.getState());
+    console.info('factory:',this.myFactory);
+    console.assert(this.myFactory() !== this.myFactory(),'factory must return different instance every time');
+    const someClassInstance = this.myFactory();
+    someClassInstance.greetWithDelay();
+  }
 
   items = ['OOONE','TTTTTWO','THREEEE'];
   removeItem(item){

diff --git a/playground/app/index.ts b/playground/app/index.ts
@@ -1,5 +1,5 @@
 import * as angular from 'angular';
-import { provide } from 'ng-metadata/core';
+import { provide, OpaqueToken, Injectable } from 'ng-metadata/core';
 
 import { TabsModule } from './components/tabs/index'
 import { LifecycleHooksModule } from './components/lifecycle/index';
@@ -15,6 +15,32 @@ import { MyDirectiveTesterDirective } from './directives/my-directive-tester.dir
 import { TesterAttrDirective } from './directives/my-tester.directive';
 import { GlobalListenerDirective } from './directives/global-listener.directive';
 import { TesterComponent } from './components/tester/tester.component';
+
+export const DynamicValueToken = new OpaqueToken('_dynamicValueToken_');
+
+@Injectable()
+export class NgRxStore {
+  getState(){ console.info('I should get state or so'); return {hello:'world'} }
+}
+
+@Injectable()
+export class Dispatcher{}
+
+export const SomeFactoryFnToken = new OpaqueToken('someFactory');
+
+export class SomeClassToInstantiate{
+  constructor(private $timeout:ng.ITimeoutService, private $log:ng.ILogService){}
+  greetWithDelay(){ this.$timeout(()=>console.info('greetings from SomeClassToInstantiate with delay!'),1000)}
+}
+
+// this is just showcase how to define config for your app or if you are building 3rd party module
+configureProviders.$inject = [ '$provide' ];
+export function configureProviders( $provide ) {
+    $provide.service( ...provide(NgRxStore, {useClass: NgRxStore}) )
+    $provide.value( ...provide(DynamicValueToken, {useValue:'hello'}) );
+    $provide.factory(...provide(SomeFactoryFnToken, { deps: ['$timeout', '$log'], useFactory: ($timeout, $log) => () => new SomeClassToInstantiate($timeout, $log) }));
+}
+
 export const AppModule = angular.module( 'app', [
   TabsModule,
   LifecycleHooksModule,

diff --git a/playground/app/main.ts b/playground/app/main.ts
@@ -4,8 +4,8 @@ import { Title } from 'ng-metadata/platform';
 import {enableProdMode} from 'ng-metadata/core';
 
 import { AppComponent } from './app.component';
-import { AppModule } from './index';
+import { AppModule, configureProviders } from './index';
 
 // enableProdMode();
 
-bootstrap( AppComponent, [ Title, AppModule ] );
+bootstrap( AppComponent, [ Title, AppModule, configureProviders ] );
diff --git a/playground/ng-metadata.legacy.d.ts b/playground/ng-metadata.legacy.d.ts
@@ -298,7 +298,7 @@ export const enum ChangeDetectionStrategy {
     useClass?: Type,
     useValue?: any,
     useFactory?: Function,
-    deps: Object[]
+    deps?: Object[]
   }): [string, Type];
 
   function Directive({selector, legacy}: {