Using Angular Services and HttpClient to retrieve data
Now you need to connect your CurrentWeather
component to the OpenWeatherMap
APIs to pull live weather data. However, we don't want to insert this code directly into our component. If we did this, we would have to update the component if the API changed. Now imagine an app with dozens or hundreds of views and imagine how this would create a significant maintainability challenge.
Instead, we'll leverage an Angular service, a singleton class, which can provide the current weather information to our component and abstract away the source of the data. The abstraction decouples the UI from the Web API. Leveraging this separation of concerns, in the future, we could enhance our service to pull from multiple APIs or a local cache to load weather information without having to change the UI code.
In the upcoming sections, we'll go over the following steps to accomplish this goal:
- Creating a new Angular...