Click here to Skip to main content
15,868,121 members
Articles / AngularJs

Configuration Settings for Angular Applications

Rate me:
Please Sign up or sign in to vote.
4.82/5 (3 votes)
17 Jul 2017CPOL4 min read 36.5K   4   2
Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class.

Angular Configuration Settings

Just like in .NET applications, you might want to have configuration settings in your Angular applications that you can access from any component or service class. There are many approaches you can take for global settings, however, I am going to use a service that can be injected into any class. I think the flexibility of using a service is an ideal method for providing application-wide settings to any class that needs them. This blog post will describe the process of creating this service.

An AppSettings Class

Create a class with properties to hold the values you wish to use in your Angular application. If you have a Product form that the user will be using to add new products to a database, you might want to provide some default values when they are adding a new product. Below is a class that I named AppSettings. This class has two properties; defaultUrl and defaultPrice. These values will be set into a Product object in a product component class a little later.

JavaScript
export class AppSettings {
  defaultUrl: string = "http://www.fairwaytech.com"
  defaultPrice: number = 1
}

To create this class, add a \shared folder under the \src\app folder and add a new Typescript file named AppSettings.ts. Enter the code shown in the snippet above.

An AppSettingsService Class

It is now time to create a service class to return an instance of the AppSettings class. Add a new Typescript file under the \shared folder named AppSettingsService.ts. Add the code shown below:

JavaScript
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { AppSettings } from "./appsettings";
@Injectable()
export class AppSettingsService {
  getSettings(): Observable<AppSettings> {
    let settings = new AppSettings();
    return Observable.of<AppSettings>(settings);
  }
}

This service class is fairly standard as far as service classes go. In the getSettings() method, you create a new instance of the AppSettings class and return that object from this service. The main reason I create a service here is to provide the flexibility to change the implementation of how I retrieve the settings later. For example, I might choose to read the settings from a JSON file, or I might even make a Web API call to get the settings. Any method that calls this service will always make the same call regardless of where those settings are stored. The calling methods don’t know if the implementation changes, they still receive the same settings class.

Using the AppSettingsService Class

To retrieve the settings from this service class, import the AppSettings and AppSettingsService classes in your component.

JavaScript
import { AppSettings } from '../shared/appsettings';
import { AppSettingsService } from '../shared/appsettings.service';

Add the AppSettingsService to the constructor to tell Angular to inject the service into this class. Create a private property in your class to hold the settings retrieved from the getSettings() method. In the ngOnInit() method, make the call to the getSettings() method using the subscribe method. The subscribe method has three parameters you can pass; a success function, an error function, and a completed function. In the success function, set the result returned to the settings property. In this sample, I am ignoring the error. In the completed function, I create a new instance of the Product object and assign the price and url properties to the defaults returned in the settings object. The Product object is bound to field on my detail page as shown in Figure 1.

JavaScript
export class ProductDetailComponent implements OnInit {
  constructor(
    private appSettingsService: AppSettingsService) {
  }
  product: Product;
  private settings: AppSettings;
  
  ngOnInit(): void {
    this.appSettingsService.getSettings()
      .subscribe(settings => this.settings = settings,
        () => null,
        () => {
          this.product = new Product();
          this.product.price = this.settings.defaultPrice;
          this.product.url = this.settings.defaultUrl;
        });
  }
}

Image 2

Figure 1: The Price and URL fields are filled in with defaults from the AppSettings class.

Get Settings from a JSON File

Instead of hard-coding the settings values, let’s put those settings into a JSON file. Create a folder called \assets under the \src\app folder. Add a JSON file named appsettings.json. Add the following into this file.

JavaScript
{
  "defaultUrl": "http://angular.io",
  "defaultPrice": 2
}

Change the AppSettingsService class to read from this file. Import the Http and Response classes from @angular/http. Import the ReactiveJS operators map and catch, and the observable, throw. Modify the getSettings() method to call the http.get() method, passing in the path to the JSON file you created. I use a function named extractData() to extract the response returned from calling the map() function. I also created a handleErrors() method to handle any exceptions.

JavaScript
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { AppSettings } from "./appsettings";
@Injectable()
export class AppSettingsService {
  constructor(private http: Http) {
  }
  getSettings(): Observable<AppSettings> {   
    return this.http.get("/src/app/assets/appsettings.json")
      .map(this.extractData)
      .catch(this.handleErrors);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }
  private handleErrors(error: any): Observable<any> {
    console.error('An error occurred', error);
    return Observable.throw(error.message || error);
  }
} 

If you don’t already have it, you need to import the HttpModule from @angular/http in your app.module.ts file. Add the HttpModule to the imports property in the @NgModule() decorator function.

Summary

In this blog post, you learned an approach for handling application-wide settings for Angular applications. A service approach is the most flexible approach to providing settings to any other class in your application. You can choose to store your settings in a class, in an external JSON file, or you can even make a call to a Web API to retrieve the values. The consumers of your service don’t care where the values come from, nor do they have to change the call to the service.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Employed (other) PDS Consulting
United States United States
Paul has been in the IT industry over 35 years. In that time he has successfully assisted hundreds of companies architect software applications to solve their toughest business problems. Paul has been a teacher and mentor through various mediums such as video courses, blogs, articles and speaking engagements at user groups and conferences around the world. Paul has 28+ courses in the www.pluralsight.com library (https://www.pluralsight.com/author/paul-sheriff) on topics ranging from LINQ, JavaScript, Angular, MVC, WPF, XML, jQuery and Bootstrap. Contact Paul at psheriff@pdsa.com.

Comments and Discussions

 
Questionimport { AppSettings } from "../assets/appSettings"; ERROR Pin
nakulkundra25-Feb-18 17:19
nakulkundra25-Feb-18 17:19 
QuestionCompare against environments.ts? Pin
eflat1-Aug-17 13:38
eflat1-Aug-17 13:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.