如何异步引导Angular 2应用程序

Question

有一篇很棒的文章，介绍如何异步引导angular1应用程序。这使我们能够在引导之前从服务器获取json。

主要代码在这里：

(function() {
    var myApplication = angular.module("myApplication", []);

    fetchData().then(bootstrapApplication);

    function fetchData() {
        var initInjector = angular.injector(["ng"]);
        var $http = initInjector.get("$http");

        return $http.get("/path/to/data.json").then(function(response) {
            myApplication.constant("config", response.data);
        }, function(errorResponse) {
            // Handle error case
        });
    }

    function bootstrapApplication() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ["myApplication"]);
        });
    }
}());

如何使用Angular 2达到相同的目的？

Answer 1

实际上，您需要在应用程序本身之外显式创建一个注入器以获取实例Http来执行请求。然后，在增强应用程序时，可以将已加载的配置添加到提供程序中。

这是一个示例：

import {bootstrap} from 'angular2/platform/browser';
import {provide, Injector} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {AppComponent} from './app.component';
import 'rxjs/Rx';

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);

http.get('data.json').map(res => res.json())
  .subscribe(data => {
    bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('config', { useValue: data })
    ]);
  });

然后，您可以通过依赖项注入访问配置：

import {Component, Inject} from 'angular2/core';

@Component({
  selector: 'app',
  template: `
    <div>
      Test
    </div>
  `
})
export class AppComponent {
  constructor(@Inject('config') private config) {
    console.log(config);
  }
}

请参阅以下代码：https
://plnkr.co/edit/kUG4Ee9dHx6TiJSa2WXK
? p
= preview 。