Angular 2 Development with TypeScript

504 Pages·2016·21.775 MB·English

by  Yakov Fain, Anton Moiseev

Playlists
Copyright
History
For online information and ordering of this and other Manning books, please visit
Topwicws w.manning.com. The publisher offers discounts on this book when ordered in
quantity. For more information, please contact
Tutorials
       Special Sales Department
Offers & Deals
       Manning Publications Co.
       20 Baldwin Road
       PO Box 761
Highlights
       Shelter Island, NY 11964
       Email: [email protected]
Settings
©2017 by Manning Publications Co. All rights reserved.
Support
No part of this publication may be reproduced, stored in a retrieval system, or
Sign Out
transmitted, in any form or by means electronic, mechanical, photocopying, or
otherwise, without prior written permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their
products are claimed as trademarks. Where those designations appear in the book, and
Manning Publications was aware of a trademark claim, the designations have been
printed in initial caps or all caps.
 Recognizing the importance of preserving what has been written, it is Manning’s
policy to have the books we publish printed on acid­free paper, and we exert our best
efforts to that end. Recognizing also our responsibility to conserve the resources of our
planet, Manning books are printed on paper that is at least 15 percent recycled and
processed without the use of elemental chlorine.
Manning Publications Co.20 Baldwin Road

Shelter Island NY 11964
Development editor: Cynthia Kane
Review editor: Donna Clements
Technical development editor: Alain M. Couniot
Project editor: Kevin Sullivan
Copyeditor: Andy Carroll
Proofreader: Tiffany Taylor
Technical proofreader: Cody Sand
Typesetter: Gordan Salinovic
Cover designer: Marija Tudor
ISBN 9781617293122
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – EBM – 21 20 19 18 17 16
ylists
Brief Table of Contents
tory
Copyright
pics
Brief Table of Contents
orials
Table of Contents
ers & Deals
Preface
hlights
Acknowledgments
tings
About this Book
Support
About the Cover Illustration
Sign Out
Chapter 1. Introducing Angular 2
Chapter 2. Getting started with Angular
Chapter 3. Navigation with the Angular router
Chapter 4. Dependency injection
Chapter 5. Bindings, observables, and pipes
Chapter 6. Implementing component communications
Chapter 7. Working with forms
Chapter 8. Interacting with servers using HTTP and WebSockets
Chapter 9. Unit­testing Angular applications
Chapter 10. Bundling and deploying applications with Webpack

Appendix A. An overview of ECMAScript 6
Appendix B. TypeScript as a language for Angular applications
Index
List of Figures
List of Tables
List of Listings
Playlists
Chapter 1. Introducing Angular 2
History
This chapter covers
Topics
A brief overview of JavaScript frameworks and libraries
Tutorials
A high­level overview of Angular 1 and 2
A toolbox for the Angular developer
Offers & Deals
Introducing the sample application
Highlights
Angular 2 is an open source JavaScript framework maintained by Google. It’s a
Settciongmsplete rewrite of its popular predecessor, AngularJS. Angular applications can be
developed in JavaScript (using the syntax of ECMAScript 5 or 6), Dart, or TypeScript.
SupIpnor tthis book we’ll use TypeScript; our reasons for this are explained in appendix B.
Sign Out
Prerequisites
In this book, we don’t expect you to have any experience with AngularJS. We do 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 and that you’re
familiar with the role of the DOM object in a browser.
We’ll start this chapter with a very brief overview of some popular JavaScript
frameworks. Then we’ll review the architecture of the older AngularJS and the newer
Angular 2, highlighting the improvements that the new version of this framework
brings to the table. We’ll also quickly run through the tools that Angular developers use.
Finally, we’ll introduce the sample application that we’re going to build in this book.

