451 Angular CLI, 77, 412 Component, 89 Detection, 398–399 Http Client, 320–321 Module System, 119 Deployment, 130 Ex100

Index

A AngularJS vs. Angular Angular JavaScript using JavaScript CLI, 77, 412 engines, 18 component, 89 platform, 17 detection, 398–399 semantic versioning, 16–17 Http client, 320–321 shims and polyfills, 18 module system, 119 controllers and components, 22 deployment, 130 dependency and constructor ex100, 123–126, 128–129 injection, 22–23 feature module, 122–123 forms, 24 Node commands, 131 modules, 21 root module, 121 module system, 116 routing module, 122 scope, controllers, and components, 24 shared module, 123 templates, 25 Start project, 120–121 Annotations, 91 pipes app.component.spec.ts, 412 combining date formats, 388 Application component, 89 currency, 386 Asynchronous data streams date, 386 event-based reactive programs, 291 json, 388 observable sequences, 292 lowercase, 385 observers, 292–294 percentage, 386 operators predefined date formats, 387 buffer, 300 shortdate, 386 debounce, 302–303 UK pound currency, 386 distinct, 304 uppercase, 385 filter, 304 variety of, 388, 390 from, 298 uses observables, 310 interval, 298

451 © Mark Clow 2018 M. Clow, Angular 5 Projects, https://doi.org/10.1007/978-1-4842-3279-8 Index

Asynchronous data streams (cont.) Command line interface (CLI) map, 301 bootstrapping, 84–85 of (Was just), 299 compilation, 86 range, 299 compile errors, 82 repeat, 299 creating project, 78–79 scan, 301 file watcher and web server, 84 share, 306–307 modifying project, 81 take, 305 options, 85 timer, 300 root folder, 80 subscription, 295 runtime errors, 82 Asynchronous JavaScript and XML (AJAX) source code, 80 callbacks, 6 Component(s) encoding, 7–8 child, 159–160 HAL and HATEOAS, 8–10 class, 97 JSON and XML, 5 class life cycle promises, 6 constructor vs. OnInit, 188 interfaces, 189 ngAfterContentChecked, 201–203 B ngAfterContentInit, 197–201 Bootstrap, 84–85, 240 ngAfterViewChecked, 205–207 installing ng-bootstrap, 241 ngAfterViewInit, 203–205 Material Design, 244 ngDoCheck, 194–197 installing Angular, 245–246 ngOnChanges, 189–192 widgets-ex200, 246–249 ngOnDestroy, 207–209 web page, 240 ngOnInit, 192–194 widgets-ex100, 241, 243–244 @Component annotation Bounded contexts, 122 elements, 92–93 Browser UI thread, 397 selectors and DSL, 93 selector syntax, 93 C composition, 166–167, 169–170 data flowing downwards, 160–162 Callbacks, 6 customer component, Change detection, 398–399 editing, 171–172 Class providers, 226–227 customer list component, Client/server architecture editing, 172–173 client-side web applications, 3–5 emitting output through server-side web applications, 2 @Output(), 163–166

452 Index

events flowing upwards, 163 types, 213 customer component, editing, 174 value, 232, 234 customer list component, services, 212 editing, 174–175 convert app to share one hierarchy, 159 instance, 219–220, 222–225 inline style, 90 creating, 213–215, 217–218 inline template, 90 implementations, 212 multiple, 91 Directives, 139 styles, 96–97 creating template reference variable (see components, 151 Template reference variables) DOM element, 152 templates simple directive, 152–153 Elvis operator, 96 DOM events, 154 location, 94 DOM properties, 155 script tags, 95–96 non-structural (see Non-structural Components Development directives) Kit (CDK), 113 structural (see Structural directives) Composition, 159, 166–167, 169–170 with events, 155, 157 Continual integration, 405 Document Object Model (DOM), 310–311 Domain-driven design (DDD), 122 D Domain Specific Language (DSL), 253 Data binding, 16 customer data input, 99 E defined, 98 ECMA 2016, 18 in login component, 98 Elvis operator, 96 one-way (see One-way data binding) Encapsulation target markup, 103 Shadow DOM, 437–438 two-way (see Two-way data binding) styles/styleUrls properties, 444 Decorators, see Annotations view, 437 Dependency, 211 ViewEncapsulation.Emulated, 438–439 Dependency injection ViewEncapsulation.Native, 440–442 advantages, 211 ViewEncapsulation.None, 442–443 defined, 211 Event handling, components-ex400, Injector API, 234–235 111–113 providers, 213 Event loop and messages, 396 class, 226–227 Extensible Markup Language (XML), 5 factory, 227–232 Extensions pane, 66–67

453 Index F GET method, 315, 323, 325, 327 path parameters, 331–332, 334–335 Factory providers parameters, 327, 329, 331 dependency-injection-ex400, $http and Http module, 312 227–230 matrix parameters, 318 dependency-injection-ex500, modifying, server response, 340–342, 344 230–232 passing data, request body, 318 Forms PATCH method, 339 and CSS, 354 path parameters, 318 custom validation, 381, 384 POST method, 315, 335, 337–338 FormBuilder methods, 372 PUT method, 339 group nesting, 373–374, 377–379 query parameters, 317 model objects, 352–354 request headers, 316 multiple validators, 380 request options, 322 reactive, 368–371 RequestOptionsArgs object, 327 reactive forms, 352 response headers, 316 template, 354–355, 357–358, REST application, 318 364–365, 367–368 server error response, 344–345, 347 template-driven, 351 template variables and data binding, 358–359, 361, 363–364 I validators, 379 Imperative navigation, 278–280, 282 Fragments Injection, 211 identifier, 251 Injector API, 234–235 URL, 251 Integration testing, 407 Interface G Debug pane, 64–65 Generics, 321 Explorer pane, 62–63 GitHub, 448 Git pane, 64 Search pane, 63 Interpolation, 100 H Hashed, 252 HyperText Transfer Protocol (HTTP) J asynchronous operations, 322 Jasmine, 408–411 asynchronous pipes, 347–348, 350 JavaScript ES5 DELETE method, 340 delete variables/objects, 31 generics, 321 duplication, 32

