O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with Angular - Second Edition

Book Description

Fast-track your web development skills to build high performance SPA with Angular 2 and beyond

About This Book

  • Up to date with the latest API changes introduced by Angular 2 and 4
  • Get familiar with the improvements to directives, change detection, dependency injection, router, and more
  • Understand Angular's new component-based architecture
  • Start using TypeScript to supercharge your Angular applications

Who This Book Is For

Do you want to jump in at the deep end of Angular? Or perhaps you’re interested assessing the changes to AngularJS before moving over? If so, then "Getting Started with Angular" 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.

What You Will Learn

  • Understand the changes made from AngularJS with side-by-side code samples to help demystify the Angular learning curve
  • Start working with Angular’s new method of implementing directives
  • Use TypeScript to write modern, powerful Angular 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
  • Get to work with the new router in Angular
  • Use the new features of Angular, including pipes, and the updated features such as forms, services, and dependency injection
  • Learn about the server-side rendering in Angular to keep your new applications SEO-friendly
  • Enhance your applications using Ahead-of-Time compilation and Web Workers

In Detail

I'm delighted to see this new update and hope it helps you build amazing things with Angular. - Miško Hevery, Creator of AngularJS and Angular

Angular is the modern framework you need to build performant and robust web applications. This book is the quickest way to upgrade your AngularJS knowledge to the brave new world of Angular, and get grips with the framework.

It starts with an overview putting the changes of the framework in context with version 1. After that, you will be taken on a TypeScript crash-course so you can take advantage of Angular in its native, statically-typed environment. You'll explore the new change detection mechanism in detail, how directives and components have changed, how you create applications with Angular, and much more. Next, you'll understand how to efficienly develop forms, use the router, implement communication with HTTP services, and transform data with custom pipes. Finally, we will take a look at the Angular's Ahead-of-Time compiler, angular-cli and other such tools that help us build professional applications.

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

This book is up to date for the 2.4 release and is compatible with the 4.0 release as well.

Style and approach

Starting with a comparison between Angular versions, this book is filled with side-by-side code examples to help highlight the changes. Each chapter then looks at major changes to the framework and 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 http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Getting Started with Angular Second Edition
    1. Getting Started with Angular Second Edition
    2. Credits
    3. Foreword
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Why subscribe?
    7. Customer Feedback
    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. Get Going with Angular
      1. Angular and semver
      2. The evolution of the Web - time for a new framework
      3. The evolution of ECMAScript
        1. Web Components
        2. Web Workers
      4. Lessons learned from AngularJS in the wild
        1. Controllers
        2. Scope
        3. Dependency injection
        4. Server-side rendering
        5. Applications that scale
        6. Templates
        7. Change detection
      5. Summary
    10. 2. The Building Blocks of an Angular Application
      1. A conceptual overview of Angular
      2. Changing directives
      3. Getting to know Angular components
        1. Components in action
        2. Components in Angular
      4. Angular modules
        1. Bootstrapping an Angular application
      5. Pipes
        1. Defining pipes
      6. Improving change detection
        1. Classical change detection
        2. Change detection in AngularJS
          1. In the zone.js
          2. Simplified data flow
        3. Enhancing AngularJS's change detection
      7. Services
      8. The new router
        1. Angular route definition syntax
      9. 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 modules' 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
      13. Summary
    12. 4. Getting Started with Angular Components and Directives
      1. The "Hello world!" application in Angular
      2. Using TypeScript
        1. Setting up our environment
        2. Installing the sample project repository
      3. Playing with Angular and TypeScript
      4. Using Angular 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 directives
        1. Setting the directive's inputs
        2. Understanding the directive's constructor
        3. Better encapsulation of directives with NgModules
        4. Using NgModules for declaring reusable components
        5. Using custom element schema
      7. Creating custom Angular components
        1. Introducing the component's view encapsulation
        2. Implementing the component's controllers
        3. Handling user actions
        4. Using inputs and outputs
        5. Determining of the inputs and outputs
        6. Defining the inputs and outputs
        7. Passing inputs and consuming the outputs
        8. Event bubbling
        9. Renaming the inputs and outputs
        10. An alternative syntax to define inputs and outputs
      8. Explaining Angular's content projection
        1. Basic content projection in Angular
        2. Projecting multiple content chunks
        3. Nesting components
        4. Using ViewChildren and ContentChildren
        5. ViewChild versus ContentChild
      9. Hooking into the component's life cycle
        1. Order of execution of the life cycle hooks
      10. Defining generic views with TemplateRef
      11. Understanding and enhancing the change detection
        1. The order of execution of the change detectors
        2. Understanding Angular's change detection strategies
        3. Introducing immutable data structures and OnPush
        4. Using immutable data in Angular
      12. Summary
    13. 5. Dependency Injection in Angular
      1. Why do I need DI?
      2. DI in Angular
        1. Benefits of DI
      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. Configuring DI with NgModules
        5. Introducing the element injectors
          1. Declaring providers for the element injectors
          2. Exploring DI with components
          3. viewProviders versus providers
        6. Using Angular's DI with ES5
      6. Summary
    14. 6. Working with the Angular Router and Forms
      1. Developing the "Coders repository" application
      2. Exploring the Angular router
        1. Using PathLocationStrategy
        2. Configuring routes
        3. Using routerLink and router-outlet
        4. Lazy-loading with loadChildren
          1. Prefetching of lazy-loaded routes
          2. RouterModule.forRoot versus RouterModule.forChild
      3. Using Angular's forms module
        1. Developing template-driven forms
        2. Digging into the template-driven form's markup
        3. Using the built-in validators
        4. Defining custom validators
        5. Using select inputs with Angular
        6. Using the NgForm directive
      4. Two-way data binding with Angular
      5. Storing the form data
      6. Listing all the stored data
      7. Summary
    15. 7. Explaining Pipes and Communicating with RESTful Services
      1. Developing model-driven forms in Angular
        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. Tooling and Development Experience
      1. Running an application in a Web Worker
        1. Web Workers and Angular
        2. Bootstrapping an application running in a Web Worker
        3. Migrating an application to Web Worker
        4. Making an application compatible with Web Workers
      2. Initial load of a SPA
        1. Initial load of a SPA with server-side rendering
        2. Server-side rendering with Angular
      3. Enhancing our development experience
        1. Text editors and IDEs
        2. Angular language service
        3. Bootstrapping a project with angular-cli
        4. Using angular-cli
      4. Angular quick starters
        1. Angular Seed
        2. Angular 2 Webpack starter
      5. AoT compilation in Angular
        1. How code generation works
        2. Introducing AoT compilation
        3. Constraints of the AoT compilation
        4. How to use the AoT compilation of Angular
      6. Summary