Angular 2 is a completely new framework and the only thing that it shares with its predecessor is its name! Very few Angular 1 core concepts have made it to Angular 2. Given this fact, this book too is a complete rewrite with all new content. We may be building the same application, but this time we build it using Angular 2.

To be frank, that is a question that many Angular developers have asked since Angular 2 was first announced at the ng-europe conference in October 2014. Angular 1 is a hugely popular JavaScript framework.  Over 1 million developers worldwide have used it. Many of them have contributed add-ons/extensions that enhance and strengthen the framework. So why is there a need for a different, new version?

There are several answers to that question. But fundamentally, they all revolve around the fact that Angular 1 is six years old – which is a lifetime in terms of web technology.  For example, Angular 1 predates much of what has developed around mobile technology.  In addition, a new version of JavaScript (ES2015) was approved in 2015 that revolutionizes JavaScript programming. And finally, Angular1 was not designed for use with emerging web standards such as Web Components.

With newer frameworks such as Facebook's React that have been engineered to maximize performance and emphasize mobile-first development, the need for change became more compelling. Angular 2 responds to this challenge by adopting the latest web technologies and incorporating them into a framework for the modern browser.

Highlighting some of what is not in Angular 1 leads logically to what the design of Angular 2 is all about. Angular 2 has a mobile-first design. It is therefore engineered for a small footprint, meaning that the data that flows from the server to the browser is minimized as much as possible. The framework itself has been broken into a collection of modules so that only the code needed to run the application is loaded. Moreover, a simplified and more coherent syntax makes it easier to learn and also provides better support for tooling and automation.

Each of the emerging technologies being used in Angular 2 provides key ingredients for realizing these goals. Web Components enable Angular 2 applications to be built out of reusable building blocks that encapsulate their internal logic. ES2015 provides classes and a solid system for loading Angular modules. TypeScript brings types that enable a simpler and more robust syntax for building large-scale applications.

The examples in this book all use TypeScript. As mentioned, Angular2 allows us to write code in both ES5 (standard JavaScript) and ES2015, along with TypeScript. There are several reasons why we chose TypeScript. To start with, the Angular 2 team itself is using TypeScript to build the framework. Angular 2 code written in TypeScript is far terser than the alternatives. The use of TypeScript also enables IDEs to provide better IntelliSense and code completion support than what is available for JavaScript.

One final point – we think it is easier to learn about Angular 2 using TypeScript. Since this book is about teaching you this new technology, it seemed to be the best selection for the widest audience. As a superset of JavaScript, it offers JavaScript developers an easy migration path to working with types in their Angular applications. And for those developers who are moving to Angular 2 from more traditional object-oriented languages, it offers the familiarity of types and classes.

Chapter 1, Getting Started, introduces you to the Angular framework. We create a super simple app in Angular that highlights some core features of the framework.

Chapter 2, Building Our First App - 7 Minute Workout, teaches us how to build our first real Angular app. In the process, we learn more about one of the primary building blocks of Angular – components. We are also introduced to Angular’s templating constructs, its data binding capabilities and Angular services.

Chapter 3, More Angular 2 – SPA, Routing, and Data Flows in Depth, covers the routing constructs in the framework where we build multiple pages for a 7 Minute Workout. The chapter also explores a number of patterns around inter-component communication.

Chapter 4, Building Personal Trainer, introduces a new exercise where we morph the 7 Minute workout into a generic Personal Trainer app. This app has the ability to create new workout plans other than the original 7 Minute Workout. This chapter covers Angular’s form capabilities, and how we can use them to build custom workouts.

Chapter 5, Supporting Server Data Persistence, deals with saving and retrieving workout data from the server. We augment Personal Trainer with persistence capabilities as we explore Angular's HTTP client library and how it uses RxJS Observables.

Chapter 6, Angular 2 Directives in Depth, goes deep into the inner workings of Angular 2 directives and components. We build a number of directives to support Personal Trainer.

Chapter 7, Testing Personal Trainer, introduces you to the testing world in Angular. You build a suite of unit and end-to-end tests that verify the working of Personal Trainer.

Chapter 8, Some Practical Scenarios, provides some practical tips and guidance around scenarios that we might encounter while developing apps on this framework. We cover scenarios such as authentication and authorization, localization, performance, and the most important case, migrating apps from Angular 1 to Angular 2.

We will be building our apps in the TypeScript language, therefore it would be preferable if you have an IDE that makes development with TypeScript easy. IDEs such as Atom, Sublime, WebStorm, and Visual Studio (or VS Code) are great tools for this purpose.

All the code enlisted in this book is written and tested for Angular 2.0.0. 

This book is for readers with no prior experience in Angular. We start from Angular 2 basics and gradually build your understanding of the framework by working through the multiple exercises in the book.

To get the most out of this book, you should have experience in developing on web platforms using HTML, CSS, JavaScript, and a little bit of TypeScript. Angular 1 experience may be advantageous but not necessary for this book.

If you lack TypeScript experience, we highly recommend you visit the TypeScript website: http://www.typescriptlang.org and look at the tutorial, handbook, and samples. For a JavaScript developer, it does not take much time to get up and running with TypeScript.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

@Directive({
 selector: '[a2beBusyIndicator]',
})
export class BusyIndicator {
 constructor(private _control: NgControl) { }
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<div class="panel-body">
 {{description}}
 </div>
 <div class="panel-body">
 {{steps}}
 </div>

Any command-line input or output is written as follows:

npm install -g angular2

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "The shortcuts in this book are based on the Mac OS X 10.5+ scheme."

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e-mail [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.