Building Reusable Angular Services: Configuration Management

This course will teach you how to eliminate hard-coding in your Angular application by creating a configuration management service. You'll also learn how to store default values into a JSON file, local storage, and SQL Server.
Course info
Rating
(27)
Level
Intermediate
Updated
Dec 22, 2017
Duration
1h 31m
Table of contents
Description
Course info
Rating
(27)
Level
Intermediate
Updated
Dec 22, 2017
Duration
1h 31m
Description

Most programmers know you should not hard-code values in your application. In this course, Building Reusable Angular Services: Configuration Management, you will learn how to create a service to supply values to your application and avoid hard-coding. Next, you will learn to store default values in a JSON file, local storage, and in a SQL Server table. In addition, you will explore how to let the user set their own default values. Using the service built in this course will allow you to eliminate hard-coding in your application. At the end of this course, you will have a service you can use in your Angular applications to eliminate hard-coded values.

About the author
About the author

Paul loves teaching and technology, and has been teaching tech and business topics for over 30 years. Paul helps clients develop applications, and instructs them on the best use of technology.

More from the author
VB.NET Fundamentals
Beginner
3h 25m
May 21, 2019
XML Fundamentals in C#
Intermediate
1h 47m
Mar 27, 2019
More courses by Paul D. Sheriff
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, everyone! My name is Paul Sheriff and welcome to my course, Building Reusable Angular Services: Configuration Management. This course is another in my series on building reusable components for your Angular applications. I am a business solutions architect for Fairway Technologies, a premier provider of expert technology consulting and software development services. Every developer knows you should not hard-code values in your applications so where should you put these values? An Angular service to return a class with these default values is an ideal solution. In this course you build a class to hold default values and return those values from an Angular service. This service retrieves these values from a JSON file, from local storage, and from SQL Server via a Web API call. Throughout this course you will do the following: Create a configuration service class, provide defaults in an application settings class, read default values from a JSON file, allow the user to set their own default values by placing them into local storage, create a Web API using ASP. NET Core, create a table in SQL Server to store values to be returned via a Web API call. By the end of this course you will have created a system to help you eliminate hard-coded values within any Angular application you create. You can decide in each application where you want the default values to be stored. Before watching this course I am assuming you are familiar with Angular, JSON, the Web API, TypeScript, and HTML. I hope you'll join me on your mission to eliminate hard-coded values with my course entitled, Building Reusable Angular Services: Configuration Management at Pluralsight. com.

Create a Class to Hold Global Settings
Hello, everyone! Paul Sheriff here with Pluralsight. This is the second part of a series called Building Reusable Angular Services and this one focuses on configuration management. This first module is Create a Class to Hold Global Settings. The goals for this particular module are to create a service that will hold global settings or default values for your Angular application. We're going to learn to retrieve and store settings in a class, in a JSON file, in local storage, and SQL Server which we'll access via the Web API. Let's get started. So why configuration management? Well, we want to be able to avoid hard-coding any values in our applications. We want to be able to create these defaults, what we think the user is going to want, but allow the user to change those default values as they move throughout the program and then we use these defaults everywhere in our application where we might otherwise hard-code those values. For this course I'm going to assume that you are an Angular developer. That means that you are familiar with Angular, TypeScript, and the Web API. If you are unfamiliar with any of these topics, check out some of these related Pluralsight courses such as Angular: Getting Started, Angular: Forms, Play by Play: Angular RxJS, or Angular: Fundamentals.

Read Settings from a JSON File
Hello, everybody! Paul Sheriff here with Pluralsight. This module is Read Settings from a JSON File. The goals for this particular module are to add some Bootstrap styles in because we're going to create a settings input screen and we want to be able to navigate between that screen and the product page. So we'll add some Bootstrap so we can have some nice navigation and make our screens look a little bit better as well. We're then going to take those same two settings that we had in our AppSettings class we're going to put them into a JSON file and then we're going to read those settings out of that file using the HttpClient and we're going to add in some exception handling as well. Let's get started.

Store Settings in Local Storage
Hello, everyone! Paul Sheriff here with Pluralsight. This module is Store Settings in Local Storage. The goals for this particular module are to learn how to work with local storage. We're going to save the settings that we read from that JSON file into local storage. We'll then retrieve them and either use the ones that we retrieve or if we don't find them, we'll then get them from the JSON file, and of course, if we want to put things back to their defaults, we're going to learn how to delete settings from local storage as well. Let's get started.

Retrieve Settings from SQL Server via a Web API Call
Hello, everybody! Paul Sheriff here with Pluralsight. This module is Retrieve Settings from a SQL Server via a Web API Call. The goals for this particular module are to create an AppSettings table, create a Web API using ASP. NET Core, modify the Angular service to call the Web API. Let's get started. So we're on the last part of building our configuration management architecture here where we're going to create a Web API that we will connect to the SQL Server to grab the data now for our defaults. We'll then send that data back to our AppSettingsService. So the steps we're going to go through to create this will be to create an AppSettings table, create the Web API using ASP. NET Core, we're going to add the Entity Framework into our project, add a Get method to the ConfigController class, configure the Web API for JSON and CORS, and modify the Angular service to call the Web API. So quite a series of steps that we're going to go through here.