Angular2NotesForProfessionals.pdf

(1684 KB) Pobierz
Angular 2
Angular 2
Notes for Professionals
Notes for Professionals
of professional hints and tricks
200+ pages
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial Angular 2 group(s) or company(s).
All trademarks and registered trademarks are
the property of their respective owners
Contents
About
................................................................................................................................................................................... 1
Chapter 1: Getting started with Angular 2
....................................................................................................... 2
Section 1.1: Getting started with Angular 2 with node.js/expressjs backend (http example included)
................. 2
Section 1.2: Install angular2 with angular-cli
.............................................................................................................. 7
Section 1.3: Getting started with Angular 2 without angular-cli
................................................................................ 9
Section 1.4: Getting through that pesky company proxy
........................................................................................ 14
Section 1.5: Keeping Visual Studios in sync with NPM and NODE Updates
.......................................................... 15
Section 1.6: Let's dive into Angular 4!
......................................................................................................................... 15
Chapter 2: Dynamically add components using ViewContainerRef.createComponent
........ 20
Section 2.1: A wrapper component that adds dynamic components declaratively
............................................ 20
Section 2.2: Dynamically add component on specific event(click)
....................................................................... 21
Section 2.3: Rendered dynamically created component array on template html in Angular2
.......................... 22
Chapter 3: Pipes
........................................................................................................................................................... 26
Section 3.1: Custom Pipes
........................................................................................................................................... 26
Section 3.2: Built-in Pipes
............................................................................................................................................ 27
Section 3.3: Chaining Pipes
......................................................................................................................................... 27
Section 3.4: Debugging With JsonPipe
..................................................................................................................... 28
Section 3.5: Dynamic Pipe
.......................................................................................................................................... 28
Section 3.6: Unwrap async values with async pipe
................................................................................................. 29
Section 3.7: Stateful Pipes
........................................................................................................................................... 29
Section 3.8: Creating Custom Pipe
............................................................................................................................ 30
Section 3.9: Globally Available Custom Pipe
............................................................................................................ 31
Section 3.10: Extending an Existing Pipe
.................................................................................................................... 31
Section 3.11: Testing a pipe
......................................................................................................................................... 32
Chapter 4: Routing (3.0.0+)
................................................................................................................................... 33
Section 4.1: Controlling Access to or from a Route
.................................................................................................. 33
Section 4.2: Add guard to route configuration
........................................................................................................ 34
Section 4.3: Using Resolvers and Guards
................................................................................................................. 35
Section 4.4: Use Guard in app bootstrap
.................................................................................................................. 36
Section 4.5: Bootstrapping
......................................................................................................................................... 36
Section 4.6: Configuring router-outlet
....................................................................................................................... 37
Section 4.7: Changing routes (using templates & directives)
................................................................................. 37
Section 4.8: Setting the Routes
.................................................................................................................................. 38
Chapter 5: Http Interceptor
.................................................................................................................................. 40
Section 5.1: Using our class instead of Angular's Http
............................................................................................. 40
Section 5.2: Simple Class Extending angular's Http class
....................................................................................... 40
Section 5.3: Simple HttpClient AuthToken Interceptor (Angular 4.3+)
................................................................... 41
Chapter 6: Directives
................................................................................................................................................ 43
Section 6.1: *ngFor
....................................................................................................................................................... 43
Section 6.2: Attribute directive
................................................................................................................................... 44
Section 6.3: Component is a directive with template
............................................................................................... 44
Section 6.4: Structural directives
................................................................................................................................ 44
Section 6.5: Custom directive
..................................................................................................................................... 44
Section 6.6: Copy to Clipboard directive
................................................................................................................... 44
Section 6.7: Testing a custom directive
..................................................................................................................... 46
Chapter 7: Installing 3rd party plugins with angular-cli@1.0.0-beta.10
......................................... 48
Section 7.1: Add 3rd party library that does not have typings
............................................................................... 48
Section 7.2: Adding jquery library in angular-cli project
......................................................................................... 48
Chapter 8: Testing an Angular 2 App
............................................................................................................... 51
Section 8.1: Setting up testing with Gulp, Webpack, Karma and Jasmine
............................................................ 51
Section 8.2: Installing the Jasmine testing framework
........................................................................................... 55
Section 8.3: Testing Http Service
............................................................................................................................... 55
Section 8.4: Testing Angular Components - Basic
................................................................................................... 57
Chapter 9: Routing
..................................................................................................................................................... 59
Section 9.1: ResolveData
............................................................................................................................................. 59
Section 9.2: Routing with Children
............................................................................................................................. 61
Section 9.3: Basic Routing
.......................................................................................................................................... 62
Section 9.4: Child Routes
............................................................................................................................................ 65
Chapter 10: Optimizing rendering using ChangeDetectionStrategy
................................................ 67
Section 10.1: Default vs OnPush
.................................................................................................................................. 67
Chapter 11: Lifecycle Hooks
................................................................................................................................... 68
Section 11.1: OnChanges
.............................................................................................................................................. 68
Section 11.2: OnInit
....................................................................................................................................................... 68
Section 11.3: OnDestroy
............................................................................................................................................... 68
Section 11.4: AfterContentInit
...................................................................................................................................... 69
Section 11.5: AfterContentChecked
............................................................................................................................ 69
Section 11.6: AfterViewInit
............................................................................................................................................ 69
Section 11.7: AfterViewChecked
.................................................................................................................................. 70
Section 11.8: DoCheck
.................................................................................................................................................. 70
Chapter 12: Directives & components : @Input @Output
...................................................................... 72
Section 12.1: Angular2 @Input and @Output in a nested component
................................................................... 72
Section 12.2: Input example
........................................................................................................................................ 73
Section 12.3: Angular2 @Input with asynchronous data
......................................................................................... 74
Chapter 13: Angular RXJS Subjects and Observables with API requests
....................................... 76
Section 13.1: Wait for multiple requests
..................................................................................................................... 76
Section 13.2: Basic request
......................................................................................................................................... 76
Section 13.3: Encapsulating API requests
.................................................................................................................. 76
Chapter 14: Zone.js
.................................................................................................................................................... 78
Section 14.1: Getting reference to NgZone
................................................................................................................ 78
Section 14.2: Using NgZone to do multiple HTTP requests before showing the data
......................................... 78
Chapter 15: Services and Dependency Injection
......................................................................................... 79
Section 15.1: Example service
..................................................................................................................................... 79
Section 15.2: Example with Promise.resolve
............................................................................................................. 80
Section 15.3: Testing a Service
................................................................................................................................... 80
Chapter 16: Angular 2 Forms Update
............................................................................................................... 84
Section 16.1: Angular 2 : Template Driven Forms
..................................................................................................... 84
Section 16.2: Angular 2 Form - Custom Email/Password Validation
..................................................................... 84
Section 16.3: Simple Password Change Form with Multi Control Validation
......................................................... 86
Section 16.4: Angular 2 Forms ( Reactive Forms ) with registration form and confirm password validation
................................................................................................................................................................................ 87
Section 16.5: Angular 2: Reactive Forms (a.k.a Model-driven Forms)
.................................................................... 89
Section 16.6: Angular2 - Form Builder
....................................................................................................................... 90
Chapter 17: Detecting resize events
................................................................................................................. 92
Section 17.1: A component listening in on the window resize event
....................................................................... 92
Chapter 18: Bootstrap Empty module in angular 2
.................................................................................. 93
Section 18.1: An empty module
................................................................................................................................... 93
Section 18.2: Application Root Module
...................................................................................................................... 93
Section 18.3: Bootstrapping your module
................................................................................................................. 93
Section 18.4: A module with networking on the web browser
................................................................................ 93
Section 18.5: Static bootstrapping with factory classes
.......................................................................................... 94
Chapter 19: Advanced Component Examples
............................................................................................... 95
Section 19.1: Image Picker with Preview
.................................................................................................................... 95
Section 19.2: Filter out table values by the input
...................................................................................................... 96
Chapter 20: Bypassing Sanitizing for trusted values
.............................................................................. 98
Section 20.1: Bypassing Sanitizing with pipes (for code re-use)
............................................................................ 98
Chapter 21: Angular2 Custom Validations
................................................................................................... 101
Section 21.1: get/set formBuilder controls parameters
......................................................................................... 101
Section 21.2: Custom validator examples:
.............................................................................................................. 101
Section 21.3: Using validators in the Formbuilder
.................................................................................................. 102
Chapter 22: Angular 2 Data Driven Forms
.................................................................................................. 103
Section 22.1: Data driven form
................................................................................................................................. 103
Chapter 23: Angular - ForLoop
.......................................................................................................................... 105
Section 23.1: NgFor - Markup For Loop
.................................................................................................................. 105
Section 23.2: *ngFor with component
..................................................................................................................... 105
Section 23.3: Angular 2 for-loop
.............................................................................................................................. 105
Section 23.4: *ngFor X amount of items per row
................................................................................................... 106
Section 23.5: *ngFor in the Table Rows
................................................................................................................... 106
Chapter 24: Feature Modules
............................................................................................................................ 107
Section 24.1: A Feature Module
................................................................................................................................ 107
Chapter 25: Angular2 In Memory Web API
.................................................................................................. 108
Section 25.1: Setting Up Multiple Test API Routes
.................................................................................................. 108
Section 25.2: Basic Setup
......................................................................................................................................... 108
Chapter 26: Ahead-of-time (AOT) compilation with Angular 2
......................................................... 110
Section 26.1: Why we need compilation, Flow of events compilation and example?
........................................ 110
Section 26.2: Using AoT Compilation with Angular CLI
......................................................................................... 111
Section 26.3: Install Angular 2 dependencies with compiler
................................................................................. 111
Section 26.4: Add `angularCompilerOptions` to your `tsconfig.json` file
.............................................................. 111
Section 26.5: Run ngc, the angular compiler
.......................................................................................................... 111
Section 26.6: Modify `main.ts` file to use NgFactory and static platform browser
............................................ 112
Chapter 27: Debugging Angular2 typescript application using Visual Studio Code
.............. 113
Section 27.1: Launch.json setup for you workspace
.............................................................................................. 113
Chapter 28: CRUD in Angular2 with Restful API
........................................................................................ 115
Section 28.1: Read from an Restful API in Angular2
.............................................................................................. 115
Chapter 29: Component interactions
............................................................................................................. 116
Section 29.1: Parent - Child interaction using @Input & @Output properties
..................................................... 116
Section 29.2: Parent - Child interaction using ViewChild
....................................................................................... 117
Section 29.3: Bidirectional parent-child interaction through a service
................................................................ 118
Chapter 30: Use native webcomponents in Angular 2
.......................................................................... 120
Section 30.1: Include custom elements schema in your module
.......................................................................... 120
Section 30.2: Use your webcomponent in a template
.......................................................................................... 120
Chapter 31: Lazy loading a module
................................................................................................................. 121
Section 31.1: Lazy loading example
......................................................................................................................... 121
Chapter 32: Update typings
................................................................................................................................ 123
Section 32.1: Update typings when: typings WARN deprecated
.......................................................................... 123
Chapter 33: Mocking @ngrx/Store
.................................................................................................................. 124
Section 33.1: Unit Test For Component With Mock Store
...................................................................................... 124
Section 33.2: Angular 2 - Mock Observable ( service + component )
................................................................. 125
Section 33.3: Observer Mock
.................................................................................................................................... 128
Section 33.4: Unit Test For Component Spying On Store
..................................................................................... 128
Section 33.5: Simple Store
........................................................................................................................................ 129
Chapter 34: How to use ngfor
........................................................................................................................... 132
Section 34.1: *ngFor with pipe
................................................................................................................................... 132
Section 34.2: Unordered list example
..................................................................................................................... 132
Section 34.3: More complext template example
.................................................................................................... 132
Section 34.4: Tracking current interaction example
.............................................................................................. 132
Section 34.5: Angular2 aliased exported values
.................................................................................................... 133
Chapter 35: ngrx
........................................................................................................................................................ 134
Section 35.1: Complete example : Login/logout a user
......................................................................................... 134
Chapter 36: Animation
........................................................................................................................................... 140
Section 36.1: Transition between null states
........................................................................................................... 140
Section 36.2: Animating between multiple states
.................................................................................................. 140
Chapter 37: Commonly built-in directives and services
....................................................................... 142
Section 37.1: Location Class
...................................................................................................................................... 142
Section 37.2: AsyncPipe
............................................................................................................................................ 142
Section 37.3: Displaying current angular2 version used in your project
............................................................. 143
Section 37.4: Currency Pipe
...................................................................................................................................... 143
Chapter 38: How to Use ngif
............................................................................................................................... 144
Section 38.1: To run a function at the start or end of *ngFor loop Using *ngIf
................................................... 144
Section 38.2: Display a loading message
............................................................................................................... 144
Section 38.3: Show Alert Message on a condition
................................................................................................. 144
Section 38.4: Use *ngIf with*ngFor
........................................................................................................................... 145
Chapter 39: Testing ngModel
............................................................................................................................. 146
Section 39.1: Basic test
.............................................................................................................................................. 146
Chapter 40: Create an Angular 2+ NPM package
................................................................................... 148
Section 40.1: Simplest package
................................................................................................................................ 148
Chapter 41: Angular2 CanActivate
.................................................................................................................. 152
Section 41.1: Angular2 CanActivate
.......................................................................................................................... 152
Chapter 42: Angular 2 - Protractor
................................................................................................................. 153
Section 42.1: Angular2 Protractor - Installation
..................................................................................................... 153
Section 42.2: Testing Navbar routing with Protractor
........................................................................................... 154
Chapter 43: Example for routes such as /route/subroute for static urls
.................................. 156
Section 43.1: Basic route example with sub routes tree
........................................................................................ 156
Chapter 44: Angular2 Input() output()
.......................................................................................................... 157
Section 44.1: Input()
................................................................................................................................................... 157
Section 44.2: Simple example of Input Properties
................................................................................................. 158
Chapter 45: Page title
............................................................................................................................................ 159
Section 45.1: changing the page title
....................................................................................................................... 159
Chapter 46: unit testing
........................................................................................................................................ 160
Section 46.1: Basic unit test
...................................................................................................................................... 160
Chapter 47: Angular-cli
......................................................................................................................................... 161
Section 47.1: New project with scss/sass as stylesheet
........................................................................................ 161

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin