- Angular 2 Cookbook
- Angular 2 Cookbook
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Customer Feedback
- Dedication
- Preface
- 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. 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. 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. 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. 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. 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. Services, Dependency Injection, and NgModule
- 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. 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. 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
This chapter will cover the following recipes:
- 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 Angular 2 application to Webpack bundling
- Incorporating shims and polyfills into Webpack
- HTML generation with html-webpack-plugin
- Setting up an application with Angular's CLI
The Angular 2 project's ambitions goals involve the utilization of a different language with different syntax and constructs, as well as providing high efficiency and modularity. What this means for you is that the process of maintaining an Angular 2 application may be difficult.
The ultimate goal is to efficiently serve HTML, CSS, and JS to a web browser and to make it easy to develop the source components of these static files. How one arrives at this endpoint can be worked out in a number of different ways, and it would be an exercise in futility to write a chapter on all of them.
Instead, this chapter will provide a few opinionated ways of arranging your Angular 2 application in a way that it would reflect the most popular and effective strategies. It will also show you how to build and extend a minimum viable Angular 2 application. For some, this will seem a bit simple and rudimentary. However, the majority of Quickstart projects or code generation frameworks simply give you a repository and a few commands to run in order to get out of the door, and these commands run without telling you what they're doing or how they're doing it! In this chapter, you will learn how to build an Angular 2 application from the ground up along with the packages and tools that will help you do it and why these methods were selected.
-
No Comment