Pro Angular 6

Contents at a Glance......Page 5
Contents......Page 7
About the Author......Page 24
About the Technical Reviewer......Page 25
 What Is the Structure of This Book?......Page 26
 Are There Lots of Examples?......Page 27
 Summary......Page 29
  Installing Node.js......Page 30
  Installing Git......Page 31
  Installing an Editor......Page 32
  Creating the Package File......Page 33
  Starting the Server......Page 35
  Editing the HTML File......Page 36
 Adding Angular Features to the Project......Page 38
  Preparing the HTML File......Page 39
  Creating a Data Model......Page 40
  Creating a Component......Page 42
   Understanding the Decorator......Page 43
  Putting the Application Together......Page 44
  Adding the To-Do Table......Page 47
  Creating a Two-Way Data Binding......Page 50
   Filtering To-Do Items......Page 51
  Adding To-Do Items......Page 52
 Summary......Page 55
Chapter 3: Putting Angular in Context......Page 56
  Understanding Round-Trip and Single-Page Applications......Page 57
 Understanding the MVC Pattern......Page 59
  Understanding Models......Page 61
   Understanding View Data......Page 63
 Understanding RESTful Services......Page 64
  Putting the Logic in the Wrong Place......Page 66
 Summary......Page 67
 Preparing the Example Project......Page 68
 Understanding HTML......Page 70
  Applying Attributes Without Values......Page 71
  Understanding the Document Structure......Page 72
 Understanding Bootstrap......Page 74
   Using Contextual Classes......Page 75
   Using Margin and Padding......Page 77
   Changing Element Sizes......Page 78
  Using Bootstrap to Style Tables......Page 79
  Using Bootstrap to Create Forms......Page 80
  Using Bootstrap to Create Grids......Page 82
   Creating Responsive Grids......Page 84
   Creating a Simplified Grid Layout......Page 85
 Summary......Page 87
