Create a Local Weather Web Application

In this chapter, we will be designing and building a simple Local Weather app with Angular and a third-party web API, using an iterative development methodology. You will focus on delivering value first, while learning about the nuances and optimal ways of using Angular, TypeScript, Visual Studio Code, Reactive Programming, and RxJS. Before we pe into coding, we will go over the philosophy behind Angular and ensure that your development environment is optimized and can enable collaboration and effortless information radiation.

Each section of this chapter will introduce you to new concepts, best practices, and optimal ways of leveraging these technologies and cover the bases to close any knowledge gaps you may have about web and modern JavaScript development basics.

In this chapter, you will learn Angular fundamentals to build a simple web app and become familiar with the new Angular platform and full-stack architecture.

In this chapter, you will learn the following:

• Get introduced to Angular and the philosophy behind it
• Configuring a repository with an optimal folder structure for full-stack development
• Using Angular CLI to generate your Angular web application
• Optimizing Visual Code for Angular & TypeScript development
• Planning out your roadmap using Waffle as a GitHub-connected Kanban board
• Crafting a new UI element to display current weather information using components and interfaces
• Using Angular Services and HttpClient to retrieve data from OpenWeatherMap APIs
• Leveraging observable streams to transform data using RxJS

The code samples provided in this book require Angular version 5 and 6. Angular 5 code is runtime compatible with Angular 6. Angular 6 will be supported in LTS until October 2019. The most up-to-date versions of the code repositories may be found at the following:

• For Chapters 2 to 6, LocalCast Weather, at: Github.com/duluca/local-weather-app
• For Chapters 7 to 12, LemonMart, at: Github.com/duluca/lemon-mart