Download Ng Book2 r39 PDF

TitleNg Book2 r39
File Size22.4 MB
Total Pages647
Table of Contents
                            Table of Contents
Book Revision
Prerelease
Bug Reports
Chat With The Community!
Be notified of updates via Twitter
We'd love to hear from you!
Writing your First Angular 2 Web Application
	Simple Reddit Clone
	Getting started
		TypeScript
		Example Project
		Angular's Dependencies
		All Dependencies Loaded
		Adding CSS
	Our First TypeScript
		Making a Component
		Adding a template
		Booting Our Application
		Loading our Application
	Running The App
		Compiling the TypeScript Code to .js
		Using npm
		Serving The App
		Compiling on every change
	Adding Data to the Component
	Working with arrays
	Expanding our Application
		The Application Component
		Adding Interaction
		Adding the Article Component
	Rendering Multiple Rows
		Creating an Article class
		Storing multiple Articles
		Configuring the ArticleComponent with inputs
		Rendering a List of Articles
	Adding New Articles
	Finishing Touches
		Displaying the Article Domain
		Re-sorting Based on Score
	Full Code Listing
	Wrapping Up
	Getting Help
TypeScript
	Angular 2 is built in TypeScript
	What do we get with TypeScript?
	Types
		Trying it out with a REPL
	Built-in types
	Classes
		Properties
		Methods
		Constructors
		Inheritance
	Utilities
		Fat Arrow Functions
		Template Strings
	Wrapping up
How Angular Works
	Application
		The Navigation Component
		The Breadcrumbs Component
		The Product List Component
	Product Model
	Components
	Component Decorator
		Component selector
		Component template
		Adding A Product
		Viewing the Product with Template Binding
		Adding More Products
		Selecting a Product
		Listing products using <products-list>
	The ProductsList Component
		Configuring the ProductsList @Component Options
		Component inputs
		Component outputs
		Emitting Custom Events
		Writing the ProductsList Controller Class
		Writing the ProductsList View Template
		The Full ProductsList Component
	The ProductRow Component
		ProductRow Component Configuration
		ProductRow Component Definition Class
		ProductRow template
		ProductRow Full Listing
	The ProductImage Component
	The PriceDisplay Component
	The ProductDepartment Component
	NgModule and Booting the App
		Booting the app
	The Completed Project
	A Word on Data Architecture
Built-in Components
	Introduction
	NgIf
	NgSwitch
	NgStyle
	NgClass
	NgFor
		Getting an index
	NgNonBindable
	Conclusion
Forms in Angular 2
	Forms are Crucial, Forms are Complex
	FormControls and FormGroups
		FormControl
		FormGroup
	Our First Form
		Loading the FormsModule
		Simple SKU Form: @Component Annotation
		Simple SKU Form: template
		Simple SKU Form: Component Definition Class
		Try it out!
	Using FormBuilder
	Reactive Forms with FormBuilder
		Using FormBuilder
		Using myForm in the view
		Try it out!
	Adding Validations
		Explicitly setting the sku FormControl as an instance variable
		Custom Validations
	Watching For Changes
	ngModel
	Wrapping Up
HTTP
	Introduction
	Using @angular/http
		import from @angular/http
	A Basic Request
		Building the SimpleHTTPComponent @Component
		Building the SimpleHTTPComponent template
		Building the SimpleHTTPComponent Controller
		Full SimpleHTTPComponent
	Writing a YouTubeSearchComponent
		Writing a SearchResult
		Writing the YouTubeService
		Writing the SearchBox
		Writing SearchResultComponent
		Writing YouTubeSearchComponent
	@angular/http API
		Making a POST request
		PUT / PATCH / DELETE / HEAD
		RequestOptions
		Summary
Routing
	Why Do We Need Routing?
	How client-side routing works
		The beginning: using anchor tags
		The evolution: HTML5 client-side routing
	Writing our first routes
	Components of Angular 2 routing
		Imports
		Routes
		Installing our Routes
		RouterOutlet using <router-outlet>
		RouterLink using [routerLink]
	Putting it all together
		Creating the Components
		HomeComponent
		AboutComponent
		ContactComponent
		Application Component
		Configuring the Routes
	Routing Strategies
	Path location strategy
	Running the application
	Route Parameters
		ActivatedRoute
	Music Search App
		First Steps
		The SpotifyService
		The SearchComponent
		Trying the search
		TrackComponent
		Wrapping up music search
	Router Hooks
		AuthService
		LoginComponent
		ProtectedComponent and Route Guards
	Nested Routes
		Configuring Routes
		ProductsComponent
	Summary
Dependency Injection
	Injections Example: PriceService
	``Don't Call Us…''
	Dependency Injection Parts
	Playing with an Injector
	Providing Dependencies with NgModule
	Providers
		Using a Class
		Using a Factory
		Using a Value
		Using an alias
	Dependency Injection in Apps
	Working with Injectors
	Substituting values
	NgModule
		NgModule vs. JavaScript Modules
		The Compiler and Components
		Dependency Injection and Providers
		Component Visibility
		Specifying Providers
	Conclusion