Chapter 5: JavaScript and TypeScript: Part 1......Page 88
  Creating the HTML and JavaScript Files......Page 90
  Running the Example Project......Page 91
 Understanding the Script Element......Page 92
  Using a JavaScript Module Loader......Page 93
  Understanding the Basic Workflow......Page 94
 Defining and Using Functions......Page 95
   Using Default and Rest Parameters......Page 97
  Defining Functions That Return Results......Page 98
  Using Functions as Arguments to Other Functions......Page 99
 Using Variables and Types......Page 100
   Working with Strings......Page 102
    Using Template Strings......Page 103
  Using Conditional Statements......Page 104
  The Equality Operator vs. the Identity Operator......Page 105
   Converting Numbers to Strings......Page 106
   Converting Strings to Numbers......Page 107
  Using an Array Literal......Page 108
  Enumerating the Contents of an Array......Page 109
  Using the Built-in Array Methods......Page 110
 Summary......Page 111
 Preparing the Example Project......Page 112
 Working with Objects......Page 113
  Using Functions as Methods......Page 114
  Defining Classes......Page 115
   Defining Class Getter and Setter Properties......Page 117
   Using Class Inheritance......Page 118
  Creating Modules......Page 119
   Importing Specific Types......Page 120
   Renaming Imports......Page 121
   Importing All of the Types in a Module......Page 122
  Using Type Annotations......Page 123
   Type Annotating Properties and Variables......Page 126
   Specifying Multiple Types or Any Type......Page 127
  Using Indexable Types......Page 129
  Using Access Modifiers......Page 130
 Summary......Page 131
 Preparing the Project......Page 132
  Installing the Additional NPM Packages......Page 133
  Preparing the RESTful Web Service......Page 134
  Running the Example Application......Page 137
 Preparing the Angular Project Features......Page 138
  Updating the Root Module......Page 139
  Inspecting the Bootstrap File......Page 140
  Creating the Model Classes......Page 141
  Creating the Dummy Data Source......Page 142
  Creating the Model Repository......Page 143
  Creating the Feature Module......Page 144
  Creating the Store Component and Template......Page 145
  Updating the Root Component and Root Module......Page 147
  Displaying the Product Details......Page 148
  Adding Category Selection......Page 150
  Adding Product Pagination......Page 152
  Creating a Custom Directive......Page 156
 Summary......Page 159
 Creating the Cart......Page 160
  Creating the Cart Model......Page 161
  Creating the Cart Summary Components......Page 162
  Integrating the Cart into the Store......Page 164
 Adding URL Routing......Page 167
  Creating the Cart Detail and Checkout Components......Page 168
  Creating and Applying the Routing Configuration......Page 169
  Navigating through the Application......Page 170
  Guarding the Routes......Page 173
 Completing the Cart Detail Feature......Page 176
  Extending the Model......Page 178
   Updating the Repository and Data Source......Page 179
   Updating the Feature Module......Page 180
  Collecting the Order Details......Page 181
 Using the RESTful Web Service......Page 185
  Applying the Data Source......Page 186
 Summary......Page 187
  Creating the Module......Page 188
  Configuring the URL Routing System......Page 191
  Navigating to the Administration URL......Page 192
  Understanding the Authentication System......Page 194
  Extending the Data Source......Page 195
  Creating the Authentication Service......Page 196
  Enabling Authentication......Page 197
 Extending the Data Source and Repositories......Page 200
  Creating the Placeholder Components......Page 204
  Preparing the Common Content and the Feature Module......Page 205
  Implementing the Product Feature......Page 208
   Implementing the Product Editor......Page 209
  Implementing the Orders Feature......Page 211
 Summary......Page 214
  Installing Docker......Page 215
  Preparing the Application......Page 216
   Configuring the HTTP Server......Page 217
  Running the Application......Page 218
 Summary......Page 219
 Preparing a TypeScript Angular Development Project......Page 220
  Creating and Serving the HTML Document......Page 221
  Adding Packages......Page 222
   Understanding the Dependencies Packages......Page 224
   Understanding the Development Dependencies Packages......Page 225
   Setting Up TypeScript......Page 226
    Configuring the TypeScript Compiler......Page 227
   Configuring the Development HTTP Server......Page 229
 Starting Angular Development with TypeScript......Page 232
   Creating the Data Source......Page 236
   Creating the Model Repository......Page 237
  Creating the Template and Root Component......Page 239
  Bootstrapping the Application......Page 240
  Configuring the JavaScript Module Loader......Page 241
   Resolving the RxJS Modules......Page 242
   Resolving the Angular Modules......Page 243
   Applying the Configuration Options......Page 244
   Applying the JavaScript Module Loader......Page 245
   Styling the Content......Page 246
  Running the Application......Page 247
 Summary......Page 248
Chapter 12: Using Data Bindings......Page 249
 Preparing the Example Project......Page 250
 Understanding One-Way Data Bindings......Page 251
   Understanding Property Bindings......Page 253
  Understanding the Expression......Page 254
  Understanding the Brackets......Page 255
  Using the Standard Property Binding......Page 256
  Using the String Interpolation Binding......Page 258
  Using the Attribute Binding......Page 259
   Setting All of an Element’s Classes with the Standard Binding......Page 261
   Setting Individual Classes Using the Special Class Binding......Page 262
   Setting Classes Using the ngClass Directive......Page 263
   Setting a Single Style Property......Page 266
   Setting Styles Using the ngStyle Directive......Page 268
 Updating the Data in the Application......Page 270
 Summary......Page 272
Chapter 13: Using the Built-In in Directives......Page 273
 Preparing the Example Project......Page 274
 Using the Built-in Directives......Page 275
  Using the ngIf Directive......Page 276
  Using the ngSwitch Directive......Page 278
   Avoiding Literal Value Problems......Page 280
  Using the ngFor Directive......Page 281
   Using Other Template Variables......Page 283
    Using the Index Value......Page 284
    Using the Odd and Even Values......Page 285
    Using the First and Last Values......Page 287
   Minimizing Element Operations......Page 288
  Using the ngTemplateOutlet Directive......Page 291
   Providing Context Data......Page 293
  Using Idempotent Expressions......Page 294
  Understanding the Expression Context......Page 297
 Summary......Page 300
