You are previewing Switching to Angular 2.
O'Reilly logo
Switching to Angular 2

Book Description

Build SEO-friendly, high-performance single-page applications with Angular 2

About This Book

  • Get up to date with the latest changes to Angular 2, including the improvements to directives, change detection, dependency injection, router, and more

  • Understand Angular 2’s new component-based architecture

  • Start using TypeScript to supercharge your Angular 2 applications

  • Who This Book Is For

    Do you want to jump in at the deep end of Angular 2? Or perhaps you’re interested assessing the changes before moving over? If so, then Switching to Angular 2 is the book for you.

    To get the most out of the book, you’ll need to be familiar with AngularJS 1.x, and have a good understanding of JavaScript. No knowledge of the changes made to Angular 2 is required follow along.

    What You Will Learn

  • Understand the changes made from Angular 1.x with side-by-side code samples to help demystify the Angular 2 learning curve

  • Start working with Angular 2’s new method of implementing directives

  • Use TypeScript to write modern, powerful Angular 2 applications

  • Dig in to the change-detection method, and other architectural changes to make sure you know what’s going on under the hood of Angular 2.

  • Get to work with the new router in Angular 2

  • Use the new features of Angular 2 including pipes, or the updated features such as forms, services, and the DI module

  • Master server-side rendering in Angular 2 to keep your new applications SEO friendly

  • In Detail

    AngularJS is a JavaScript framework that makes building web applications easier. It is used today in large-scale, high-traffic websites that struggle with under-performance, portability issues, as well as SEO unfriendliness, and complexity at scale.

    Angular 2 changes that.

    It is the modern framework you need to build performant and robust web applications. “Switching to Angular 2” is the quickest way to get to grips with Angular 2 and will help you transition in to the brave new world of Angular 2.

    We’ll start with an overview which sets the changes of the framework in context with version 1.x. After that, you will be taken on a TypeScript crash-course so we can take advantage of Angular 2 in its native, statically-typed environment. We’ll look at the new change-detection method in detail, how Directives and Components change how you create websites with Angular, the new Angular 2 router, and much more.

    By the end of the book, you’ll be ready to start building quick and efficient Angular 2 applications that take advantage of all the new features on offer.

    Style and approach

    Starting with a comparison between Angular versions that is filled with side-by-side code examples to help highlight the changes, each chapter then looks at major changes to the framework as is filled with small examples and sample code to get you started

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Switching to Angular 2
      1. Table of Contents
      2. Switching to Angular 2
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
        1. eBooks, discount offers, and more
          1. Why subscribe?
      8. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. Getting Started with Angular 2
        1. The evolution of the Web – time for a new framework
        2. The evolution of ECMAScript
          1. Web Components
          2. WebWorkers
        3. Lessons learned from AngularJS 1.x in the wild
          1. Controllers
          2. Scope
          3. Dependency Injection
          4. Server-side rendering
          5. Applications that scale
          6. Templates
          7. Change detection
        4. Summary
      10. 2. The Building Blocks of an Angular 2 Application
        1. A conceptual overview of Angular 2
        2. Changing directives
        3. Getting to know Angular 2 components
          1. Components in action
          2. Components in Angular 2
        4. Pipes
          1. Defining pipes
        5. Change detection
          1. Classical change detection
          2. AngularJS 1.x change detection
            1. In the zone.js
            2. Simplified data flow
          3. Enhancing AngularJS 1.x's change detection
        6. Understanding services
        7. Understanding the new component-based router
          1. Angular 2 route definition syntax
        8. Summary
      11. 3. TypeScript Crash Course
        1. Introduction to TypeScript
          1. Compile-time type checking
          2. Better support by text editors and IDEs
          3. There's even more to TypeScript
        2. Using TypeScript
          1. Installing TypeScript with npm
          2. Running our first TypeScript program
        3. TypeScript syntax and features introduced by ES2015 and ES2016
          1. ES2015 arrow functions
          2. Using the ES2015 and ES2016 classes
          3. Defining variables with block scope
        4. Meta-programming with ES2016 decorators
          1. Using configurable decorators
        5. Writing modular code with ES2015
          1. Using the ES2015 module syntax
          2. Taking advantage of the implicit asynchronous behavior
          3. Using aliases
          4. Importing all the module exports
          5. Default exports
        6. ES2015 module loader
        7. ES2015 and ES2016 recap
        8. Taking advantage of static typing
          1. Using explicit type definitions
            1. The type any
          2. Understanding the Primitive types
            1. The Enum types
          3. Understanding the Object types
            1. The Array types
            2. The Function types
          4. Defining classes
          5. Using access modifiers
          6. Defining interfaces
            1. Interface inheritance
            2. Implementing multiple interfaces
        9. Further expressiveness with TypeScript decorators
        10. Writing generic code by using type parameters
          1. Using generic functions
          2. Having multiple type parameters
        11. Writing less verbose code with TypeScript's type inference
          1. Best common type
          2. Contextual type inference
        12. Using ambient type definitions
          1. Using predefined ambient type definitions
          2. Custom ambient type definitions
          3. Defining d.ts files
        13. Summary
      12. 4. Getting Started with Angular 2 Components and Directives
        1. The Hello world! application in Angular 2
        2. Setting up our environment
          1. Installing our project repository
        3. Playing with Angular 2 and TypeScript
          1. Digging into the index
        4. Using Angular 2 directives
          1. The ngFor directive
        5. Improved semantics of the directives syntax
          1. Declaring variables inside a template
          2. Using syntax sugar in templates
        6. Defining Angular 2 directives
          1. Setting the directive's inputs
          2. Understanding the directive's constructor
          3. Better encapsulation of directives
        7. Using Angular 2's built-in directives
        8. Introducing the component's view encapsulation
        9. Implementing the component's controllers
        10. Handling user actions
          1. Using a directives' inputs and outputs
          2. Finding out directives' inputs and outputs
          3. Defining the component's inputs and outputs
          4. Passing inputs and consuming the outputs
          5. Event bubbling
          6. Renaming the inputs and outputs of a directive
          7. An alternative syntax to define inputs and outputs
        11. Explaining Angular 2's content projection
          1. Basic content projection in Angular 2
          2. Projecting multiple content chunks
          3. Nesting components
          4. Using ViewChildren and ContentChildren
          5. ViewChild versus ContentChild
        12. Hooking into the component's life cycle
        13. The order of execution
        14. Defining generic views with TemplateRef
        15. Understanding and enhancing the change detection
          1. The order of execution of the change detectors
          2. Change detection strategies
          3. Performance boosting with immutable data and OnPush
          4. Using immutable data structures in Angular
        16. Summary
      13. 5. Dependency Injection in Angular 2
        1. Why do I need Dependency Injection?
        2. Dependency Injection in Angular 2
          1. Benefits of DI in Angular 2
        3. Configuring an injector
          1. Dependency resolution with generated metadata
          2. Instantiating an injector
          3. Introducing forward references
          4. Configuring providers
            1. Using existing providers
        4. Defining factories for instantiating services
        5. Child injectors and visibility
          1. Building a hierarchy of injectors
          2. Configuring dependencies
            1. Using the @Self decorator
            2. Skipping the self injector
            3. Having optional dependencies
            4. Using multiproviders
          3. Using DI with components and directives
          4. Introducing the element injectors
            1. Declaring providers for the element injectors
            2. Exploring DI with components
            3. viewProviders versus providers
          5. Using Angular's DI with ES5
        6. Summary
      14. 6. Working with the Angular 2 Router and Forms
        1. Developing the "Coders repository" application
        2. Exploring the Angular 2 router
          1. Defining the root component and bootstrapping the application
          2. Using PathLocationStrategy
          3. Configuring routes with @RouteConfig
          4. Using routerLink and router-outlet
          5. Lazy-loading with AsyncRoute
        3. Using Angular 2 forms
          1. Developing template-driven forms
          2. Digging into the template-driven form's markup
          3. Using the built-in form validators
          4. Defining custom control validators
          5. Using select inputs with Angular
          6. Using the NgForm directive
        4. Two-way data-binding with Angular 2
        5. Storing the form data
        6. Listing all the stored developers
        7. Summary
      15. 7. Explaining Pipes and Communicating with RESTful Services
        1. Developing model-driven forms in Angular 2
          1. Using composition of control validators
        2. Exploring the HTTP module of Angular
          1. Using Angular's HTTP module
        3. Defining parameterized views
        4. Defining nested routes
        5. Transforming data with pipes
          1. Developing stateless pipes
          2. Using Angular's built-in pipes
          3. Developing stateful pipes
          4. Using stateful pipes
          5. Using Angular's AsyncPipe
            1. Using AsyncPipe with observables
        6. Summary
      16. 8. Development Experience and Server-Side Rendering
        1. Running applications in Web Workers
          1. Web Workers and Angular 2
          2. Bootstrapping an application running in Web Worker
          3. Migrating an application to Web Worker
          4. Making an application compatible with Web Workers
        2. Initial load of a single-page application
          1. Initial load of a SPA with server-side rendering
          2. Server-side rendering with Angular 2
        3. Enhancing our development experience
          1. Text editors and IDEs
          2. Hot reloading
            1. Hot reloading in Angular 2
        4. Bootstrapping a project with angular-cli
          1. Using angular-cli
        5. Angular 2 quick starters
          1. Angular 2 seed
          2. Angular 2 Webpack starter
        6. Summary
      17. Index