Download ng-book2-r33.pdf PDF

Titleng-book2-r33.pdf
File Size21.6 MB
Total Pages531
Table of Contents
                            Table of Contents
Book Revision
Prerelease
Bug Reports
Chat With The Community!
Be notified of updates via Twitter
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
	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
	Controls and Control Groups
		Control
		ControlGroup
	Our First Form
		Simple SKU Form: @Component Annotation
		Simple SKU Form: template
		Simple SKU Form: Component Definition Class
		Try it out!
	Using FormBuilder
		Using FormBuilder
		Using myForm in the view
		Try it out!
	Adding Validations
		Explicitly setting the sku Control as an instance variable
		Explicitly setting the sku Control as an instance variable
		Custom Validations
	Watching For Changes
	ngModel
	Wrapping Up
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
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 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
		RouteConfig
		RouterOutlet
		RouterLink
	Putting it all together
		Creating the components
		HomeComponent
		AboutComponent
		ContactComponent
		Application component
	Routing strategies
	Path location strategy
	Running the application
	Route Parameters
		RouteParams
	Music Search App
		First Steps
		The SpotifyService
		The SearchComponent
		Trying the search
		TrackComponent
		Wrapping up music search
	Router Lifecycle Hooks
		AuthService
		LoginComponent
		ProtectedComponent
	Nested routes
		Configuring Routes
		ProductsComponent
	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
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
Testing
	Test driven?
	End-to-end vs. Unit Testing
	Testing tools
		Jasmine
		Karma
	Writing unit tests
	Angular2 Unit testing framework
	Setting Up Testing
	Testing Services and HTTP
		HTTP Considerations
		Stubs
		Mocks
		Http MockBackend
		beforeEachProviders Hooks
		Testing getTrack
	Testing Components
		Mocking dependencies
		Mocking the router classes
	Testing Forms
	Testing HTTP requests
	Conclusion
Dependency Injection
	Injections Example: PriceService
	``Don't Call Us…''
	Dependency Injection Parts
	Playing with an Injector
	Providers
		Using a Class
		Using a Factory
		Using a Value
		Using an alias
	Dependency Injection in Apps
	Working with Injectors
	Substituting values
	Conclusion
Changelog
	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 266

Routing 252

RouteConfig

To define routes for our application, we annotate our main component with the RouteConfig
annotation:

code/routes/basic/app/ts/app.ts

45 @RouteConfig([

46 { path: '/', name: 'root', redirectTo: ['/Home'] },

47 { path: '/home', name: 'Home', component: HomeComponent },

48 { path: '/about', name: 'About', component: AboutComponent },

49 { path: '/contact', name: 'Contact', component: ContactComponent },

50 { path: '/contactus', name: 'ContactUs', redirectTo: ['/Contact'] },

51 ])

Notice a few things about the routes:

• path specifies the URL this route will handle
• name uniquely identifies the route and is used to navigate to it either by using a RouterLink,
a redirectTo or from the Router API

• component is what ties a given route path to a component that will handle the route
• the optional redirectTo is used to redirect a given path to an existing route

As a summary, the goal of routes is to specify which component will handle a given path.

Redirections

When we use redirectTo on a route definition, it will tell the router that when we visit the path of
the route, we want the browser to be redirected to another route.

In our sample code above, if we visit the root path at http://localhost:8080/#/⁷⁶, we’ll be redirected
to the default route Home.

Another example is the ContactUs route:

1 { path: '/contactus', name: 'ContactUs', redirectTo: ['/Contact'] },

In this case, if we visit the URL http://localhost:8080/#/contactus⁷⁷, we’ll see that the browser
redirects to /contact.

⁷⁶http://localhost:8080/#/
⁷⁷http://localhost:8080/#/contactus

http://localhost:8080/#/
http://localhost:8080/#/contactus
http://localhost:8080/#/

Similer Documents