Chapter 14: Using Events and Forms......Page 301
  Adding the Forms Module......Page 302
  Preparing the Component and Template......Page 304
 Using the Event Binding......Page 305
  Understanding Dynamically Defined Properties......Page 307
  Using Event Data......Page 309
  Using Template Reference Variables......Page 311
 Using Two-Way Data Bindings......Page 313
  Using the ngModel Directive......Page 315
  Adding a Form to the Example Application......Page 317
  Adding Form Data Validation......Page 319
   Styling Elements Using Validation Classes......Page 321
   Displaying Field-Level Validation Messages......Page 323
   Using the Component to Display Validation Messages......Page 327
  Validating the Entire Form......Page 329
   Displaying Summary Validation Messages......Page 332
   Disabling the Submit Button......Page 334
  Enabling Model-Based Forms Feature......Page 336
  Defining the Form Model Classes......Page 337
  Using the Model for Validation......Page 340
  Generating the Elements from the Model......Page 344
 Creating Custom Form Validators......Page 345
  Applying a Custom Validator......Page 346
 Summary......Page 348
Chapter 15: Creating Attribute Directives......Page 349
 Preparing the Example Project......Page 350
 Creating a Simple Attribute Directive......Page 352
  Applying a Custom Directive......Page 353
  Reading Host Element Attributes......Page 355
   Using a Single Host Element Attribute......Page 357
  Creating Data-Bound Input Properties......Page 358
  Responding to Input Property Changes......Page 361
 Creating Custom Events......Page 363
  Binding to a Custom Event......Page 365
 Creating Host Element Bindings......Page 366
 Creating a Two-Way Binding on the Host Element......Page 367
 Exporting a Directive for Use in a Template Variable......Page 371
 Summary......Page 374
Chapter 16: Creating Structural Directives......Page 375
 Preparing the Example Project......Page 376
 Creating a Simple Structural Directive......Page 377
  Implementing the Structural Directive Class......Page 378
  Enabling the Structural Directive......Page 380
  Using the Concise Structural Directive Syntax......Page 382
 Creating Iterating Structural Directives......Page 383
  Providing Additional Context Data......Page 386
  Using the Concise Structure Syntax......Page 388
  Dealing with Property-Level Data Changes......Page 389
  Dealing with Collection-Level Data Changes......Page 391
   Keeping Track of Views......Page 397
 Querying the Host Element Content......Page 402
  Querying Multiple Content Children......Page 406
  Receiving Query Change Notifications......Page 408
 Summary......Page 409
Chapter 17: Understanding Components......Page 410
 Preparing the Example Project......Page 411
 Structuring an Application with Components......Page 412
  Creating New Components......Page 413
   Understanding the New Application Structure......Page 416
  Defining Templates......Page 417
   Defining External Templates......Page 418
   Using Data Bindings in Component Templates......Page 419
   Using Input Properties to Coordinate Between Components......Page 420
    Using Directives in a Child Component Template......Page 422
   Using Output Properties to Coordinate Between Components......Page 423
   Projecting Host Element Content......Page 425
 Using Component Styles......Page 428
  Defining External Component Styles......Page 430
   Setting View Encapsulation......Page 431
   Using the Shadow DOM CSS Selectors......Page 433
    Selecting the Host Element......Page 434
    Selecting the Host Element’s Ancestors......Page 435
    Pushing a Style into the Child Component’s Template......Page 437
 Querying Template Content......Page 439
 Summary......Page 442
Chapter 18: Using and Creating Pipes......Page 443
 Preparing the Example Project......Page 444
  Installing the Internationalization Polyfill......Page 446
 Understanding Pipes......Page 449
 Creating a Custom Pipe......Page 450
  Registering a Custom Pipe......Page 451
  Applying a Custom Pipe......Page 452
  Combining Pipes......Page 453
  Creating Impure Pipes......Page 454
 Using the Built-in Pipes......Page 458
  Formatting Numbers......Page 459
  Formatting Currency Values......Page 461
  Formatting Percentages......Page 464
  Formatting Dates......Page 466
  Changing String Case......Page 469
  Serializing Data as JSON......Page 470
  Slicing Data Arrays......Page 471
 Summary......Page 473
