Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Angular 2 Cookbook
  • Toc
  • feedback
Angular 2 Cookbook

Angular 2 Cookbook

By : Matthew Frisbie, Patrick Gillespie
4.2 (24)
close
Angular 2 Cookbook

Angular 2 Cookbook

4.2 (24)
By: Matthew Frisbie, Patrick Gillespie

Overview of this book

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.
Table of Contents (11 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Strategies for Upgrading to Angular 2
1. Strategies for Upgrading to Angular 2
Introduction
Componentizing directives using controllerAs encapsulation
Migrating an application to component directives
Implementing a basic component in AngularJS 1.5
Normalizing service types
Connecting Angular 1 and Angular 2 with UpgradeModule
Downgrading Angular 2 components to Angular 1 directives with downgradeComponent
Downgrade Angular 2 providers to Angular 1 services with downgradeInjectable
2
2. Conquering Components and Directives
chevron up
2. Conquering Components and Directives
Introduction
Using decorators to build and style a simple component
Passing members from a parent component into a child component
Binding to native element attributes
Registering handlers on native browser events
Generating and capturing custom events using EventEmitter
Attaching behavior to DOM elements with directives
Projecting nested content using ngContent
Using ngFor and ngIf structural directives for model-based DOM control
Referencing elements using template variables
Attribute property binding
Utilizing component lifecycle hooks
Referencing a parent component from a child component
Configuring mutual parent-child awareness with ViewChild and forwardRef
Configuring mutual parent-child awareness with ContentChild and forwardRef
3
3. Building Template-Driven and Reactive Forms
3. Building Template-Driven and Reactive Forms
Introduction
Implementing simple two-way data binding with ngModel
Implementing basic field validation with a FormControl
Bundling controls with a FormGroup
Bundling FormControls with a FormArray
Implementing basic forms with NgForm
Implementing basic forms with FormBuilder and formControlName
Creating and using a custom validator
Creating and using a custom asynchronous validator with Promises
4
4. Mastering Promises
4. Mastering Promises
Introduction
Understanding and implementing basic Promises
Chaining Promises and Promise handlers
Creating Promise wrappers with Promise.resolve() and Promise.reject()
Implementing Promise barriers with Promise.all()
Canceling asynchronous actions with Promise.race()
Converting a Promise into an Observable
Converting an HTTP service Observable into a ZoneAwarePromise
5
5. ReactiveX Observables
5. ReactiveX Observables
Introduction
Basic utilization of Observables with HTTP
Implementing a Publish-Subscribe model using Subjects
Creating an Observable authentication service using BehaviorSubjects
Building a generalized Publish-Subscribe service to replace $broadcast, $emit, and $on
Using QueryLists and Observables to follow changes in ViewChildren
Building a fully featured AutoComplete with Observables
6
6. The Component Router
6. The Component Router
Introduction
Setting up an application to support simple routes
Navigating with routerLinks
Navigating with the Router service
Selecting a LocationStrategy for path construction
Building stateful route behavior with RouterLinkActive
Implementing nested views with route parameters and child routes
Working with matrix URL parameters and routing arrays
Adding route authentication controls with route guards
7
7. Services, Dependency Injection, and NgModule
7. Services, Dependency Injection, and NgModule
Introduction
Injecting a simple service into a component
Controlling service instance creation and injection with NgModule
Service injection aliasing with useClass and useExisting
Injecting a value as a service with useValue and OpaqueTokens
Building a provider-configured service with useFactory
8
8. Application Organization and Management
8. Application Organization and Management
Introduction
Composing package.json for a minimum viable Angular 2 application
Configuring TypeScript for a minimum viable Angular 2 application
Performing in-browser transpilation with SystemJS
Composing application files for a minimum viable Angular 2 application
Migrating the minimum viable application to Webpack bundling
Incorporating shims and polyfills into Webpack
HTML generation with html-webpack-plugin
Setting up an application with Angular CLI
9
9. Angular 2 Testing
9. Angular 2 Testing
Introduction
Creating a minimum viable unit test suite with Karma, Jasmine, and TypeScript
Writing a minimum viable unit test suite for a simple component
Writing a minimum viable end-to-end test suite for a simple application
Unit testing a synchronous service
Unit testing a component with a service dependency using stubs
Unit testing a component with a service dependency using spies
10
10. Performance and Advanced Concepts
10. Performance and Advanced Concepts
Introduction
Understanding and properly utilizing enableProdMode with pure and impure pipes
Working with zones outside Angular
Listening for NgZone events
Execution outside the Angular zone
Configuring components to use explicit change detection with OnPush
Configuring ViewEncapsulation for maximum efficiency
Configuring the Angular 2 Renderer to use web workers
Configuring applications to use ahead-of-time compilation
Configuring an application to use lazy loading

Using decorators to build and style a simple component

When writing an application component in TypeScript, there are several new paradigms that you must become familiar and comfortable with. Though possibly intimidating initially, you will find that you'll be able to carry over much of your comprehension of Angular 1 directives.

Note

The code and a live example of this are available at http://ngcookbook.herokuapp.com/6577/.

Getting ready

One of the simplest imaginable components we can build is a template element that interpolates some values into its template. In Angular 1, one way this could be achieved was by creating an element directive, attaching some data to the scope inside the link function, and a template that would reference the data. I selected this description specifically because nearly all those concepts have been binned.

Suppose you want to create a simple article component with a pseudo template as follows:

<p>{{date}}</p> 
<h1>{{title}}</h1> 
...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 7
Next Section
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete