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

Question

有一个excellent article如何异步引导 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

事实上，您需要在应用程序本身之外显式创建一个注入(inject)器，以获取 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 })
    ]);
  });

然后你就可以通过依赖注入(inject)访问配置了:

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 .