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

大佬教程收集整理的这篇文章主要介绍了如何异步引导Angular 2应用程序，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

实际上，您需要在应用程序本身之外显式创建一个注入器以获取实例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 。

解决方法

(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应用程序全部内容，希望文章能够帮你解决如何异步引导Angular 2应用程序所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。