Data Architecture in Angular 2
	An Overview of Data Architecture
		Data Architecture in Angular 2
Data Architecture with Observables - Part 1: Services
	Observables and RxJS
		Note: Some RxJS Knowledge Required
		Learning Reactive Programming and RxJS
	Chat App Overview
		Components
		Models
		Services
		Summary
	Implementing the Models
		User
		Thread
		Message
	Implementing UserService
		currentUser stream
		Setting a new user
		UserService.ts
	The MessagesService
		the newMessages stream
		the messages stream
		The Operation Stream Pattern
		Sharing the Stream
		Adding Messages to the messages Stream
		Our completed MessagesService
		Trying out MessagesService
	The ThreadsService
		A map of the current set of Threads (in threads)
		A chronological list of Threads, newest-first (in orderedthreads)
		The currently selected Thread (in currentThread)
		The list of Messages for the currently selected Thread (in currentThreadMessages)
		Our Completed ThreadsService
	Data Model Summary
Data Architecture with Observables - Part 2: View Components
	Building Our Views: The ChatApp Top-Level Component
	The ChatThreads Component
		ChatThreads Controller
		ChatThreads template
	The Single ChatThread Component
		ChatThread Controller and ngOnInit
		ChatThread template
		ChatThread Complete Code
	The ChatWindow Component
	The ChatMessage Component
		Setting incoming
		The ChatMessage template
		The Complete ChatMessage Code Listing
	The ChatNavBar Component
		The ChatNavBar @Component
		The ChatNavBar Controller
		The ChatNavBar template
		The Completed ChatNavBar
	Summary
	Next Steps
Introduction to Redux with TypeScript
	Redux
		Redux: Key Ideas
	Core Redux Ideas
		What's a reducer?
		Defining Action and Reducer Interfaces
		Creating Our First Reducer
		Running Our First Reducer
		Adjusting the Counter With actions
		Reducer switch
		Action ``Arguments''
	Storing Our State
		Using the Store
		Being Notified with subscribe
		The Core of Redux
	A Messaging App
		Messaging App state
		Messaging App actions
		Messaging App reducer
		Trying Out Our Actions
		Action Creators
		Using Real Redux
	Using Redux in Angular
	Planning Our App
	Setting Up Redux
		Defining the Application State
		Defining the Reducers
		Defining Action Creators
		Creating the Store
	CounterApp Component
	Providing the Store
	Bootstrapping the App
	The CounterComponent
		imports
		The template
		The constructor
		Putting It All Together
	What's Next
	References
Intermediate Redux in Angular
	Context For This Chapter
	Chat App Overview
		Components
		Models
		Reducers
		Summary
	Implementing the Models
		User
		Thread
		Message
	App State
		A Word on Code Layout
		The Root Reducer
		The UsersState
		The ThreadsState
		Visualizing Our AppState
	Building the Reducers (and Action Creators)
		Set Current User Action Creators
		UsersReducer - Set Current User
		Thread and Messages Overview
		Adding a New Thread Action Creators
		Adding a New Thread Reducer
		Adding New Messages Action Creators
		Adding A New Message Reducer
		Selecting A Thread Action Creators
		Selecting A Thread Reducer
		Reducers Summary
	Building the Angular Chat App
		The top-level ChatApp
		The ChatPage
		Container vs. Presentational Components
	Building the ChatNavBar
		Redux Selectors
		Threads Selectors
		Unread Messages Count Selector
	Building the ChatThreads Component
		ChatThreads Controller
		ChatThreads template
	The Single ChatThread Component
		ChatThread @Component and template
	Building the ChatWindow Component
	The ChatMessage Component
		Setting incoming
		The ChatMessage template
	Summary
Advanced Components
	Styling
		View (Style) Encapsulation
		Shadow DOM Encapsulation
		No Encapsulation
	Creating a Popup - Referencing and Modifying Host Elements
		Popup Structure
		Using ElementRef
		Binding to the host
		Adding a Button using exportAs
	Creating a Message Pane with Transclusion
		Changing the host CSS
		Using ng-content
	Querying Neighbor Directives - Writing Tabs
		Tab Component
		Tabset Component
		Using the Tabset
	Lifecycle Hooks
		OnInit and OnDestroy
		OnChanges
		DoCheck
		AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked
	Advanced Templates
		Rewriting ngIf - ngBookIf
		Rewriting ngFor - ngBookRepeat
	Change Detection
		Customizing Change Detection
		Zones
		Observables and OnPush
	Summary
