2c8fcec432
Currently, core depends on DomRenderer, which depends on the browser. This means that if you depend on angular2/core, you will always pull in the browser dom adapter and the browser render, regardless if you need them or not. This PR moves the browser dom adapter and the browser renderer out of core. BREAKING CHANGE If you import browser adapter or dom renderer directly (not via angular2/core), you will have to change the import path.
128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
export {
|
|
BROWSER_PROVIDERS,
|
|
ELEMENT_PROBE_BINDINGS,
|
|
ELEMENT_PROBE_PROVIDERS,
|
|
inspectNativeElement,
|
|
BrowserDomAdapter,
|
|
By,
|
|
Title,
|
|
DOCUMENT
|
|
} from 'angular2/src/platform/browser_common';
|
|
|
|
import {Type, isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
|
|
import {Promise} from 'angular2/src/facade/promise';
|
|
import {
|
|
BROWSER_PROVIDERS,
|
|
BROWSER_APP_COMMON_PROVIDERS,
|
|
initDomAdapter
|
|
} from 'angular2/src/platform/browser_common';
|
|
import {COMPILER_PROVIDERS} from 'angular2/compiler';
|
|
import {ComponentRef, platform, reflector} from 'angular2/core';
|
|
import {ReflectionCapabilities} from 'angular2/src/core/reflection/reflection_capabilities';
|
|
import {XHRImpl} from "angular2/src/platform/browser/xhr_impl";
|
|
import {XHR} from 'angular2/compiler';
|
|
import {Provider} from 'angular2/src/core/di';
|
|
|
|
/**
|
|
* An array of providers that should be passed into `application()` when bootstrapping a component.
|
|
*/
|
|
export const BROWSER_APP_PROVIDERS: Array<any /*Type | Provider | any[]*/> = CONST_EXPR([
|
|
BROWSER_APP_COMMON_PROVIDERS,
|
|
COMPILER_PROVIDERS,
|
|
new Provider(XHR, {useClass: XHRImpl}),
|
|
]);
|
|
|
|
/**
|
|
* Bootstrapping for Angular applications.
|
|
*
|
|
* You instantiate an Angular application by explicitly specifying a component to use
|
|
* as the root component for your application via the `bootstrap()` method.
|
|
*
|
|
* ## Simple Example
|
|
*
|
|
* Assuming this `index.html`:
|
|
*
|
|
* ```html
|
|
* <html>
|
|
* <!-- load Angular script tags here. -->
|
|
* <body>
|
|
* <my-app>loading...</my-app>
|
|
* </body>
|
|
* </html>
|
|
* ```
|
|
*
|
|
* An application is bootstrapped inside an existing browser DOM, typically `index.html`.
|
|
* Unlike Angular 1, Angular 2 does not compile/process providers in `index.html`. This is
|
|
* mainly for security reasons, as well as architectural changes in Angular 2. This means
|
|
* that `index.html` can safely be processed using server-side technologies such as
|
|
* providers. Bindings can thus use double-curly `{{ syntax }}` without collision from
|
|
* Angular 2 component double-curly `{{ syntax }}`.
|
|
*
|
|
* We can use this script code:
|
|
*
|
|
* ```
|
|
* @Component({
|
|
* selector: 'my-app',
|
|
* template: 'Hello {{ name }}!'
|
|
* })
|
|
* class MyApp {
|
|
* name:string;
|
|
*
|
|
* constructor() {
|
|
* this.name = 'World';
|
|
* }
|
|
* }
|
|
*
|
|
* main() {
|
|
* return bootstrap(MyApp);
|
|
* }
|
|
* ```
|
|
*
|
|
* When the app developer invokes `bootstrap()` with the root component `MyApp` as its
|
|
* argument, Angular performs the following tasks:
|
|
*
|
|
* 1. It uses the component's `selector` property to locate the DOM element which needs
|
|
* to be upgraded into the angular component.
|
|
* 2. It creates a new child injector (from the platform injector). Optionally, you can
|
|
* also override the injector configuration for an app by invoking `bootstrap` with the
|
|
* `componentInjectableBindings` argument.
|
|
* 3. It creates a new `Zone` and connects it to the angular application's change detection
|
|
* domain instance.
|
|
* 4. It creates an emulated or shadow DOM on the selected component's host element and loads the
|
|
* template into it.
|
|
* 5. It instantiates the specified component.
|
|
* 6. Finally, Angular performs change detection to apply the initial data providers for the
|
|
* application.
|
|
*
|
|
*
|
|
* ## Bootstrapping Multiple Applications
|
|
*
|
|
* When working within a browser window, there are many singleton resources: cookies, title,
|
|
* location, and others. Angular services that represent these resources must likewise be
|
|
* shared across all Angular applications that occupy the same browser window. For this
|
|
* reason, Angular creates exactly one global platform object which stores all shared
|
|
* services, and each angular application injector has the platform injector as its parent.
|
|
*
|
|
* Each application has its own private injector as well. When there are multiple
|
|
* applications on a page, Angular treats each application injector's services as private
|
|
* to that application.
|
|
*
|
|
* ## API
|
|
*
|
|
* - `appComponentType`: The root component which should act as the application. This is
|
|
* a reference to a `Type` which is annotated with `@Component(...)`.
|
|
* - `customProviders`: An additional set of providers that can be added to the
|
|
* app injector to override default injection behavior.
|
|
*
|
|
* Returns a `Promise` of {@link ComponentRef}.
|
|
*/
|
|
export function bootstrap(
|
|
appComponentType: Type,
|
|
customProviders?: Array<any /*Type | Provider | any[]*/>): Promise<ComponentRef> {
|
|
reflector.reflectionCapabilities = new ReflectionCapabilities();
|
|
initDomAdapter();
|
|
|
|
let appProviders =
|
|
isPresent(customProviders) ? [BROWSER_APP_PROVIDERS, customProviders] : BROWSER_APP_PROVIDERS;
|
|
return platform(BROWSER_PROVIDERS).application(appProviders).bootstrap(appComponentType);
|
|
} |