एक कोणीय 2 आवेदन bootstrap कैसे अतुल्यकालिक रूप से

Question

कैसे अतुल्यकालिक रूप से एक angular1 आवेदन bootstrap करने के लिए एक excellent article नहीं है। यह हमें बूटस्ट्रैपिंग से पहले सर्वर से जेसन लाने में सक्षम बनाता है। कोणीय 2 के साथ एक ही

(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"]); 
     }); 
    } 
}()); 

मैं कैसे प्राप्त करते हैं:

मुख्य कोड यहाँ है?

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 }) 
    ]); 
    }); 

तो फिर तुम निर्भरता इंजेक्शन द्वारा विन्यास के लिए उपयोग किया जा सकता है:: https://plnkr.co/edit/kUG4Ee9dHx6TiJSa2WXK?p=preview:

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

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

इस plunkr देखें

यहां एक नमूना है।

Answer 2

मैं एक ऐसी ही समस्या का समाधान करने की कोशिश कर रहा था और मैं केवल एसिंक्रोनस रूप से आवेदन bootstrap के लिए नहीं की जरूरत है, लेकिन यह भी अपने आवेदन में एक अतुल्यकालिक रूप से initialised सेवा का उपयोग करने के लिए। यह समाधान है, हो सकता है यह किसी के लिए उपयोगी हो सकता है:

let injector = ReflectiveInjector.resolveAndCreate([Service1, 
{ 
    provide: Service2, 
    useFactory: (s1: Service1) => new Service1(s2), 
    deps: [Service1] 
}]); 

let s1: Service1 = injector.get(Service1); 
let s2: Service2 = injector.get(Service2); 

s2.initialize().then(() => { 
bootstrap(Application, [ 
    ...dependencies, 
    { 
     provide: Service2, 
     useValue: s2  // this ensures that the existing instance is used 
    } 
    // Service2 - this would create a new instance and the init would be lost 
    ]); 
}); 

Answer 3

थियरी TEMPLIER विधि भी jQuery के साथ काम करता है। यहां कोणीय 2.3.1 (फ़ाइल main.ts) के साथ मेरा समाधान है:

import './polyfills.ts'; 

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode } from '@angular/core'; 
import { environment } from './environments/environment'; 
import { AppModule } from './app/app.module'; 
declare var $: any; 

if (environment.production) { 
    enableProdMode(); 
} 

$.ajax({ 
    'url': './assets/config.json', 
    'type': 'GET', 
    'success': function(data) { 
     platformBrowserDynamic(
     [ 
      { 
      provide: 'appConfig', 
      useValue: data 
      } 
     ] 
    ).bootstrapModule(AppModule); 
    } 
});