Angular

One of the watershed moments in the story of the TypeScript language came when it was announced that the Microsoft and Google teams had been working together on Angular 2. Angular 2 was a much anticipated update to the popular Angular (or Angular 1) single-page application framework, which was written in JavaScript. The Google team that built Angular 2 originally proposed a new language named AtScript, which would allow Angular 2 applications to use newer ECMAScript 6 and 7 language features, and make the Angular 2 syntax cleaner and easier to understand. It was, in fact, intended for AtScript to run on top of TypeScript.

Following several months of collaboration, it was announced that all of the necessary features of the AtScript language would be absorbed into the TypeScript language, and that Angular 2 would be written in TypeScript. This meant that the providers of the language (Microsoft) and the consumers of the language (Google) were able to agree on the requirements...

Angular setup

Angular uses a command-line tool known as the Angular CLI to facilitate the creation of Angular applications and components. The Angular CLI can be installed using npm as follows:

npm install -g @angular/cli

Here we are installing the package @angular/cli globally using npm. Once installed, the Angular CLI provides a utility named ng, which can be used to create an Angular application as follows:

ng new angular-app

Here, we are invoking the Angular CLI and specifying that we wish to create a new angular application named angular-app. The Angular CLI will ask a few questions when creating an application, such as whether we would like to enforce strict type checking, whether to include Angular routing, and which stylesheet format we would like to use. In this sample application, we chose Yes for strict type checking, Yes for Angular routing, and SCSS for the stylesheet format.

Once the Angular CLI has completed, let's switch to the newly created...

An Angular application

Now that we have Angular set up, and have imported the Angular Material modules, we can focus on building an application. The application that we are going to build will be focused on a user logging in and logging out of our application. A screenshot of the elements in this application is as follows:

Figure 11.4: A screenshot of the elements of our Angular application

Here, we can see that we have a toolbar at the top of the page, with the name of our application called "Switch Sales". On the right of the toolbar, we have the logged-in username and a couple of icons. The shopping cart icon will be used to access a user's shopping cart, and we then have a logout button and a login button. Note that in the final version of this toolbar implementation, we will hide or show these buttons based on whether the user is actually logged in.

We also have a panel that slides out from the left when a user clicks on the Login button, which...

Angular forms

When building single-page applications, we will often need a user to input data of some sort using a form. Angular uses a two-way data binding process to bind values that are entered on a form to variables within a component itself. This process is two-way, as Angular will take care of synchronizing what is shown in the DOM with the member variables of a component. So if we change a value programmatically within our code, this value will be updated in the HTML. Similarly, when a user modifies the HTML values, these values will automatically update our class member variables.

Angular actually has two different methods of creating two-way data binding forms. The first method is named template forms, which allows us to bind an input control directly to a property on our class, as follows:

<input type="text" [(ngModel)]="name" /> 

Here, we have an input control within our HTML template, which is using the [(ngModel)] attribute with...

Summary

In this chapter, we have explored the Angular SPA framework, and built an Angular application. We have seen how to incorporate the Angular Material set of UI controls, shown what Angular modules are used for, and built an Angular module of our own. We then discussed how to react to DOM events in Angular, such as a button click, and the event handling capabilities built into the Angular framework. We then explored Angular services, and incorporated the event bus that we built in a previous chapter into an Angular application, using Angular's DI capabilities. Finally, we explored the two types of Angular forms, and incorporated an Angular Reactive form within our application. In the next chapter, we will explore another popular TypeScript-compatible SPA framework – React.