Expert Angular

Description

Cover ......Page 1 Copyright ......Page 3 Credits......Page 4 About the Authors......Page 5 About the Reviewers......Page 8 www.PacktPub.com......Page 9 Customer Feedback......Page 10 Table of Contents......Page 11 Preface......Page 19 Chapter 1: Architectural Overview and Building a Simple App in Angular ......Page 25 Angular architecture......Page 26 NgModules......Page 27 Components......Page 28 Metadata......Page 29 Data Binding......Page 30 Directives......Page 31 Services......Page 33 Dependency Injection......Page 34 Basics of TypeScript......Page 36 String......Page 37 Any......Page 38 Interfaces......Page 39 Optional properties using an interface......Page 40 Function type interfaces......Page 41 Class type interfaces......Page 42 Inheritance......Page 43 Inheritance in TypeScript......Page 45 Private and public modifiers......Page 46 Static properties......Page 47 Namespaces......Page 48 Functions......Page 49 Optional and default parameters......Page 50 Generics......Page 51 Generic classes......Page 52 Class decorators......Page 53 Method decorators......Page 54 Accessor decorators......Page 55 Property decorators......Page 56 Parameter decorators......Page 57 Building a simple application......Page 58 Summary......Page 63 Migration process......Page 64 Filters and pipes in templates......Page 65 Angular app directives......Page 66 Handling the CSS classes......Page 67 Controllers and components in templates......Page 68 Strategies to upgrade to Angular......Page 69 Rules for incremental upgrade to Angular......Page 70 Components migration......Page 71 Installing Angular packages......Page 72 Creating the AppModule......Page 73 Bootstrapping your application......Page 74 Upgrading application services......Page 75 Upgrading your application component......Page 77 Adding the Angular router......Page 78 Summary......Page 80 Chapter 3: Using Angular CLI to Generate Angular Apps with Best Practices ......Page 81 Installing and setting up Angular CLI......Page 82 Generating code for a new application......Page 83 Generating components and routes......Page 84 Generating services......Page 86 Generating directives and pipes......Page 88 Pipes......Page 89 Running tests for your application......Page 90 Updating Angular CLI......Page 91 Summary......Page 92 Components 101......Page 93 A basic root component......Page 94 Defining child components......Page 96 Component life cycle......Page 100 Referencing child components from a parent component......Page 104 Template reference variables......Page 106 Using services with components......Page 107 Summary......Page 110 Chapter 5: Implementing Angular Routing and Navigation ......Page 111 Importing and configuring the router......Page 112 Building blocks of router......Page 114 About router LocationStrategy......Page 116 Handling the error state - wildcard route......Page 117 Route Guards......Page 119 Custom component routes and child routes......Page 122 Custom component routes with inner child routes......Page 128 Integrating all the components together......Page 133 Demo application routing and navigation......Page 136 Summary......Page 142 Angular Directives......Page 143 Component Directives......Page 145 Structural Directives......Page 146 ngFor directive......Page 147 ngIf directive......Page 148 ngSwitch directive......Page 150 Attribute Directives......Page 151 Built-in Attribute Directives......Page 152 Creating custom directives - Structural and Attribute Directives......Page 154 Angular CLI - generating the directives......Page 155 Creating custom Attribute Directives......Page 156 Creating custom Structural Directives......Page 161 Implementing change detection in Angular......Page 165 Change detection - Angular and ZoneJS......Page 167 ChangeDetectionStrategy - Default......Page 168 Advantages of ChangeDetectionStrategy - OnPush......Page 169 Summary......Page 173 Chapter 7: Asynchronous Programming Using Observables ......Page 174 TypeScript Observable......Page 175 TypeScript Observable with parameters......Page 178 Observing HTTP responses......Page 179 Implementation......Page 181 Understanding the implementation......Page 184 Promises......Page 195 Summary......Page 201 Chapter 8: Template and Data Binding Syntax ......Page 202 Learning about Template Syntax......Page 203 Using inline Template Syntax......Page 204 Interpolation in templates......Page 205 Template expressions in Angular......Page 206 Attaching events to views in templates......Page 208 Implementing directives inside templates......Page 210 Bindings in the template......Page 212 One-way Data Binding - Data source to view......Page 215 One-way Data Binding - View template to data source......Page 218 Angular Two-way Data Binding......Page 219 Summary......Page 221 Getting started......Page 222 Reactive forms......Page 225 Using FormBuilder......Page 231 Adding validations......Page 233 Custom validation......Page 240 Two-way Data Binding with ngModel......Page 244 Keeping things neat (extra credit)......Page 247 Summary......Page 251 Chapter 10: Material Design in Angular ......Page 252 Installing the package......Page 253 Responsive layout......Page 255 Material icons......Page 257 Buttons......Page 260 Menu......Page 261 Toolbars......Page 263 Dialogs......Page 264 Side navigation drawers......Page 266 Theming......Page 268 Summary......Page 270 Chapter 11 : Implementing Angular Pipes......Page 271 Defining a pipe......Page 272 Built-in Pipes......Page 273 DatePipe......Page 274 DecimalPipe......Page 276 CurrencyPipe......Page 277 LowerCasePipe and UpperCasePipe......Page 279 JSON Pipe......Page 281 SlicePipe......Page 283 async Pipe......Page 284 Parameterizing pipes......Page 285 Chaining pipes......Page 287 Creating custom pipes......Page 288 Pure Pipes......Page 290 Impure Pipes......Page 291 Summary......Page 292 Why use a service or factory?......Page 293 Creating a service......Page 295 Implementing services......Page 299 Consuming the service......Page 304 Creating an asynchronous service......Page 305 Using a Promise in a service......Page 306 Summary......Page 307 Applications without Dependency Injection......Page 309 Dependency Injection - Introduction......Page 310 Understanding provider classes......Page 312 Overview - Hierarchical components and DI......Page 316 Registering providers......Page 317 Registering providers inside the component......Page 319 Provider classes with dependencies......Page 322 Using @Inject, provide, and useValue......Page 326 Summary......Page 330 Introduction to Angular animations......Page 331 Installing the Angular animations library......Page 332 Angular animation - Specific functions......Page 333 Trigger......Page 334 Transitions......Page 335 Animating page transitions......Page 336 One more example - Angular animations......Page 338 Using keyframes - Sequence of styles......Page 340 Animate collapse menu......Page 343 Summary......Page 347 Chapter 15: Integrating Bootstrap with Angular Application ......Page 348 Installing Bootstrap......Page 349 Understanding the grid system......Page 353 Accordion......Page 357 Alert......Page 362 Datepicker......Page 363 Tooltip......Page 367 Progress bar......Page 368 Rating......Page 369 Summary......Page 370 Chapter 16: Testing Angular Apps Using Jasmine and Protractor Frameworks ......Page 371 Understanding and setting up Angular CLI for testing......Page 372 Introduction to Jasmine framework......Page 373 Commonly used methods in Jasmine......Page 374 Testing Angular components with Jasmine......Page 375 Testing Angular components with Jasmine......Page 377 TestBed......Page 381 Example - Writing test scripts with change detection......Page 382 Testing Angular services......Page 385 Testing Angular services - Mocking backend services......Page 388 Introduction to Protractor framework......Page 394 Protractor and DOM......Page 395 Some methods available to select element(s)......Page 396 Exploring the Protractor API......Page 398 Protractor - First steps......Page 399 Writing E2E tests using Protractor......Page 401 Writing E2E tests using Protractor - Advanced......Page 403 Summary......Page 408 Chapter 17: Design Patterns in Angular ......Page 409 MVC at large......Page 410 MVC limitations for the frontend......Page 415 Angular is MVC......Page 416 Singleton and Dependency Injection......Page 426 Prototype and reusable pool......Page 431 Factory pattern......Page 434 Memento pattern......Page 436 Summary......Page 438 Index......Page 440