javascript - ব্যাকএন্ড থেকে অ্যাঙ্গুলার 2 বুটস্ট্র্যাপ পদ্ধতিতে রেন্ডার করা প্যারামিটারগুলি কীভাবে পাস করবেন




angular (3)

কৌণিক 2 বুটস্ট্র্যাপ পদ্ধতিতে ব্যাকএন্ডে রেন্ডার করা আর্গুমেন্টগুলি পাস করার কোনও উপায় আছে কি? BaseRequestOptions থেকে প্রদত্ত মান সহ BaseRequestOptions ব্যবহার করে সমস্ত অনুরোধের জন্য আমি BaseRequestOptions শিরোনাম সেট করতে চাই। আমার main.ts ফাইলটি দেখতে এমন দেখাচ্ছে:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from "./app.component.ts";

bootstrap(AppComponent);

আমি এই আর্গুমেন্টগুলি কীভাবে মূল উপাদানগুলিতে ( https://stackoverflow.com/a/35553650/3455681 ) পাস করতে পারি তা খুঁজে পেয়েছি তবে bootstrap পদ্ধতিতে আগুন জ্বালানোর সময় আমার এটি দরকার ... কোনও ধারণা?

সম্পাদনা:

webpack.config.js সামগ্রী:

module.exports = {
  entry: {
    app: "./Scripts/app/main.ts"
  },

  output: {
    filename: "./Scripts/build/[name].js"
  },

  resolve: {
    extensions: ["", ".ts", ".js"]
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};

Angular2 চূড়ান্ত প্রকাশে, অ্যাপ্লিকেশনটি যা আপনাকে চান তা অর্জন করতে ব্যবহার করা যেতে পারে।

আমি একটি সম্পূর্ণ উদাহরণ সহ একটি গিস্ট লিখেছি: https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9

সংক্ষিপ্ত উদাহরণটি JSON ফাইলগুলি থেকে পড়ছে তবে সহজেই একটি REST এন্ডপয়েন্ট থেকে পড়তে পরিবর্তন করা যেতে পারে।

আপনার যা প্রয়োজন তা মূলত:

ক) আপনার বিদ্যমান মডিউল ফাইলে অ্যাপ্লিকেশনালাইজার সেট আপ করুন:

import { APP_INITIALIZER } from '@angular/core';
import { BackendRequestClass } from './backend.request';
import { HttpModule } from '@angular/http';

...

@NgModule({
    imports: [
        ...
        HttpModule
    ],
    ...
    providers: [
        ...
        ...
        BackendRequestClass,
        { provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(), deps: [BackendRequestClass], multi: true }
    ],
    ...
});

এই লাইনগুলি আপনার অ্যাপ্লিকেশন শুরু হওয়ার আগে ব্যাকেন্ডআরকুইস্টক্লাস ক্লাস থেকে লোড () পদ্ধতিটি কল করবে।

আপনি যদি লাইব্রেরিতে অন্তর্নির্মিত কৌণিক 2 ব্যবহার করে ব্যাকএন্ডে এইচটিপি কল করতে চান তবে আপনি "আমদানি" বিভাগে "এইচটিপিএমডিউল" সেট করেছেন তা নিশ্চিত করুন।

খ) একটি শ্রেণী তৈরি করুন এবং "ব্যাকএন্ড.আরকুয়েস্ট.টিস" ফাইলটির নাম দিন:

import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class BackendRequestClass {

    private result: Object = null;

    constructor(private http: Http) {

    }

    public getResult() {
        return this.result;
    }

    public load() {
        return new Promise((resolve, reject) => {
            this.http.get('http://address/of/your/backend/endpoint').map( res => res.json() ).catch((error: any):any => {
                reject(false);
                return Observable.throw(error.json().error || 'Server error');
            }).subscribe( (callResult) => {
                this.result = callResult;
                resolve(true);
            });

        });
    }
}

গ) ব্যাকএন্ড কলের বিষয়বস্তু পড়তে আপনাকে কেবল পছন্দের যে কোনও শ্রেণিতে ব্যাকএন্ডরয়েউকাস্ট ক্লাস ইনজেক্ট করতে হবে এবং getResult () কল করতে হবে। উদাহরণ:

