Angular Development with TypeScript

Anton Moiseev, Yakov Fain

• Publisher: Manning
• Year: 2018
• ISBN:
  9781638355250
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Summary Angular Development with TypeScript, Second Edition is an intermediate-level tutorial that introduces Angular and TypeScript to developers comfortable with building web applications using other frameworks and tools.Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. About the Technology Whether you're building lightweight web clients or full-featured SPAs, Angular is a clear choice. The Angular framework is fast, efficient, and widely adopted. Add the benefits of developing in the statically typed, fully integrated TypeScript language, and you get a programming experience other JavaScript frameworks just can't match. About the Book Angular Development with TypeScript, Second Edition teaches you how to build web applications with Angular and TypeScript. Written in an accessible, lively style, this illuminating guide covers core concerns like state management, data, forms, and server communication as you build a full-featured online auction app. You'll get the skills you need to write type-aware classes, interfaces, and generics with TypeScript, and discover time-saving best practices to use in your own work. What's inside

• Code samples for Angular 5, 6, and 7
• Dependency injection
• Reactive programming
• The Angular Forms API

About the Reader Written for intermediate web developers familiar with HTML, CSS, and JavaScript. About the Author Yakov Fain and Anton Moiseev are experienced trainers and web application developers. They have coauthored several books on software development. Table of Contents

• Introducing Angular
• The main artifacts of an Angular app
• Router basics
• Router advanced
• Dependency injection in Angular
• Reactive programming in Angular
• Laying out pages with Flex Layout
• Implementing component communications
• Change detection and component lifecycle
• Introducing the Forms API
• Validating forms
• Interacting with servers using HTTP
• Interacting with servers using the WebSocket protocol
• Testing Angular applications
• Maintaining app state with ngrx

Chapter 1. Introducing Angular

This chapter covers

• A high-level overview of the Angular framework
• Generating a new project with Angular CLI
• Getting started with Angular modules and components
• Introducing the sample application ngAuction

Angular is an open source JavaScript framework maintained by Google. It’s a complete rewrite of its popular predecessor, AngularJS. The first version of Angular was released in September 2016 under the name Angular 2. Shortly after, the digit 2 was removed from the name, and now it’s just Angular. Twice a year, the Angular team make major releases of this framework. Future releases will include new features, perform better, and generate smaller code bundles, but the architecture of the framework most likely will remain the same.

Angular applications can be developed in JavaScript (using the syntax of ECMAScript 5 or later versions) or TypeScript. In this book, we use TypeScript; we explain our reasons for this in appendix B.

Note

In this book, we expect you to know the syntax of JavaScript and HTML and to understand what web applications consist of. We also assume that you know what CSS is. If you’re not familiar with the syntax of TypeScript and the latest versions of ECMAScript, we suggest you read appendixes A and B first, and then continue reading from this chapter on. If you’re new to developing using Node.js tooling, read appendix C.

Note

All code samples in this book are tested with Angular 6 and should work with Angular 7 without any changes. You can download the code samples from https://github.com/Farata/angulartypescript. We provide instructions on how to run each code sample starting in chapter 2.

This chapter begins with a brief overview of the Angular framework. Then we’ll start coding—we’ll generate our first project using the Angular CLI tool. Finally, we’ll introduce the sample application ngAuction that you’ll build while reading this book.

1.1. Why select Angular for web development?

Web developers use different JavaScript frameworks and libraries, and the most popular are Angular, React, and Vue.js. You can find lots of articles and blog posts comparing them, but such comparisons aren’t justified, because React and Vue.js are libraries that don’t offer a full solution for developing and deploying a complete web application, whereas Angular does offer that full solution.

If you pick React or Vue.js for your project, you’ll also need to select other products that support routing, dependency injection, forms, bundling and deploying the app, and more. In the end, your app will consist of multiple libraries and tools picked by a senior developer or an architect. If this developer decides to leave the project, finding a replacement won’t be easy because the new hire may not be familiar with all the libraries and tools used in the project.

The Angular framework is a platform that includes all you need for developing and deploying a web app, batteries included. Replacing one Angular developer with another is easy, as long as the new person knows Angular.

From a technical perspective, we like Angular because it’s a feature-complete framework that you can use to do the following right out of the box:

• Generate a new single-page web app in seconds using Angular CLI
• Create a web app that consists of a set of components that can communicate with each other in a loosely coupled manner
• Arrange the client-side navigation using the powerful router
• Inject and easily replace services, classes where you implement data communication or other business logic
• Arrange state management via injectable singleton services
• Cleanly separate the UI and business logic
• Modularize your app so only the core functionality is loaded on app startup, and other modules are loaded on demand
• Creating modern-looking UIs using the Angular Material library
• Implement reactive programming where your app components don’t pull data that may not be ready yet, but subscribe to a data source and get notifications when data is available

Having said that, we need to admit that there is one advantage that React and Vue.js have over Angular. Although Angular is a good fit for creating single-page apps, where the entire app is developed in this framework, the code written in React and Vue.js can be included into any web app, regardless of what other frameworks were used for development of any single-page or multipage web app.

This advantage will disappear when the Angular team releases a new module currently known as @angular/elements (see https://github.com/angular/angular/tree/master/packages/elements). Then you’ll be able to package your Angular components as custom elements (see https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) that can be embedded into any existing web app written in JavaScript, with or without any other libraries.

1.2. Why develop in TypeScript and not in JavaScript?

You may be wondering, why not develop in JavaScript? Why do we need to use another programming language if JavaScript is already a language? You wouldn’t find articles about additional languages for developing Java or C# applications, would you?

The reason is that developing in JavaScript isn’t overly productive. Say a function expects a string value as an argument, but the developer mistakenly invokes it by passing a numeric value. With JavaScript, this error can be caught only at runtime. Java or C# compilers won’t even compile code that has mismatching types, but JavaScript is a dynamically typed language and the type of a variable can be changed during runtime.

Although JavaScript engines do a decent job of guessing the types of variables by their values, development tools have a limited ability to help you without knowing the types. In mid- and large-size applications, this JavaScript shortcoming lowers the productivity of software developers.

On larger projects, good IDE context-sensitive help and support for refactoring are important. Renaming all occurrences of a variable or function name in statically typed languages is done by IDEs in a split second, but this isn’t the case in JavaScript, which doesn’t support types. If you make a mistake in a function or a variable name, it’s displayed in red. If you pass the wrong number of parameters (or wrong types) to a function, again, the errors are displayed in red. IDEs also offer great context-sensitive help. TypeScript code can be refactored by IDEs.

TypeScript follows the latest ECMAScript specifications and adds to them types, interfaces, decorato...