454 Index fail fast behavior, 28 M invocation, 31 Model View Controller (MVC), 395 JavaScript strict mode, 31 Modules, 21 keywords, 33 AngularJS module system, 116 non-extensible variables/ Angular module system, 119 objects, 33 deployment, 130 read only properties, 32 ex100, 123–126, 128–129 scoping, 30 feature module, 122–123 types, 27–28 Node commands, 131 unassigned variable/object, 31 root module, 121 value/object comparison, 28–30 routing module, 122 variables, 30 shared module, 123 JavaScript ES6 Start project, 120–121 arrow functions, 35 defined, 115 block scoped variables and exports, 115 functions, 34–35 JavaScript constants, 34 exporting code, 117 default exports, 39 importing code, 118–119 functions arguments, default types, 115 values, 36 Moustaches, 100 modules, 37 named exports, 38–39 one file, 38 N parameters, 36 Navigation, 278–279 string interpolation, 37 Nested routing TypeScript, 39 defined, 259 JavaScript modules pasta/calzone, 260 exporting code, 117 router-ex100 URLs vs. router-ex200 importing code, 118 URLs, 260 project code, 118–119 router-ex200, 261–262, 264–265, 267–268 from someone else’s @NgModule annotation, 120 module, 118 Node JavaScript Object Notation dependency management, 69 (JSON), 5, 11, 13, 319 package.json file folder node_modules, 75 K, L and running npm install, 75 updating, 74 Karma test runner, 407–408 version numbers, 74–75 455 Index

Node (cont.) predefined date formats, 387 setting up and running shortdate, 386 module installation levels, 72 UK pound currency, 386 npm, 71 uppercase, 385 npm install to install module, 72 variety of, 388, 390 uninstalling modules, 73 custom, 391, 393 updating modules, 73 Promise objects, 309–310 V8 JavaScript engine code, 69 website, 69–70 Node Package Manager (npm), 71 R Non-structural directives, 140 Resources ngClass, 146–148 Angular Air, 449 ngStyle, 148–150 Angular–related blogs, 448 GitHub, 448 official Angular website, 447 O Router Observables on client side, 251–252 advantages, 310 configuration, 268–269 DOM events, 310–311 DSL, 253 Http services, 312 extracting data, 283 One-way data binding, 99 guards, 284, 286–287, 289 components-ex100, 100, 102 imperative navigation, 278–280, 282 components-ex200, 103–105 matching, 252 components-ex250, 105, 107–108 module, 253–254 with {{ and }}, 100 path parameters, 270 with [ and ] or *, 102 pizza selection example, 255, 258–259 OnInit lifecycle method, 188 query parameters, 270

P, Q S Pipes Selectors, 151 angular Server-side web applications, 2 combining date formats, 388 Shadowing, 213 currency, 386 Structural directives, 140 date, 386 ngFor, 142–143 json, 388 ngIf, 140–142 lowercase, 385 ngSwitch, ngSwitchWhen, and percentage, 386 ngSwitchDefault, 144–145

456 Index T ECMA5 JavaScript, 42 enumerations and generics, 48 Template expression, 100 functions, 49–51 Template reference variables getters and setters, 51 ContentChild, 182–184 interfaces, 44, 46 ContentChildren, 185–188 language NgContent and transclusion, 180–182 Angular CLI tool, 21 ViewChild, 176–177 debugging and map files, 20 ViewChildren, 177–178 transpilation, 19–21 Test-driven development, 405 Microsoft’s website, 41 Testing modules Angular application, 407 external, 47 Angular objects, 413 internal, 46 CLI Unit Test, 416–417, 419 types ComponentFixture, 414 alias, 54 ComponentInstance, 414 object, 53 component, uses service, 430–434 primitive, 52–53 development process, 406 syntax error highlighting, 52 Http responses, 419–422, tuple, 54 424–426, 429 union, 53 integration testing, 407 Jasmine, 408–411 Karma, 407–408 U NativeElement, 414–415 UI widgets Transclusion, 180–182 Bootstrap Transpilation installing ng-bootstrap, 241 and Angular CLI tool, 21 Material Design, 244–249 TypeScript class, 19–20 Web page, 240 Transpiler, 19 widgets-ex100, 241, 243–244 Two-way data binding, 99 pre-Angular way, 237–239 components-ex300, 108–110 Unit testing, 405 with [( and )], 108 TypeScript basic types, 43 V classes, 43–44 Value providers, 232, 234 compilation options, 54 Visual Studio Code constructors, 48 Download page, 57–58 definition, 41 Extensions pane, 66–67

457 Index

Visual Studio Code (cont.) client-side, 3 interface, 62 JSON, 11, 13 Debug pane, 64–65 server-side, 2 Explorer pane, 62–63 striking balance, 4–5 Git pane, 64 Webpack Search pane, 63 and Angular CLI, 133 seeing files, commands, and installing and configuring, 135–136 hot keys, 58–59 modules and dependencies, 134–135 starting a build, 60–61 static assets, 134

W, X, Y Z Web applications Zone.js, 395 with AJAX, 5 Zones detection callbacks, 6 angular zone, 399–402 encoding, 7–8 event loop and messages, 396 HAL and HATEOAS, 8–10 monkey patching, 397 promises, 6 NgZone class, 396

458