Testing
	Test driven?
	End-to-end vs. Unit Testing
	Testing Tools
		Jasmine
		Karma
	Writing Unit Tests
	Angular Unit testing framework
	Setting Up Testing
	Testing Services and HTTP
		HTTP Considerations
		Stubs
		Mocks
		Http MockBackend
		TestBed.configureTestingModule and Providers
		Testing getTrack
	Testing Routing to Components
		Creating a Router for Testing
		Mocking dependencies
		Spies
	Back to Testing Code
		fakeAsync and advance
		inject
		Testing ArtistComponent's Initialization
		Testing ArtistComponent Methods
		Testing ArtistComponent DOM Template Values
	Testing Forms
		Creating a ConsoleSpy
		Installing the ConsoleSpy
		Configuring the Testing Module
		Testing The Form
		Refactoring Our Form Test
	Testing HTTP requests
		Testing a POST
		Testing DELETE
		Testing HTTP Headers
		Testing YouTubeService
	Conclusion
Converting an Angular 1 App to Angular 2
	Peripheral Concepts
	What We're Building
	Mapping Angular 1 to Angular 2
	Requirements for Interoperability
	The Angular 1 App
		The ng1-app HTML
		Code Overview
		ng1: PinsService
		ng1: Configuring Routes
		ng1: HomeController
		ng1: / HomeController template
		ng1: pin Directive
		ng1: pin Directive template
		ng1: AddController
		ng1: AddController template
		ng1: Summary
	Building A Hybrid
		Hybrid Project Structure
		Bootstrapping our Hybrid App
		What We'll Upgrade
		A Minor Detour: Typing Files
		Writing ng2 PinControlsComponent
		Using ng2 PinControlsComponent
		Downgrading ng2 PinControlsComponent to ng1
		Adding Pins with ng2
		Upgrading ng1 PinsService and $state to ng2
		Writing ng2 AddPinComponent
		Using AddPinComponent
		Exposing an ng2 service to ng1
		Writing the AnalyticsService
		Downgrade ng2 AnalyticsService to ng1
		Using AnalyticsService in ng1
	Summary
	References
Changelog
	Revision 39 - 2016-09-03
	Revision 38 - 2016-08-29
	Revision 37 - 2016-08-02
	Revision 36 - 2016-07-20
	Revision 35 - 2016-06-30
	Revision 34 - 2016-06-15
	Revision 33 - 2016-05-11
	Revision 32 - 2016-05-06
	Revision 31 - 2016-04-28
	Revision 30 - 2016-04-20
	Revision 29 - 2016-04-08
	Revision 28 - 2016-04-01
	Revision 27 - 2016-03-25
	Revision 26 - 2016-03-24
	Revision 25 - 2016-03-21
	Revision 24 - 2016-03-10
	Revision 23 - 2016-03-04
	Revision 22 - 2016-02-24
	Revision 21 - 2016-02-20
	Revision 20 - 2016-02-11
	Revision 19 - 2016-02-04
	Revision 18 - 2016-01-29
	Revision 17 - 2016-01-28
	Revision 16 - 2016-01-14
	Revision 15 - 2016-01-07
	Revision 14 - 2015-12-23
	Revision 13 - 2015-12-17
	Revision 12 - 2015-11-16
	Revision 11 - 2015-11-09
	Revision 10 - 2015-10-30
	Revision 9 - 2015-10-15
	Revision 8 - 2015-10-08
	Revision 7 - 2015-09-23
	Revision 6 - 2015-08-28
	Revision 5
	Revision 4
	Revision 3
	Revision 2
	Revision 1
                        
Document Text Contents
Page 323

Data Architecture with Observables - Part 1: Services 307

Implementing this is a little bit more complicated than it may seem at the surface. Say we
implemented it like this:

1 var theCurrentThread: Thread;

2

3 this.currentThread.subscribe((thread: Thread) => {

4 theCurrentThread = thread;

5 })

6

7 this.currentThreadMessages.map(

8 (mesages: Message[]) => {

9 return _.filter(messages,

10 (message: Message) => {

11 return message.thread.id == theCurrentThread.id;

12 })

13 })

What’s wrong with this approach? Well, if the currentThread changes, currentThreadMessages
won’t know about it and so we’ll have an outdated list of currentThreadMessages!

What if we reversed it, and stored the current list of messages in a variable and subscribed to the
changing of currentThread? We’d have the same problem only this time we would know when the
thread changes but not when a new message came in.

How can we solve this problem?

It turns out, RxJS has a set of operators that we can use to combine multiple streams. In this case
we want to say “if either currentThread or messagesService.messages changes, then we want to
emit something.” For this we use the combineLatest⁸⁴ operator.

code/rxjs/chat/app/ts/services/ThreadsService.ts

50 this.currentThreadMessages = this.currentThread

51 .combineLatest(messagesService.messages,

52 (currentThread: Thread, messages: Message[]) => {

When we’re combining two streams one or the other will arrive first and there’s no guarantee that
we’ll have a value on both streams, so we need to check to make sure we have what we need
otherwise we’ll just return an empty list.

Now that we have both the current thread and messages, we can filter out just the messages we’re
interested in:

⁸⁴https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatestproto.md

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatestproto.md

Similer Documents