Angular 2 - a global variable for all components

Question

My angular2 application using my laravel API in different components. I thought in the future I would need to change the API URL. This means that I will have to change the API URL everywhere (in all components), I used the http get / post method for my API.

Now .. What would be the right way to implement one variable to store the API URL and use it in all my components?

• Service only to set API URL
• One of the different services for each of my API objects, for example, userAPI.service with user-invoked API calls, peopleAPI.service for API calls for people releases, gameAPI.service for expired APIs, etc.
• Anything else I still don't know about?

Answer 1

You can provide your own query parameters for this by extending the BaseRequestOptions class. Thus, the base URL of your web API will be defined in one place:

 import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http'; export class CustomRequestOptions extends BaseRequestOptions { merge(options?:RequestOptionsArgs):RequestOptions { options.url = 'http://10.7.18.21:8080/api' + options.url; return super.merge(options); } } 

In classes that use the Http object, you only need to use the path, not the entire URL. Here is an example:

 this.http.get('/someresource')... 

You need to register it when you download your application.

 bootstrap(AppComponent, [ HTTP_PROVIDERS, provide(RequestOptions, {useClass: CustomRequestOptions}) ]); 

See this link for more details:

• http://restlet.com/blog/2016/04/12/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-2/

Answer 2

The Confused bit with extends and everything as an answer provided by @thierry, you can use one common class / service in which you can store all your global variables and enter this class at boot time, making it so that the class is now accessible to of all other classes / components in the entire application, and now you can easily change the value of a variable by simply changing in one place instead of making changes in all components, here is an example of the same -

 import {Component, Injecable} from 'angular2/core'; import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'; @Injecable() export class GlobalService { public base_path: string; public headers: Headers; public requestoptions: RequestOptions; public res: Response; constructor(public http: Http, public router: Router) { this.base_path = "http://128.199.190.109/api/"; } public getRequsetOptions(url: string): RequestOptions { this.headers = new Headers(); this.headers.append("Content-type", "application/json"); this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token')); this.requestoptions = new RequestOptions({ method: RequestMethod.Get, url: url, headers: this.headers }); return this.requestoptions; } } 

and just register this class of service in bootstrap like this, -

 bootstrap(AppComponent, [ HTTP_PROVIDERS,GlobalService , XYZ... ]); 

Now this GlobalService class is available for all other classes,

also now you don’t need to register this class in the supplier list every time you use it, because angular itself initializes this for all components. Now use these global variables / function in any class like this -

 import {GlobalService} from './GlobalService'; import {Http} from 'angular2/http'; @Injectable() export class ABC { constructor(private base_path_service: GlobalService, private http: Http) {} SomeMethod(url) { return this.http.request(new Request(this.base_path_service.getRequsetOptions(url))) .map(res=> { // DO your code }); }