TypeScript core.bind函數代碼示例

export function fuseBootstraper(customProviders: ProviderArray = null): ApplicationRef {
    FuseDomAdapter.makeCurrent();
    let platformProviders: ProviderArray = [
        PLATFORM_COMMON_PROVIDERS
    ];

    let defaultAppProviders: ProviderArray = [
        FuseRenderer,
        provide(Renderer, {
            useClass: FuseRenderer
        }),
        FuseRootRenderer,
        provide(RootRenderer, {
            useClass: FuseRootRenderer
        }),
        provide(XHR, {
            useClass: FileSystemXHR
        }),
        provide(ExceptionHandler, {
            useFactory: () => new ExceptionHandler(DOM, true),
            deps: []
        }),

        provide(PLATFORM_PIPES, {
            useValue: COMMON_PIPES,
            multi: true
        }),
        provide(PLATFORM_DIRECTIVES, {
            useValue: COMMON_DIRECTIVES,
            multi: true
        }),

        APPLICATION_COMMON_PROVIDERS,
        COMPILER_PROVIDERS,
        FORM_PROVIDERS,
        HTTP_PROVIDERS,
        ROUTER_PROVIDERS,
        bind(LocationStrategy).toClass(FuseLocationStrategy)
        // ROUTER_PROVIDERS,
        // provide(LocationStrategy, {
        //     useClass: FuseLocationStrategy
        // })
    ];

    let appProviders = [defaultAppProviders];
    if (isPresent(customProviders)) {
        appProviders.push(customProviders);
    }
    if (!_platform) {
        _platform = platform(platformProviders);
    }

    let app = _platform.application(appProviders);
    return app;
}

    { path: '/stats', component: Stats, as: 'Stats' }
])
class App {
    authUser: AuthUser;
    navOpen: boolean;
    
    constructor(private _authService: AuthService) { }
    
    ngOnInit() {
        this._authService.authUser$.subscribe(user => this.authUser = user);
        this._authService.loadAuthUser();
        this.navOpen = false;
    }
    
    logout() {
        this._authService.logout();
    }
}

bootstrap(App, [
    ROUTER_BINDINGS,
    FORM_BINDINGS,
    HTTP_BINDINGS,
    bind(ROUTER_PRIMARY_COMPONENT).toValue(App),
    bind(LocationStrategy).toClass(HashLocationStrategy),
    [
        DataService,
        AuthService,
        NotificationService
    ]
]);

import * as router from 'angular2/router';
import {bootstrap}    from 'angular2/platform/browser';
import {bind, provide} from 'angular2/core';
import {App} from './app';
import {HTTP_PROVIDERS, Http} from 'angular2/http';

bootstrap(App, [
    router.ROUTER_PROVIDERS,
    bind(router.APP_BASE_HREF).toValue(location.pathname),
    provide(router.LocationStrategy, {useClass: router.HashLocationStrategy}),
    HTTP_PROVIDERS
]);

import {DataTableExample} from './screens/datatable/DataTableExample';
import {ReferenceData, ReferenceDataService} from './common/referenceData';
import {NV_LAYOUT_DIRECTIVES} from 'angular-velocity';

@Component({
    selector: 'app',
    viewBindings: [ReferenceDataService]
})
@RouteConfig([
    { path: '/', component: Main, as: 'Home' },
    { path: '/data-table-example', component: DataTableExample, as: 'DataTableExample' }

])
@View({
    templateUrl: 'showcase/demo-app.html',
    directives: [RouterOutlet, RouterLink, NV_LAYOUT_DIRECTIVES]
})
class DemoApp {


}

bootstrap(
    DemoApp,
    [
        ReferenceDataService,
        ROUTER_BINDINGS,
        FORM_BINDINGS,
        bind(ROUTER_PRIMARY_COMPONENT).toValue(DemoApp)
    ]);

      case DeviceType.Joystick:
        return 'JOYSTICK';
      case DeviceType.Key:
        return 'KEY';
      case DeviceType.KeyTrackball:
        return 'KEY_AND_TRACKBALL';
      case DeviceType.KeyJoystick:
        return 'KEY_AND_JOYSTICK';
      default:
        return 'MOUSE';
    }
  }

  saveUserSettingsForUser(username: string, userSettings: UserSettings): Observable<UserSettings> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post(this.globalService.URL_SAVE_USERSETTINGS(username),
      JSON.stringify(userSettings),
      { headers: headers })
      .map(res => {
        let settings: UserSettings = res.json();
        return settings;
      });
  }
}

