TypeScript angular2.provide函數代碼示例

 beforeEachProviders(() => [
   RouteRegistry,
   DirectiveResolver,
   provide(Location, {useClass: SpyLocation}),
   provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppCmp}),
   provide(Router, {useClass: RootRouter})
 ]);

 beforeEachProviders(() => [
   RouteRegistry,
   DirectiveResolver,
   provide(Location, {useClass: SpyLocation}),
   provide(Router,
     {
       useFactory:
         (registry, location) => { return new RootRouter(registry, location, App); },
       deps: [RouteRegistry, Location]
     })
 ]);

  beforeEach(() => {
    injector = Injector.resolveAndCreate([
      HTTP_BINDINGS,
      MockBackend,
      BaseResponseOptions,
      provide(Http, {
        useFactory: (backend, baseResponseOptions) => {
          return new Http(backend, baseResponseOptions);
        },
        deps: [MockBackend, BaseResponseOptions]
      }),
      TickerLoader
    ]);
    backend = injector.get(MockBackend);
    baseResponseOptions = injector.get(BaseResponseOptions);
    http = injector.get(Http);
    tickerLoader = injector.get(TickerLoader);

    backend.connections.subscribe((c:MockConnection) => {
      var symbol:string[] =/.*stocks\?symbol=(.*)/.exec(c.request.url);
      switch(symbol[1]) {
        case 'a':
          c.mockRespond(new Response(baseResponseOptions.merge({
            body: [{
              "company_name":"Agilent Technologies, Inc. Common Stock","symbol":"A"
            }]
          })))
          break;
        default:
          connection = c;
      }
    });
  });

 *   });
 *
 * http.get('people.json').observer({
 *   next: res => {
 *     // Response came from mock backend
 *     console.log('first person', res.json()[0].name);
 *   }
 * });
 * ```
 */
export const HTTP_PROVIDERS: any[] = [
  // TODO(pascal): use factory type annotations once supported in DI
  // issue: https://github.com/angular/angular/issues/3183
  provide(Http,
          {
            useFactory: (xhrBackend, requestOptions) => new Http(xhrBackend, requestOptions),
            deps: [XHRBackend, RequestOptions]
          }),
  BrowserXhr,
  provide(RequestOptions, {useClass: BaseRequestOptions}),
  provide(ResponseOptions, {useClass: BaseResponseOptions}),
  XHRBackend
];

/**
 * @deprecated
 */
export const HTTP_BINDINGS = HTTP_PROVIDERS;

/**
 * Provides a basic set of providers to use the {@link Jsonp} service in any application.

@Component({
    selector: 'router-app',
    template: `
           <h1>Welcome to router example</h1>
           <a [router-link]="['Home']">Home</a>
           <a [router-link]="['ProductDetail', {id: 1234}]">Product Details</a>
           <router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]})

/*
 - The path property has an additional fragment /:id.
 The name of this URL fragment must match the name of the parameter property
 used in router-link. Angular will construct the URL fragment /product/1234
 for this ProductDetail route.
 - Angular also offers a mechanism to pass additional data to components at
 the time of the route configuration. For example, besides the data that
 a component needs for implementing application logic, we may need to pass
 a flag indicating if the application runs in production environment or not.
 This can be done by using the data property of the @RouteConfig annotation.
 */
@RouteConfig([
    {path: '/',            component: HomeComponent, as: 'Home'},
    {path: '/product/:id', component: ProductDetailComponent, as: 'ProductDetail'
        , data: {isProd: true}}
])

export class RouterExampleRootComponent{
}

bootstrap(RouterExampleRootComponent, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy})]);

import { Home } from '/build/scripts/directives/home.js';

@Component({
    selector: 'app'
})

@RouteConfig([
    new Route({ path: '/', component: Landing, as: 'Landing' }),
    new Route({ path: '/home', component: Home, as: 'Home' })
])

@View({
    templateUrl: './templates/parent.html',
    directives: [Landing, Home, ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})

class App {

    router: Router;
    location: Location;
    name: string;

    constructor(router: Router, location: Location) {
        this.router = router;
        this.location = location;
        this.name = 'SALEH KADDOURA';
    }
}

bootstrap(App, [ROUTER_PROVIDERS, HTTP_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);

import Home from "./home/home";
import Admin from "./admin/admin";

@RouteConfig([
    new Route({path: '/', component: Home, as: 'Home'}),
    new Route({path: '/admin/:user', component: Admin, as: 'Admin', params: {user: "John"}})
])
@Component({
    selector: "app",
    directives: [RouterOutlet, RouterLink],
    template: `
        <nav>
            <a [router-link]="['/Home']">Home</a>
            <a [router-link]="['/Admin', {'user':'John'}]">Admin</a>
        </nav>
        <main>
            <router-outlet></router-outlet>
        </main>
    `
})
class App {
}

bootstrap(App, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy})
])
    .then(
        success => console.log(`app started...`),
        error => console.log(error)
    );

import {Component, bootstrap, provide} from "angular2/angular2";
import MyAwesomeComponent from "./myAwesomeComponent"
import people from "./people";

@Component({
    selector: 'app',
    directives: [MyAwesomeComponent],
    template: `
        <h1></h1>
        <my-awesome-component></my-awesome-component>
    `
})
class App {
}

bootstrap(App, [
    provide('people', {useValue: people})
]).then(
    success => console.log("app starting..."),
    error => console.log(error)
);

import { TravelService } from './travel-service'
import { TravelList } from './travel-list'
import { TravelEdit } from './travel-edit'


@RouteConfig([
    { path: '/',            component: TravelList, as: 'List' },
    { path: '/edit/:id',    component: TravelEdit, as: 'Edit' }
])
@Component({
    selector: 'travel-app',
    template: `
        <h1>Angular 2 : Sample Travels Application</h1>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]
})
export class TravelApp {
    constructor() {
    }
}

bootstrap(TravelApp, [
    TravelService,
    ROUTER_PROVIDERS, HTTP_BINDINGS,
    provide(LocationStrategy, {useClass: HashLocationStrategy}),
    provide(APP_BASE_HREF, {useValue: '/'})
]);

/// <reference path="typings/_custom.d.ts" />

import { provide, bootstrap } from 'angular2/angular2';
import { QUESTIONS } from './data/questions';
import { ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy } from 'angular2/router';
import { Devfest } from './app';

bootstrap(Devfest, [
	ROUTER_PROVIDERS, 
	provide(Array, {useValue: QUESTIONS}),
	provide(LocationStrategy, {useClass: HashLocationStrategy})
]);