Angular is an open source project maintained by Google and a community of developers. The new Angular platform is vastly different from the legacy framework you may have used in the past. A collaboration with Microsoft makes TypeScript, which is a superset of JavaScript, the default development language, enabling developers to target legacy browsers such as Internet Explorer 11, while writing modern JavaScript code that is supported in evergreen browsers such as Chrome, Firefox, and Edge. The legacy versions of Angular, versions in the 1.x.x range, are now referred to as AngularJS. Version 2.0.0 and higher versions are simply called Angular. Where AngularJS is a monolithic JavaScript Single Page Application (SPA) framework, Angular is a platform that is capable of targeting browsers, hybrid-mobile frameworks, desktop applications, and server-side rendered...

Most, if not all, of the content, patterns, and practices in this book are compatible with Angular 4 and up. Angular 6 is the latest version of Angular, which brings a lot of under-the-cover improvements to the platform and overall stability and cohesion across the ecosystem. The development experience is being vastly improved with additional CLI tools that make it easier to update versions of packages and faster build times to improve your code-build-view feedback cycle. With Angular 6, all platform tools are version synced to 6.0, making it easier to reason about the ecosystem. In the following chart, you can see how this makes it easier to communicate tooling compatibility:

Angular CLI 6.0 comes with major new capabilities, such as ng update and ng add commands; ng...

In this chapter, we will design, architect, create a backlog, and establish the folder structure for your Angular project that will be able communicate with a REST API. This app will be designed to demonstrate the uses of the following:

• Angular CLI tool (ng)
• Angular Reuse of UI through components
• Angular HttpClient
• Angular Router
• Angular Reactive Forms
• Material Autocomplete
• Material Toolbar
• Material Sidenav

Regardless of your backend technology, I recommend that your frontend always resides in its own repository and is served using its own web server that is not depended on your API server.

First things first, you need a vision and a road map to act upon.

There are some...

The Angular CLI (Angular CLI) is an official Angular project to ensure that newly created Angular applications have a uniform architecture, following the best practices perfected by the community over time. This means that any Angular application you encounter going forward should have the same general shape. Angular CLI goes beyond initial code generation. You will be using it frequently to create new components, directives, pipes, services, modules, and more. Angular CLI will also help you during development with live-reloading features so that you can quickly see the results of your changes. Angular CLI can also test, lint, and build optimized versions of your code for a production release. Furthermore, as new Angular versions are released, Angular CLI will help you upgrade your code, by automatically rewriting portions of it so that it remains...

Saving files all the time can get tedious. You can enable automatic saving by doing the following:

1. Open VS Code
2. Toggle the setting under File | Auto Save

You can further customize many aspects of VS Code's behavior by launching Preferences. The keyboard shortcut to launch Preferences is Ctrl + , on Windows and ⌘ + , on macOS.

You can share such settings with your coworkers by creating a .vscode folder in the root of your project directory and placing a settings.json file in it. If you commit this file to the repository, everyone will share the same IDE experience. Unfortunately, individuals aren't able to override these settings with their own local preferences...

Building a rough plan of action before you start coding is a very important so that you and your colleagues or clients are aware of the road map you're planning to execute. Whether you're building an app for yourself or for someone else, a living backlog of features will always serve as a great reminder when you get back to a project after a break or serve as an information radiator that prevent constant requests for status updates.

In Agile development, you may have used various ticketing systems or tools that surface or Kanban boards. My favorite tool is Waffle.io, https://waffle.io/, because it directly integrates with your GitHub repository's issues and keeps track of status of issues via labels. This way, you can keep using the tool of your choice to interact with your repository and still, effortlessly, radiate information...

We will add a header as an h1 tag, followed by the tagline of our app as a div and placeholders for where we may want to display the current weather, as demonstrated as shown in the following code block:

src/app/app.component.html
<div style="text-align:center">
  &lt...

Now you need to connect your CurrentWeather component to the OpenWeatherMap APIs. In the upcoming sections, we will go over the following steps to accomplish this goal:

1. Create a new Angular Service
2. Import HttpClientModule and inject it into the service
3. Discover the OpenWeatherMap API

4. Create a new interface that conforms to the shape of the API
5. Write a get request
6. Inject the new service into the CurrentWeather component
7. Call the service from the init function of the CurrentWeather component
8. Finally, map the API data to the local ICurrentWeather type using RxJS functions so that it can be consumed by your component

Any code that touches...

RxJS stands for Reactive Extensions, which is a modular library that enables reactive programming, which itself is an asynchronous programming paradigm and allows for manipulation of data streams through transformation, filtering, and control functions. You can think of reactive programming as an evolution of event-based programming.

In Event-Driven programming, you would define an event handler and attach it to an event source. In more concrete terms, if you had a save button, which exposes an onClick event, you would implement a confirmSave function, which when triggered, would show a popup to ask the user Are you sure?. Look at the following figure for a visualization...

Congratulations, in this chapter, you created your first Angular application with a flexible architecture while avoiding over-engineering. This was possible because we first built a road map and codified it in a Kanban board that is visible to your peers and colleagues. We stayed focused on implementing the first feature we put in progress and didn't deviate from the plan.

You can now use Angular CLI and an optimized VS Code development environment to help you reduce the amount of coding you need to do. You can leverage TypeScript anonymous types and observable streams to accurately reshape complicated API data into a simple format without having to create one-use interfaces.

You learned to avoid coding mistakes by proactively declaring input and return types of functions and working with generic functions. You used the date and decimal pipes to ensure that the data...