export let userSettingsServiceInjectables: Array<any> = [
  bind(UserSettingsService).toClass(UserSettingsService)
];

import {Injectable, bind} from 'angular2/core';

@Injectable()
export class LoggerService {
    log(msg: any) { console.log(msg); }
    error(msg: any) { console.error(msg); }
    warn(msg: any) { console.warn(msg); }
}

export var LoggerServiceInjectables: Array<any> = [
    bind(LoggerService).toClass(LoggerService)
];

  }

  //Add new user to db
  addUser(user: User) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return this.http.post(this.globalService.URL_ADDUSER,
      JSON.stringify(user),
      { headers: headers })
      .map(res => {
        var result = res.json();
        var response = new Users(result.data);
        return { users: response.users, message: result.message };
      });
  }

  //Delete user by name from db
  deleteUser(name) {
    return this.http.get(this.globalService.URL_DELETEUSER(name))
      .map(res => {
        var response = new Users(res.json());
        return response.users;
      });
  }
}

export var userServiceInjectables: Array<any> = [
  bind(UserService).toClass(UserService)
];

import {bootstrap}    from 'angular2/platform/browser'
import {bind} from 'angular2/core';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_BINDINGS} from 'angular2/http';
import {O365App} from './components/app'
bootstrap(O365App, [ROUTER_PROVIDERS, HTTP_BINDINGS, bind(LocationStrategy).toClass(HashLocationStrategy)]);

import {Observer} from 'rxjs/Observer';
import {Subject} from 'rxjs/Subject';

import {Action} from './flux-action';
import {StateKeeper} from './flux-state';


// -- DI config
/*
  DI設定。Fluxの要。ViewとLogicを巧妙に分離している。理解に至るまでの道のりは長い。ひたすら難しい。こんなことを考案したのは一體誰だ。
  それでもここが理解できないとSavkin's Redux with RxJS for Angular2は理解できない。調べるにあたっては英語力とググり能力が試される最大の難所と言っても良い。
  https://laco0416.github.io/post/platform-prividers-of-angular-2/ を參考にすると理解の助けになるかもしれない。
  Providerはprovide()で書いても良いが個人的にはbind()の方が書きやすくて好きだ。provideはGrunt、bindはGulpみたいな違い。
*/

// RxJSのSubjectクラスを継承してDispatcherクラスを作る。このクラスはDIで使う。
// Dispatcherをクラスとして用意しておくことでComponentのDIに関する記述がシンプルになる。シンプルさは正義である。
export class Dispatcher<T> extends Subject<T> { 
  constructor(destination?: Observer<T>, source?: Observable<T>) { // この記述はRxJSのソースからパクった。
    super(destination, source);
  }
}

// TodoAppコンポーネントのprovidersにセットしており、Angular2のbootstrap()時にインスタンス化されComponentに紐付けられる。(@laco0416 さんありがとう！)
// StateKeeperのインスタンスを生成するときにinitStateとdispatcherを引數にあてている(クロージャしている)ので、
// Componentでdispatcher.next()をコールしたときにStateKeeper內部のObservable(scan)のscanサイクルを回すことができる。
export const stateAndDispatcher = [
  bind('initState').toValue({ todos: [], visibilityFilter: 'SHOW_ALL' } as AppState), // Componentから參照しないのでOpaqueTokenは使っていない。
  bind(Dispatcher).toValue(new Dispatcher<Action>(null)), // 超重要。これが全てを一つの輪に紡ぎ上げる。Savkin's Fluxの循環サイクルを理解できたとき、人は悟りを知るだろう。
  bind(StateKeeper).toFactory((state, dispatcher) => new StateKeeper(state, dispatcher), ['initState', Dispatcher]) // toFactoryの第二引數はTokenの配列であることに注意。bootstrap時にTokenを通じて値がStateKeeperの引數にあてられる。
];

import { bootstrap }    from 'angular2/platform/browser';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from 'angular2/http';
import { DataService } from './data.service';
import { bind } from 'angular2/core';
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";
// import { COMMON_DIRECTIVES } from 'angular2/platform/browser';
import 'rxjs/Rx';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS, bind(LocationStrategy).toClass(HashLocationStrategy), DataService]);