Note
This book is about the Angular 2 framework, and for brevity we’ll call it Angular
throughout. If we mention AngularJS, we’re talking about the 1.x versions of this
framework.
1.1. A SAMPLER OF JAVASCRIPT FRAMEWORKS AND LIBRARIES
Do you have to use frameworks? No, you can program the front end of web applications
in pure JavaScript. In this case, there’s nothing new to learn, because you already know
JavaScript. The cons of not using a framework are the difficulties in maintaining cross­
browser compatibility and longer development cycles. In contrast, frameworks can give
you full control over the architecture, design patterns, and code styles in your
application. Most modern web applications are written using some combination of
frameworks and libraries.
Angular is one of many frameworks used for developing web apps, and this section will
briefly cover some popular JavaScript frameworks and libraries. What’s the difference
between frameworks and libraries? Frameworks provide a structure for your code and
force you to write the code in a certain way. Libraries usually offer a number of
components and APIs that can be used à la carte in any code. In other words,
frameworks are more opinionated than libraries about the design of your application.
1.1.1. Feature-complete frameworks
Feature­complete frameworks include everything you need to develop a web
application. They impose a certain structure on your code and come with a library of UI
components and tools for building and deploying the application.
For example, Ext JS is a mature, full­featured framework created and maintained by
Sencha. It comes with an excellent set of rich UI components, including an advanced
data grid and charts, which are crucial for developing back­office enterprise
applications. Ext JS adds a substantial amount of code to your application, and you
won’t find an application built with Ext JS that’s less than 1 MB in size. Ext JS is also
intrusive—it’s not easy to switch to a different framework if need be.
Sencha also has the Sencha Touch framework, which is used for creating web
applications for mobile devices.
1.1.2. Lightweight frameworks
Lightweight frameworks add structure to your web application, offer a way to arrange
navigation between different views, and typically split the application into layers
implementing the Model­View­Controller (MVC) design pattern. There is also a group
of lightweight frameworks specialized for testing applications written in JavaScript.
Angular is an open source framework for developing web applications. The framework
makes it simpler to create custom components that can be added to HTML documents
and to implement application logic. Angular uses data binding extensively, includes a
dependency injection module, supports modularization, and offers a routing
mechanism. Whereas AngularJS was MVC­based, Angular is not. This framework
doesn’t include UI components.
Ember.js is an open source MVC­based framework for developing web applications. It
includes a routing mechanism and supports two­way data binding. This framework
uses a lot of code conventions, which increases the productivity of software developers.
Jasmine is an open source framework for testing JavaScript code. Jasmine doesn’t
require a DOM object. It includes a set of functions that test whether certain parts of
your application behave as expected. Jasmine is often used with Karma, which is a test
runner that allows you to run tests in different browsers.
1.1.3. Libraries
The libraries discussed in this section serve different purposes and can be used in web
applications with or without other frameworks.
jQuery is a popular JavaScript library. It’s simple to use and doesn’t require you to
dramatically change the way you program for the web. jQuery helps in finding and
manipulating DOM elements, processing browser events, and dealing with browser
incompatibilities. jQuery is an extensible library, and thousands of plugins have been
created by developers from around the world. If you can’t find a plugin that fits your
needs, you can create one yourself.
Bootstrap is an open source library of UI components developed by Twitter. The
components are built using the responsive web design principles, which makes this
library extremely valuable if your web application needs to automatically adjust its
layout depending on the screen size of the user’s device. In this book we’ll use Bootstrap
while developing a sample online auction application.
Note
Google developed a library of UI components based on the set of guidelines called
Material Design, which may become an alternative to Bootstrap. Material Design is
optimized for cross­device use and comes with a set of nice­looking UI components. At
the time of writing, only the AngularJS version of Material Design is ready. The Angular
version of this library is called Angular Material, and it should be released shortly after
this book is published.
React is an open source library by Facebook for building user interfaces. React
represents the V in MVC. It’s nonintrusive and can be used with any other library or a
framework. React creates its own virtual DOM object, minimizing access to the
browser’s DOM, which results in better performance. For content rendering, React
introduces the JSX format, which is a JavaScript syntax extension that looks like XML.
Using JSX is recommended but optional.
Polymer is a library created by Google for building custom components based on the
Web Components standard. It comes with a set of nice­looking customizable UI
components that can be included in HTML markup as tags. Polymer also includes
components for applications that need to work offline, as well as components that use
various Google APIs (such as calendar, maps, and others).
RxJS is a set of libraries for composing asynchronous and event­based programs using
observable collections. It allows applications to work with asynchronous data streams,
such as a server­side stream of stock price quotes or mouse move events. With RxJS,
the data streams are represented as observable sequences. This library can be used with
or without any other JavaScript framework. In chapters 5 and  8 , you’ll see examples of
using observables in Angular.
To see statistics on which top websites use a particular JavaScript framework or library,
you can visit the BuiltWith JavaScript Usage Statistics page:
http://trends.builtwith.com/javascript.
Moving from Flex to Angular
We work for a company, Farata Systems, that over the years developed pretty complex
software using the Adobe Flex framework. Flex is a very productive framework built on
top of the strongly typed, compiled ActionScript language, and the applications are
deployed in the Flash Player browser plugin (a VM). When the web community started
moving away from using plugins, we spent two years trying to find a replacement for
Flex. We experimented with different JavaScript­based frameworks, but the
productivity of our developers seriously suffered. Finally we saw a light at the end of the
tunnel with a combination of the TypeScript language, the Angular 2 framework, and a
UI library such as Angular Material.
1.1.4. What is Node.js?
Node.js (or Node) isn’t just a framework or a library, but a runtime environment as
well. In most of this book, we’ll use the Node runtime for running various utilities like
Node Package Manager (npm). For example, to install TypeScript, you can use npm
from a command line:
npm install typescript
The Node.js framework can be used to develop JavaScript programs that run outside
the browser. You can develop the server­side layer of a web application in JavaScript or
Typescript; you’ll write a web server using Node in chapter 8. Google developed a high­
performance V8 JavaScript engine for the Chrome browser, and it can be used to run
code written using the Node.js API. The Node.js framework includes an API to work
with the filesystem, access databases, listen to HTTP requests, and more.
Members of the JavaScript community have built lots of utilities that are useful for
developing web applications, and with the help of Node’s JavaScript engine, you can
run them from a command line.
1.2. HIGH-LEVEL OVERVIEW OF ANGULARJS
Let’s now return to the main topic of this book: the Angular framework. This is the only
section dedicated to AngularJS, the previous version of Angular.
Misko Hevery and Adam Abronsa started work on the AngularJS framework in 2009 as
an effort to help web designers customize web pages, and AngularJS 1.0 was officially
released in 2012. By 2015, several minor versions had been released, and at the time of
writing the stable version of AngularJS is 1.5. Google continues to improve the
functionality of AngularJS 1.x and address its issues while developing Angular 2 in
parallel. Let’s see what made AngularJS so popular:
AngularJS has a mechanism for creating custom HTML tags and attributes using
the concept of directives, which allow you to extend the set of HTML tags according