Chapter 19: Using Services......Page 474
 Preparing the Example Project......Page 475
  Demonstrating the Problem......Page 476
   Preparing the Service......Page 481
   Preparing the Dependent Components......Page 482
   Registering the Service......Page 484
   Reviewing the Dependency Injection Changes......Page 485
   Declaring a Dependency in a Pipe......Page 487
   Declaring Dependencies in Directives......Page 490
 Understanding the Test Isolation Problem......Page 493
   Preparing the Services......Page 494
   Registering the Services......Page 495
   Preparing the Dependent Component......Page 496
  Updating the Root Component and Template......Page 497
  Updating the Child Components......Page 498
 Summary......Page 500
Chapter 20: Using Service Providers......Page 501
 Preparing the Example Project......Page 502
 Using Service Providers......Page 504
  Using the Class Provider......Page 506
   Understanding the Token......Page 507
    Using Opaque Tokens......Page 509
   Understanding the useClass Property......Page 511
   Resolving a Dependency with Multiple Objects......Page 513
  Using the Value Provider......Page 514
  Using the Factory Provider......Page 516
  Using the Existing Service Provider......Page 519
 Using Local Providers......Page 520
  Understanding the Limitations of Single Service Objects......Page 521
  Creating Local Providers in a Directive......Page 522
  Creating Local Providers in a Component......Page 524
   Creating a Local Provider for All Children......Page 527
   Creating a Provider for View Children......Page 528
   Restricting the Provider Search......Page 529
   Skipping Self-Defined Providers......Page 530
 Summary......Page 531
Chapter 21: Using and Creating Modules......Page 532
 Preparing the Example Project......Page 533
 Understanding the Root Module......Page 535
  Understanding the Declarations Property......Page 537
  Understanding the Bootstrap Property......Page 538
 Creating Feature Modules......Page 540
  Creating a Model Module......Page 542
   Updating the Other Classes in the Application......Page 543
   Updating the Root Module......Page 545
   Creating the Module Folder and Moving the Files......Page 546
   Updating the Classes in the New Module......Page 547
   Creating the Module Definition......Page 548
    Understanding the Exports......Page 549
   Updating the Other Classes in the Application......Page 550
   Updating the Root Module......Page 551
   Updating the Template URLs......Page 552
   Creating the Module Definition......Page 554
   Updating the Root Module......Page 555
 Summary......Page 556
 Starting the Example Project......Page 557
 Adding and Configuring the Packages......Page 558
  Configuring the Development HTTP Server......Page 559
  Creating the Product Data Type......Page 560
  Creating the Data Source and Repository......Page 561
  Completing the Model Module......Page 562
  Creating the Table Component......Page 563
   Creating the Table Component Template......Page 564
  Creating the Form Component......Page 565
   Creating the Form Component Template......Page 566
  Completing the Core Module......Page 567
  Creating the Message Model and Service......Page 568
  Completing the Message Module......Page 569
  Creating the Angular Bootstrap......Page 570
  Creating the HTML Document......Page 571
 Running the Example Project......Page 572
 Summary......Page 573
Chapter 23: Using Reactive Extensions......Page 574
 Preparing the Example Project......Page 575
 Understanding the Problem......Page 576
 Solving the Problem with Reactive Extensions......Page 578
  Understanding Observables......Page 579
  Understanding Observers......Page 581
  Understanding Subjects......Page 582
 Using the Async Pipe......Page 583
  Using the Async Pipe with Custom Pipes......Page 584
 Scaling Up Application Feature Modules......Page 586
 Going Beyond the Basics......Page 589
  Filtering Events......Page 590
  Transforming Events......Page 591
   Using Different Event Objects......Page 593
  Receiving Only Distinct Events......Page 594
   Using a Custom Equality Checker......Page 595
  Taking and Skipping Events......Page 596
 Summary......Page 597
Chapter 24: Making Asynchronous HTTP Requests......Page 598
 Preparing the Example Project......Page 599
  Configuring the JavaScript Module Loader......Page 600
  Configuring the Model Feature Module......Page 601
  Running the Example Project......Page 602
 Understanding RESTful Web Services......Page 603
 Replacing the Static Data Source......Page 604
   Setting Up the HTTP Request......Page 605
   Processing the Response......Page 606
  Configuring the Data Source......Page 607
  Using the REST Data Source......Page 608
  Saving and Deleting Data......Page 610
 Consolidating HTTP Requests......Page 613
 Making Cross-Origin Requests......Page 615
  Using JSONP Requests......Page 616
 Configuring Request Headers......Page 618
 Handling Errors......Page 620
  Generating User-Ready Messages......Page 621
  Handling the Errors......Page 623
 Summary......Page 625