import { BackendRequestClass } from './backend.request';

export class AnyClass {
    constructor(private backendRequest: BackendRequestClass) {
        // note that BackendRequestClass is injected into a private property of AnyClass
    }

    anyMethod() {
        this.backendRequest.getResult(); // This should return the data you want
    }
}

এটি যদি আপনার সমস্যার সমাধান করে তবে আমাকে জানান।


আপনার এন্ট্রি পয়েন্ট কলিং বুটস্ট্র্যাপ নিজেই না করে আপনি কাজটি করে এমন একটি ফাংশন তৈরি এবং রফতানি করতে পারেন:

export function doBootstrap(data: any) {
    platformBrowserDynamic([{provide: Params, useValue: new Params(data)}])
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

আপনি নিজের সেটআপের (ওয়েবপ্যাক / সিস্টেমজেএস) উপর নির্ভর করে গ্লোবাল অবজেক্টে এই ফাংশনটি রাখতে পারেন। এটি এওটি-সামঞ্জস্যপূর্ণ।

বুটস্ট্র্যাপটি বিলম্বিত করার জন্য এটির অতিরিক্ত সুবিধা রয়েছে, যখন এটি উপলব্ধি করে। উদাহরণস্বরূপ, আপনি যখন কোনও ব্যবহারকারী ফর্ম পূরণের পরে এজেএক্স কল হিসাবে এই ব্যবহারকারী ডেটাটি পুনরুদ্ধার করবেন। এই ডেটা সহ কেবল রফতানি করা বুটস্ট্র্যাপ ফাংশনটি কল করুন।


update2

চূড়ান্ত উদাহরণ

এওটি আপডেট করুন

এওটি দিয়ে কাজ করার জন্য কারখানার বন্ধটি সরানো দরকার

function loadContext(context: ContextService) {
  return () => context.load();
}

@NgModule({
  ...
  providers: [ ..., ContextService, { provide: APP_INITIALIZER, useFactory: loadContext, deps: [ContextService], multi: true } ],

https://github.com/angular/angular/issues/11262 এও দেখুন

একটি আরসি.6 এবং 2.0.0 চূড়ান্ত উদাহরণ আপডেট করুন

function configServiceFactory (config: ConfigService) {
  return () => config.load();
}

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule,
        routes,
        FormsModule,
        HttpModule],
    providers: [AuthService,
        Title,
        appRoutingProviders,
        ConfigService,
        { provide: APP_INITIALIZER,
          useFactory: configServiceFactory
          deps: [ConfigService], 
          multi: true }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

শুরু করার জন্য অপেক্ষা করার প্রয়োজন না হলে, need শ্রেণীর অ্যাপমোডুল od the এর নির্মাতাও ব্যবহার করতে পারেন:

class AppModule {
  constructor(/*inject required dependencies */) {...} 
}

ইঙ্গিত (চক্রীয় নির্ভরতা)

উদাহরণস্বরূপ রাউটার ইনজেকশনের কারণে চক্রীয় নির্ভরতা হতে পারে। চারপাশে কাজ করতে, ইনজেক্টর ইনজেক্ট করুন এবং এর মাধ্যমে নির্ভরতা পান

this.myDep = injector.get(MyDependency);

সরাসরি MyDependency ইনজেক্ট করার পরিবর্তে:

@Injectable()
export class ConfigService {
  private router:Router;
  constructor(/*private router:Router*/ injector:Injector) {
    setTimeout(() => this.router = injector.get(Router));
  }
}

হালনাগাদ

এটি আরসি 5 তে একই কাজ করা উচিত তবে তার সরবরাহকারীকে providers: [...] bootstrap(...) পরিবর্তে রুট মডিউলটির bootstrap(...)

(নিজেকে এখনও পরীক্ষা করা হয়নি)।

হালনাগাদ

এঙ্গুলারের অভ্যন্তরে এটি সম্পূর্ণরূপে করার একটি আকর্ষণীয় পদ্ধতির ব্যাখ্যা এখানে দেওয়া হয়েছে https://github.com/angular/angular/issues/9047#issuecomment-224075188

আপনি অ্যাপ্লিকেশন শুরু করতে পারবেন যা অ্যাপ্লিকেশন শুরু হওয়ার সাথে সাথে কোনও ক্রিয়াকলাপ কার্যকর করবে এবং যদি ফাংশন কোনও প্রতিশ্রুতি দেয় তবে এটি কী সরবরাহ করে তা বিলম্ব করে। এর অর্থ অ্যাপটি এতটা বিলম্ব না করেই আরম্ভ করা যেতে পারে এবং আপনি বিদ্যমান পরিষেবা এবং কাঠামোর বৈশিষ্ট্যগুলিও ব্যবহার করতে পারেন।

উদাহরণস্বরূপ, ধরুন আপনার কাছে একটি বহু-ভাড়াটে সমাধান রয়েছে যেখানে সাইটের তথ্যটি যে ডোমেন নাম থেকে পরিবেশিত হচ্ছে তার উপর নির্ভর করে। এটি [নাম] .letterpress.com বা সম্পূর্ণ হোস্টনামের সাথে মিলে যাওয়া একটি কাস্টম ডোমেন হতে পারে। আমরা APP_INITIALIZER ব্যবহার করে APP_INITIALIZER প্রতিশ্রুতির পিছনে থাকা এই সত্যটি লুকিয়ে রাখতে APP_INITIALIZER

বুটস্ট্র্যাপে:

{provide: APP_INITIALIZER, useFactory: (sites:SitesService) => () => sites.load(), deps:[SitesService, HTTP_PROVIDERS], multi: true}),

sites.service.ts:

@Injectable()
export class SitesService {
  public current:Site;

  constructor(private http:Http, private config:Config) { }

  load():Promise<Site> {
    var url:string;
    var pos = location.hostname.lastIndexOf(this.config.rootDomain);
    var url = (pos === -1)
      ? this.config.apiEndpoint + '/sites?host=' + location.hostname
      : this.config.apiEndpoint + '/sites/' + location.hostname.substr(0, pos);
    var promise = this.http.get(url).map(res => res.json()).toPromise();
    promise.then(site => this.current = site);
    return promise;
  }

দ্রষ্টব্য: config কেবলমাত্র একটি কাস্টম কনফিগার ক্লাস। rootDomain এই উদাহরণের জন্য '.letterpress.com' হবে এবং aptaincodeman.letterpress.com মতো aptaincodeman.letterpress.com মঞ্জুরি দেয়।

যে কোনও উপাদান এবং অন্যান্য পরিষেবাদিগুলিতে এখন .current তাদের মধ্যে .current পারে এবং .current সম্পত্তি ব্যবহার করতে পারে যা অ্যাপ্লিকেশনটির মধ্যে কোনও প্রতিশ্রুতির জন্য অপেক্ষা করার দরকার নেই এমন একটি কংক্রিট জনবহুল অবজেক্ট হবে।

এই পদ্ধতির সাহায্যে প্রারম্ভিক বিলম্বতা কেটে গেছে যা অন্যথায় বেশ লক্ষণীয় ছিল যদি আপনি বড় কৌণিক বান্ডিলটি লোড হওয়ার অপেক্ষায় থাকেন এবং বুটস্ট্র্যাপ এমনকি শুরুর আগে আরেকটি http অনুরোধ রইল।

মূল

আপনি এটি অ্যাঙ্গুলার্স নির্ভরতা ইনজেকশন ব্যবহার করে পাস করতে পারেন:

var headers = ... // get the headers from the server

bootstrap(AppComponent, [{provide: 'headers', useValue: headers})]);
class SomeComponentOrService {
   constructor(@Inject('headers') private headers) {}
}

বা প্রস্তুত BaseRequestOptions সরাসরি পছন্দ সরবরাহ করুন

class MyRequestOptions extends BaseRequestOptions {
  constructor (private headers) {
    super();
  }
} 

var values = ... // get the headers from the server
var headers = new MyRequestOptions(values);

bootstrap(AppComponent, [{provide: BaseRequestOptions, useValue: headers})]);




angular