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

Angular 2 Cookbook

Book Description

Discover over 70 recipes that provide the solutions you need to know to face every challenge in Angular 2 head on

About This Book

  • A first-rate reference guide with a clear structure and intuitive index that gives you as a developer exactly the information you want in exactly the way you want it
  • Covers no legacy material from the outdated Angular release candidates; it is up-to-date with the latest release of Angular 2.4
  • All the code in the book is explicitly written out, and every piece of code shown is a step towards building a simple working example

Who This Book Is For

This book is for developers who are competent with JavaScript and are looking to dive headfirst into the TypeScript edition of Angular 2. This book is also geared towards developers with experience in Angular 1 who are looking to make the transition.

What You Will Learn

  • Understand how to best move an Angular 1 application to Angular 2
  • Build a solid foundational understanding of the core elements of Angular 2 such as components, forms, and services
  • Gain an ability to wield complex topics such as Observables and Promises
  • Properly implement applications utilizing advanced topics such as dependency injection
  • Know how to maximize the performance of Angular 2 applications
  • Understand the best ways to take an Angular 2 application from TypeScript in a code editor to a fully function application served on your site
  • Get to know the best practices when organizing and testing a large Angular 2 application

In Detail

Angular 2 introduces an entirely new way to build applications. It wholly embraces all the newest concepts that are built into the next generation of browsers, and it cuts away all the fat and bloat from Angular 1. This book plunges directly into the heart of all the most important Angular 2 concepts for you to conquer. In addition to covering all the Angular 2 fundamentals, such as components, forms, and services, it demonstrates how the framework embraces a range of new web technologies such as ES6 and TypeScript syntax, Promises, Observables, and Web Workers, among many others.

This book covers all the most complicated Angular concepts and at the same time introduces the best practices with which to wield these powerful tools. It also covers in detail all the concepts you'll need to get you building applications faster. Oft-neglected topics such as testing and performance optimization are widely covered as well. A developer that reads through all the content in this book will have a broad and deep understanding of all the major topics in the Angular 2 universe.

Style and approach

