Angular 2 - global variable for all components

Question

My angular2 app consuming my backend laravel API in many different components. I've been thinking that in the future, I will need to change the API URL. That means that I will have to change my API URL everywhere (in all components) I have used http get/post method to my API.

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

A service just to set get the API URL
One different service for each of my API objects, for example userAPI.service with user-releated API Calls, peopleAPI.service for people-releatd API Calls, gameAPI.service for game-releated API calls etc..
Anything different that I still don't know about?

Thierry Templier · Accepted Answer · 2016-04-17T06:10:52.873

6

You could provide your own request options for this by extending the BaseRequestOptions class. This way the based 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 the classes that use the Http object, you only need now to use the path and not the whole URL. Here is a sample:

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

You need then to register it when bootstrapping 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/

edited Apr 17 '16 at 06:10

answered Apr 16 '16 at 07:48

Thierry Templier

198,364
44
396
360

Awesome!! but when I use `provide` in my `boot.ts` I get the following error: `Error: ReferenceError: provide is not defined`. That's it: `import {CustomRequestOptions} from "./helpers/CustomRequestOptions"; bootstrap(AppComponent, [ JwtService, HTTP_PROVIDERS, ROUTER_PROVIDERS, MATERIAL_PROVIDERS, SidenavService, provide(RequestOptions, {useClass: CustomRequestOptions}) ]); ` – TheUnreal Apr 16 '16 at 08:18
Yes, you need to import the "provide" function from the "angular2/core" module... – Thierry Templier Apr 16 '16 at 08:22
1

That's very nice, just to be aware that it doesn't work for **http.post* and **http.put** , but it works for **http.request** , so you can have something like : **this.http.request('/user/1', { body: body, method: 'PUT' })** – Tiberiu Popescu Apr 18 '16 at 22:45

score 1 · Answer 2 · answered Apr 16 '16 at 19:54

Bit Confused with extends and all as answer provided by @thierry, you can use one common class/service in which you can store all your global variables and inject that class at the time of bootstrapping by doing so that class is now available to all another classes/components throughout the app and also now you can easily change your variable value by just changing at one place instead of making changes in all components here is example of 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 service class in bootstrap like this -

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

Now this GlobalService class is available to all another classes,

also now no need to register this class in the list of providers every time when you use because angular itself initialize this to 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
            });
    }

Angular 2 - global variable for all components

2 Answers2

Linked