Chapter 25: Routing and Navigation: Part 1......Page 626
 Preparing the Example Project......Page 627
  Disabling the State Change Event Display......Page 629
 Getting Started with Routing......Page 631
  Creating a Routing Configuration......Page 632
  Updating the Root Module......Page 634
  Completing the Configuration......Page 635
  Adding Navigation Links......Page 636
  Understanding the Effect of Routing......Page 639
  Handling Route Changes in Components......Page 641
  Using Route Parameters......Page 644
   Using Multiple Route Parameters......Page 646
   Using Optional Route Parameters......Page 649
  Navigating in Code......Page 650
  Receiving Navigation Events......Page 653
  Removing the Event Bindings and Supporting Code......Page 655
 Summary......Page 658
 Preparing the Example Project......Page 659
  Adding Components to the Project......Page 662
  Using Wildcards in Routes......Page 666
  Using Redirections in Routes......Page 669
 Navigating Within a Component......Page 670
  Responding to Ongoing Routing Changes......Page 672
  Styling Links for Active Routes......Page 674
  Fixing the All Button......Page 677
 Creating Child Routes......Page 678
  Creating the Child Route Outlet......Page 680
  Accessing Parameters from Child Routes......Page 682
 Summary......Page 685
 Preparing the Example Project......Page 686
 Guarding Routes......Page 688
  Delaying Navigation with a Resolver......Page 689
   Creating a Resolver Service......Page 691
   Registering the Resolver Service......Page 692
   Displaying Placeholder Content......Page 693
   Using a Resolver to Prevent URL Entry Problems......Page 694
  Preventing Navigation with Guards......Page 696
   Preventing Route Activation......Page 697
   Consolidating Child Route Guards......Page 702
   Preventing Route Deactivation......Page 705
 Loading Feature Modules Dynamically......Page 710
  Creating a Simple Feature Module......Page 711
  Loading the Module Dynamically......Page 712
   Creating a Route to Dynamically Load a Module......Page 713
   Using a Dynamically Loaded Module......Page 714
  Guarding Dynamic Modules......Page 715
   Applying a Dynamic Loading Guard......Page 717
 Targeting Named Outlets......Page 718
  Creating Additional Outlet Elements......Page 719
  Navigating When Using Multiple Outlets......Page 721
 Summary......Page 723
Chapter 28: Using Animation......Page 724
  Adding the Animations Polyfill......Page 725
  Disabling the HTTP Delay......Page 727
  Simplifying the Table Template and Routing Configuration......Page 728
 Getting Started with Angular Animation......Page 730
   Defining Style Groups......Page 731
   Defining Element States......Page 732
   Defining State Transitions......Page 733
  Applying the Animation......Page 734
  Testing the Animation Effect......Page 737
 Understanding the Built-in Animation States......Page 739
  Creating Transitions for Built-in States......Page 740
   Animating Element Addition and Removal......Page 741
   Specifying a Timing Function......Page 742
   Specifying an Initial Delay......Page 743
   Using Additional Styles During Transition......Page 744
   Performing Parallel Animations......Page 746
 Understanding Animation Style Groups......Page 747
  Defining Common Styles in Reusable Groups......Page 748
  Using Element Transformations......Page 749
  Applying CSS Framework Styles......Page 751
 Understanding Animation Trigger Events......Page 753
 Summary......Page 756
Chapter 29: Angular Unit Testing......Page 757
 Preparing the Example Project......Page 759
  Adding the Testing Packages......Page 760
   Configuring Karma......Page 761
  Starting the Tools......Page 763
 Working with Jasmine......Page 765
  Working with the TestBed Class......Page 767
   Configuring the Test Bed for Dependencies......Page 769
  Testing Data Bindings......Page 771
  Testing a Component with an External Template......Page 774
  Testing Component Events......Page 776
  Testing Output Properties......Page 778
  Testing Input Properties......Page 780
  Testing with Asynchronous Operations......Page 782
 Testing an Angular Directive......Page 784
 Summary......Page 786
Erratum......Page 787
Index......Page 788