This book follows a cookbook approach—each recipe presents a unique problem to which the solution is presented in a clear, concise, and manner step-by-step manner. With practical hands-on guidance in each and every recipe, you'll be able to get to grips with the concepts.

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. Angular 2 Cookbook
    1. Angular 2 Cookbook
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Customer Feedback
    7. Dedication
    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. Strategies for Upgrading to Angular 2
      1. Introduction
      2. Componentizing directives using controllerAs encapsulation
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Migrating an application to component directives
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      4. Implementing a basic component in AngularJS 1.5
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Normalizing service types
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Connecting Angular 1 and Angular 2 with UpgradeModule
        1. Getting ready
        2. How to do it...
          1. Connecting Angular 1 to Angular 2
        3. How it works...
        4. There's more...
        5. See also
      7. Downgrading Angular 2 components to Angular 1 directives with downgradeComponent
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      8. Downgrade Angular 2 providers to Angular 1 services with downgradeInjectable
        1. Getting ready
        2. How to do it...
        3. See also
    10. 2. Conquering Components and Directives
      1. Introduction
      2. Using decorators to build and style a simple component
        1. Getting ready
        2. How to do it...
          1. Writing the class definition
          2. Writing the component class decorator
        3. How it works...
        4. There's more...
        5. See also
      3. Passing members from a parent component into a child component
        1. Getting ready
        2. How to do it...
          1. Connecting the components
          2. Declaring inputs
        3. How it works...
        4. There's more...
          1. Angular expressions
          2. Unidirectional data binding
          3. Member methods
        5. See also
      4. Binding to native element attributes
        1. How to do it...
        2. How it works...
        3. See also
      5. Registering handlers on native browser events
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Generating and capturing custom events using EventEmitter
        1. Getting ready
        2. How to do it...
          1. Capturing the event data
          2. Emitting a custom event
          3. Listening for custom events
        3. How it works...
        4. There's more...
        5. See also
      7. Attaching behavior to DOM elements with directives
        1. Getting ready
        2. How to do it...
          1. Attaching to events with HostListeners
        3. How it works...
        4. There's more...
        5. See also
      8. Projecting nested content using ngContent
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Using ngFor and ngIf structural directives for model-based DOM control
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      10. Referencing elements using template variables
        1. Getting ready
        2. How to do it...
        3. There's more...
        4. See also
      11. Attribute property binding
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      12. Utilizing component lifecycle hooks
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      13. Referencing a parent component from a child component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      14. Configuring mutual parent-child awareness with ViewChild and forwardRef
        1. Getting ready
        2. How to do it...
          1. Configuring a ViewChild reference
          2. Correcting the dependency cycle with forwardRef
          3. Adding the disable behavior
        3. How it works...
        4. There's more...
          1. ViewChildren
        5. See also
      15. Configuring mutual parent-child awareness with ContentChild and forwardRef
        1. Getting ready
        2. How to do it...
          1. Converting to ContentChild
          2. Correcting data binding
        3. How it works...
        4. There's more...
          1. ContentChildren
        5. See also
    11. 3. Building Template-Driven and Reactive Forms
      1. Introduction
      2. Implementing simple two-way data binding with ngModel
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      3. Implementing basic field validation with a FormControl
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Validators and attribute duality
          2. Tagless controls
        5. See also
      4. Bundling controls with a FormGroup
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. FormGroup validators
          2. Error propagation
        5. See also
      5. Bundling FormControls with a FormArray
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Implementing basic forms with NgForm
        1. Getting ready
        2. How to do it...
          1. Declaring form fields with ngModel
        3. How it works...
        4. There's more...
        5. See also
      7. Implementing basic forms with FormBuilder and formControlName
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      8. Creating and using a custom validator
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Refactoring into validator attributes
        5. See also
      9. Creating and using a custom asynchronous validator with Promises
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Validator execution
        5. See also
    12. 4. Mastering Promises
      1. Introduction
      2. Understanding and implementing basic Promises
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Decoupled and duplicated Promise control
          2. Resolving a Promise to a value
          3. Delayed handler definition
          4. Multiple handler definition
          5. Private Promise members
        5. See also
      3. Chaining Promises and Promise handlers
        1. How to do it...
          1. Chained handlers' data handoff
          2. Rejecting a chained handler
        2. How it works...
        3. There's more...
          1. Promise handler trees
          2. catch()
        4. See also
      4. Creating Promise wrappers with Promise.resolve() and Promise.reject()
        1. How to do it...
          1. Promise normalization
        2. How it works...
        3. There's more...
        4. See also
      5. Implementing Promise barriers with Promise.all()
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      6. Canceling asynchronous actions with Promise.race()
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      7. Converting a Promise into an Observable
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      8. Converting an HTTP service Observable into a ZoneAwarePromise
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
    13. 5. ReactiveX Observables
      1. Introduction
        1. The Observer Pattern
        2. ReactiveX and RxJS
        3. Observables in Angular 2
        4. Observables and Promises
      2. Basic utilization of Observables with HTTP
        1. Getting ready
        2. How to do it...
        3. How it works...
          1. Observable<Response>
          2. The RxJS map() operator
          3. Subscribe
        4. There's more...
          1. Hot and cold Observables
        5. See also
      3. Implementing a Publish-Subscribe model using Subjects
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Native RxJS implementation
        5. See also
      4. Creating an Observable authentication service using BehaviorSubjects
        1. Getting ready
        2. How to do it...
          1. Injecting the authentication service
          2. Adding BehaviorSubject to the authentication service
          3. Adding API methods to the authentication service
          4. Wiring the service methods into the component
        3. How it works...
        4. There's more...
        5. See also
      5. Building a generalized Publish-Subscribe service to replace $broadcast, $emit, and $on
        1. Getting ready
        2. How to do it...
          1. Introducing channel abstraction
          2. Hooking components into the service
          3. Unsubscribing from channels
        3. How it works...
        4. There's more...
          1. Considerations of an Observable's composition and manipulation
        5. See also
      6. Using QueryLists and Observables to follow changes in ViewChildren
        1. Getting ready
        2. How to do it...
          1. Dealing with QueryLists
          2. Correcting the expression changed error
        3. How it works...
          1. Hate the player, not the game
        4. See also
      7. Building a fully featured AutoComplete with Observables
        1. Getting ready
        2. How to do it...
          1. Using the FormControl valueChanges Observable
          2. Debouncing the input
          3. Ignoring serial duplicates
          4. Flattening Observables
          5. Handling unordered responses
        3. How it works...
        4. See also
    14. 6. The Component Router
      1. Introduction
      2. Setting up an application to support simple routes
        1. Getting ready
        2. How to do it...
          1. Setting the base URL
          2. Defining routes
          3. Providing routes to the application
          4. Rendering route components with RouterOutlet
        3. How it works...
        4. There's more...
          1. Initial page load
        5. See also
      3. Navigating with routerLinks
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Route order considerations
        5. See also
      4. Navigating with the Router service
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Selecting a LocationStrategy for path construction
        1. How to do it...
        2. There's more...
          1. Configuring your application server for PathLocationStrategy
      6. Building stateful route behavior with RouterLinkActive
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      7. Implementing nested views with route parameters and child routes
        1. Getting ready
        2. How to do it...
          1. Adding a routing target to the parent component
          2. Defining nested child views
          3. Defining the child routes
          4. Defining child view links
          5. Extracting route parameters
        3. How it works...
        4. There's more...
          1. Refactoring with async pipes
        5. See also
      8. Working with matrix URL parameters and routing arrays
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      9. Adding route authentication controls with route guards
        1. Getting ready
        2. How to do it...
          1. Implementing the Auth service
          2. Wiring up the profile view
          3. Restricting route access with route guards
          4. Adding login behavior
          5. Adding the logout behavior
        3. How it works...
        4. There's more...
          1. The actual authentication
          2. Secure data and views
        5. See also
    15. 7. Services, Dependency Injection, and NgModule
      1. Introduction
      2. Injecting a simple service into a component
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      3. Controlling service instance creation and injection with NgModule
        1. Getting ready
        2. How to do it...
          1. Splitting up the root module
        3. How it works...
        4. There's more...
          1. Injecting different service instances into different components
          2. Service instantiation
        5. See also
      4. Service injection aliasing with useClass and useExisting
        1. Getting ready
          1. Dual services
          2. A unified component
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Refactoring with directive providers
        5. See also
      5. Injecting a value as a service with useValue and OpaqueTokens
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      6. Building a provider-configured service with useFactory
        1. Getting ready
        2. How to do it...
          1. Defining the factory
          2. Injecting OpaqueToken
          3. Creating provider directives with useFactory
        3. How it works...
        4. There's more...
        5. See also
    16. 8. Application Organization and Management
      1. Introduction
      2. Composing package.json for a minimum viable Angular 2 application
        1. Getting ready
        2. How to do it...
          1. package.json dependencies
          2. package.json devDependencies
          3. package.json scripts
        3. See also
      3. Configuring TypeScript for a minimum viable Angular 2 application
        1. Getting ready
        2. How to do it...
          1. Declaration files
          2. tsconfig.json
        3. How it works...
          1. Compilation
        4. There's more...
          1. Source map generation
          2. Single file compilation
        5. See also
      4. Performing in-browser transpilation with SystemJS
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
        5. See also
      5. Composing application files for a minimum viable Angular 2 application
        1. Getting ready
        2. How to do it...
          1. app.component.ts
          2. app.module.ts
          3. main.ts
          4. index.html
          5. Configuring SystemJS
        3. See also
      6. Migrating the minimum viable application to Webpack bundling
        1. Getting ready
        2. How to do it...
          1. webpack.config.js
        3. See also
      7. Incorporating shims and polyfills into Webpack
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      8. HTML generation with html-webpack-plugin
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. See also
      9. Setting up an application with Angular CLI
        1. Getting ready
        2. How to do it...
          1. Running the application locally
          2. Testing the application
        3. How it works...
          1. Project configuration files
          2. TypeScript configuration files
          3. Test configuration files
          4. Core application files
          5. Environment files
          6. AppComponent files
          7. AppComponent test files
        4. There's more...
        5. See also
    17. 9. Angular 2 Testing
      1. Introduction
      2. Creating a minimum viable unit test suite with Karma, Jasmine, and TypeScript
        1. Getting ready
        2. How to do it...
          1. Writing a unit test
          2. Configuring Karma and Jasmine
          3. Configuring PhantomJS
          4. Compiling files and tests with TypeScript
          5. Incorporating Webpack into Karma
          6. Writing the test script
        3. How it works...
        4. There's more...
        5. See also
      3. Writing a minimum viable unit test suite for a simple component
        1. Getting ready
        2. How to do it...
          1. Using TestBed and async
          2. Creating a ComponentFixture
        3. How it works...
        4. See also
      4. Writing a minimum viable end-to-end test suite for a simple application
        1. Getting ready
        2. How to do it...
          1. Getting Protractor up and running
          2. Making Protractor compatible with Jasmine and TypeScript
          3. Building a page object
          4. Writing the e2e test
          5. Scripting the e2e tests
        3. How it works...
        4. There's more...
        5. See also
      5. Unit testing a synchronous service
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Testing without injection
        5. See also
      6. Unit testing a component with a service dependency using stubs
        1. Getting ready
        2. How to do it...
          1. Stubbing a service dependency
          2. Triggering events inside the component fixture
        3. How it works...
        4. See also
      7. Unit testing a component with a service dependency using spies
        1. Getting ready
        2. How to do it...
          1. Setting a spy on the injected service
        3. How it works...
        4. There's more...
        5. See also
    18. 10. Performance and Advanced Concepts
      1. Introduction
      2. Understanding and properly utilizing enableProdMode with pure and impure pipes
        1. Getting ready
        2. How to do it...
          1. Generating a consistency error
          2. Introducing change detection compliance
          3. Switching on enableProdMode
        3. How it works...
        4. There's more...
        5. See also
      3. Working with zones outside Angular
        1. Getting ready
        2. How to do it...
          1. Forking a zone
          2. Overriding zone events with ZoneSpec
        3. How it works...
        4. There's more...
          1. Understanding zone.run()
          2. Microtasks and macrotasks
        5. See also
      4. Listening for NgZone events
        1. zone.js
        2. NgZone
        3. Getting ready
        4. How to do it...
          1. Demonstrating the zone life cycle
        5. How it works...
          1. The utility of zone.js
        6. See also
      5. Execution outside the Angular zone
        1. How to do it...
        2. How it works...
        3. There's more...
        4. See also
      6. Configuring components to use explicit change detection with OnPush
        1. Getting ready
        2. How to do it...
          1. Configuring the ChangeDetectionStrategy
          2. Requesting explicit change detection
        3. How it works...
        4. There's more...
        5. See also
      7. Configuring ViewEncapsulation for maximum efficiency
        1. Getting ready
        2. How to do it...
          1. Emulated styling encapsulation
          2. No styling encapsulation
          3. Native styling encapsulation
        3. How it works...
        4. There's more...
        5. See also
      8. Configuring the Angular 2 Renderer to use web workers
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Optimizing for performance gains
          2. Compatibility considerations
        5. See also
      9. Configuring applications to use ahead-of-time compilation
        1. Getting ready
        2. How to do it...
          1. Installing AOT dependencies
          2. Configuring ngc
          3. Aligning component definitions with AOT requirements
          4. Compiling with ngc
          5. Bootstrapping with AOT
        3. How it works...
        4. There's more...
          1. Going further with Tree Shaking
        5. See also
      10. Configuring an application to use lazy loading
        1. Getting ready
        2. How to do it...
        3. How it works...
        4. There's more...
          1. Accounting for shared modules
        5. See also