Building Large-Scale Web Applications with Angular

Table of contents

1. Title Page
2. Copyright
   1. Building Large-Scale Web Applications with Angular
3. Contributors
   1. About the authors
   2. About the reviewer
   3. Packt is searching for authors like you
4. About Packt
   1. Why subscribe?
   2. PacktPub.com
5. Preface
   1. Who this book is for
   2. What this book covers
   3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
   4. Get in touch
      1. Reviews
6. Building Our First App - 7 Minute Workout
   1. What is 7 Minute Workout?
   2. Downloading the code base
   3. Setting up the build
      1. Angular CLI
         1. Code transpiling
   4. Organizing code
      1. Feature folders
   5. The 7 Minute Workout model
   6. First feature module
   7. App bootstrapping
   8. Exploring Angular modules
      1. Comprehending Angular modules
   9. Our first component - WorkoutRunnerComponent
      1. Component lifecycle hooks
   10. Building the 7 Minute Workout view
       1. The Angular binding infrastructure
       2. Interpolations
       3. Property binding
          1. Property versus attribute
          2. Property binding continued...
             1. Interpolation syntactic sugar over property binding
             2. Quick expression evaluation
             3. Side effect-free binding expressions
          3. Angular directives
          4. Target selection for binding
       4. Attribute binding
       5. Style and class binding
       6. Attribute directives
       7. Styling HTML with ngClass and ngStyle
   11. Learning more about an exercise
       1. Adding descriptions and video panels
          1. Component with inputs
          2. Structural directives
          3. The ever-so-useful NgForOf
             1. Asterisk (*) in structural directives
             2. NgForOf performance
          4. Angular security
             1. Trusting safe content
          5. OnChange life cycle event
       2. Formatting exercise steps with innerHTML binding
       3. Displaying the remaining workout duration using pipes
       4. Angular pipes
          1. Pipe chaining
       5. Implementing a custom pipe - SecondsToTimePipe
       6. Adding the next exercise indicator using ngIf
       7. Pausing an exercise
       8. The Angular event binding infrastructure
          1. Event bubbling
          2. Event binding an $event object
       9. Two-way binding with ngModel
   12. Cross-component communication using Angular events
       1. Tracking exercise progress with audio
       2. Building Angular directives to wrap HTML audio
       3. Creating WorkoutAudioComponent for audio support
          1. Understanding template reference variables
          2. Template variable assignment
          3. Using the @ViewChild decorator
          4. The @ViewChildren decorator
       4. Integrating WorkoutAudioComponent
          1. Exposing WorkoutRunnerComponent events
          2. The @Output decorator
          3. Eventing with EventEmitter
          4. Raising events from WorkoutRunnerComponent
          5. Component communication patterns
          6. Injecting a parent component into a child component
             1. Using component life cycle events
          7. Sibling component interaction using events and template variables
   13. Summary
7. Personal Trainer
   1. Personal Trainer requirements
   2. Getting started with the code for Personal Trainer
   3. Using the Personal Trainer model in Workout Builder services
   4. The Personal Trainer layout
   5. Personal Trainer navigation with routes
      1. Getting started with Personal Trainer navigation
      2. Introducing child routes to Workout Builder
      3. Adding the child routing component
      4. Updating the WorkoutBuilder component
      5. Updating the Workout Builder module
      6. Updating App Routing module
      7. Putting it all together
      8. Lazy loading of routes
      9. Integrating sub- and side-level navigation
         1. Sub-level navigation
         2. Side navigation
   6. Implementing workout and exercise lists
      1. WorkoutService as a workout and exercise repository
      2. Workout and exercise list components
      3. Workout and exercise list views
         1. Workouts list views
         2. Exercises list views
   7. Building a workout
      1. Finishing left nav
      2. Adding WorkoutBuilderService
      3. Adding exercises using ExerciseNav
      4. Implementing the Workout component
      5. Route parameters
      6. Route guards
         1. Implementing the resolve route guard
      7. Implementing the Workout component continued...
      8. Implementing the Workout template
   8. Angular forms
      1. Template-driven and reactive forms
      2. Template-driven forms
      3. Getting started
         1. Using NgForm
         2. ngModel
            1. Using ngModel with input and textarea
         3. Using ngModel with select
      4. Angular validation
      5. ngModel
         1. The Angular model state
         2. Angular CSS classes
      6. Workout validation
         1. Displaying appropriate validation messages
         2. Adding more validation
         3. Managing multiple validation messages
            1. Custom validation messages for an exercise
      7. Saving the workout
         1. More on NgForm
         2. Fixing the saving of forms and validation messages
      8. Reactive forms
         1. Getting started with reactive forms
         2. Using the FormBuilder API
         3. Adding the form model to our HTML view
         4. Adding form controls to our form inputs
         5. Adding validation
         6. Adding dynamic form controls
         7. Saving the form
         8. Custom validators
         9. Integrating a custom validator into our forms
      9. Configuration options for running validation
   9. Summary
8. Supporting Server Data Persistence
   1. Angular and server interactions
      1. Setting up the persistence store
      2. Seeding the database
   2. The basics of the HTTPClient module
   3. Personal Trainer and server integration
      1. Loading exercise and workout data
      2. Loading exercise and workout lists from a server
         1. Adding the HTTPClient module and RxJS to our project
         2. Updating workout-service to use the HTTPClient module and RxJS
         3. Modifying getWorkouts() to use the HTTPClient module
      3. Updating the workout/exercise list pages
      4. Mapping server data to application models
      5. Loading exercise and workout data from the server
      6. Fixing the builder services
      7. Updating the resolvers
      8. Fixing the Workout and Exercise components
   4. Performing CRUD on exercises/workouts
      1. Creating a new workout
      2. Updating a workout
      3. Deleting a workout
      4. Fixing the upstream code
   5. Using promises for HTTP requests
   6. The async pipe
   7. Cross-domain access and Angular
      1. Using JSONP to make cross-domain requests
      2. Cross-origin resource sharing
   8. Handling workouts not found
   9. Fixing the 7 Minute Workout app
   10. Summary
9. Angular Directives in Depth
   1. Building a remote validator directive
      1. Validating workout names using async validators
   2. Building a busy indicator directive
      1. Injecting optional dependencies with the @Optional decorator
      2. Implementation one – using renderer
      3. Angular renderer, the translation layer
      4. Host binding in directives
         1. Property binding using @HostBinding
         2. Attribute binding
         3. Event binding
      5. Implementation two - BusyIndicatorDirective with host bindings
   3. Directive injection
      1. Injecting directives defined on the same element
      2. Injecting directive dependency from the parent
      3. Injecting a child directive (or directives)
      4. Injecting descendant directive(s)
   4. Building an Ajax button component
      1. Transcluding external components/elements into a component
         1. Content children and view children
         2. Injecting view children using @ViewChild and @ViewChildren
         3. Tracking injected dependencies with QueryList
         4. Injecting content children using @ContentChild and @ContentChildren
   5. Dependency injection using viewProvider
   6. Understanding structural directives
      1. TemplateRef
      2. ViewContainerRef
   7. Component styling and view encapsulation
      1. Overview of Shadow DOM
      2. Shadow DOM and Angular components
   8. Summary
10. 1.21 Gigawatt - Flux Pattern Explained
    1. Core concepts overview
    2. A uniform data flow
       1. Action – capture the intent
       2. Dispatcher – the spider in the web
          1. Listening to the dispatcher
       3. The store – managing state, data retrieval, and callbacks
       4. The view
    3. Demoing a uniform data flow
       1. Creating a selection view
       2. Adding the dispatcher
       3. Adding the store
       4. Adding a selected view
       5. Running the demo
    4. Adding more actions to our flow
       1. Cleaning up the view
       2. Cleaning up the store
          1. Adding EventEmitter
          2. Adding to and cleaning up the register method
       3. Further improvements
          1. Adding immutability
          2. Summarizing
    5. Adding AJAX calls
    6. An even bigger solution
    7. Summary
11. Functional Reactive Programming
    1. Recursion
       1. No more loops
       2. Reoccurring pattern
          1. Summarise
          2. Count
          3. Width
    2. Asynchronous data streams
    3. Comparing lists to async streams – preparing for RxJS
       1. Combining the functional programming paradigm with streams
          1. Projection
          2. Filtering
          3. Combining mindsets
    4. Summary
12. Manipulating Streams and Their Values
    1. Starting out
       1. Understanding operators
    2. Stream in a stream
    3. AJAX
       1. fetch()
       2. ajax() operator
       3. Cascading calls
    4. A deeper look
       1. Creation operators
          1. of() operator
          2. from() operator
          3. range() operator
          4. fromEvent() operator
       2. Combination
          1. merge() operator
          2. combineLatest()
          3. zip()
          4. concat()
       3. Mathematical
          1. max
          2. min
          3. sum
       4. Time
          1. interval() operator
          2. timer() operator
          3. delay() operator
          4. sampleTime() operator
          5. debounceTime() operator
       5. Grouping
          1. buffer() operator
          2. bufferTime() operator
    5. Thinking in streams
    6. Summary
13. RxJS Advanced
    1. Hot, cold, and warm Observables
       1. Making a stream hot
       2. Warm streams
    2. Subjects
       1. Using Subject for cascading lists
       2. BehaviorSubject
       3. ReplaySubject
       4. AsyncSubject
    3. Error handling
       1. Catch and continue
       2. Ignoring the error 
       3. Retry
       4. Advanced Retry
    4. Marble testing
       1. Set up
       2. Writing your first marble test
       3. Fleshing out with more tests
    5. Pipeable operators
       1. Creating reusable operators with let()
       2. Shifting to pipeable operators
    6. Summary
14. Create a Local Weather Web Application
    1. Planning a feature road map using Waffle
       1. Setting up a Waffle project
       2. Creating issues for your Local Weather app
    2. Crafting UI elements using components and interfaces
       1. Adding an Angular component
       2. Define your model using interfaces
    3. Using Angular Services and HttpClient to retrieve data
       1. Creating a new Angular Service
       2. Inject dependencies
       3. Discover OpenWeatherMap APIs
       4. Storing environment variables
       5. Implementing an HTTP GET operation
       6. Retrieving service data from a component
    4. Transform data using RxJS
       1. Understanding Reactive programming
       2. Implementing Reactive transformations
    5. Summary
15. Prepare Angular App for Production Release
    1. Null guarding in Angular
       1. Property initialization
       2. Safe navigation operator
       3. Null guarding with *ngIf
    2. Containerizing the app using Docker
       1. Installing Docker
       2. Setting up Docker scripts
       3. Docker extension in VS Code
       4. NPM Scripts in VS Code
    3. Deploying containerized app
       1. Zeit Now
       2. Configuring the Now CLI tool
       3. Deploying
    4. Summary
16. Enhance Angular App with Angular Material
    1. Adding Material Components to your app
       1. Angular Material schematics
       2. Modifying landing page with Material Toolbar
       3. Representing weather in Material Card
          1. Accessibility
          2. Card header and content
          3. Material typography
             1. Applying typography
          4. Updating the tagline as center-aligned caption
          5. Updating Current Weather card layout
             1. Implementing Layout Scaffolding
          6. Aligning elements
          7. Styling elements
             1. Fine-tuning styles
          8. Tweaking to match design
    2. Updating unit tests
    3. Updating Angular Material
       1. Updating Angular Material
    4. Summary
17. Create a Router-First Line-of-Business App
    1. Angular cheat sheet
       1. Binding
       2. Built-in directives
       3. Common pipes
       4. Starter commands, major components, and CLI scaffolds
          1. Configure Angular CLI autocomplete
    2. Router-first architecture
    3. Creating LemonMart
       1. Creating a Router-first app
       2. Configuring Angular.json and Package.json
       3. Configuring Material and Styles
    4. Designing LemonMart
       1. Identifying user roles
       2. Identifying high-level modules with site map
    5. Generating router-enabled modules
    6. Designing the home route
       1. Setting up default routes
       2. RouterLink
       3. Router outlet
    7. Branding, Custom, and Material Icons
       1. Branding
          1. Color palette
          2. Implementing browser manifest and icons
       2. Custom icons
       3. Material icons
    8. Angular Augury
       1. Component Tree
          1. Break point debugging
       2. Router Tree
       3. NgModules
    9. Submodules with lazy loading
       1. Configuring submodules with components and routes
       2. Eager loading
       3. Lazy loading
    10. Completing the walking skeleton
        1. Manager module
        2. User module
        3. POS and inventory modules
           1. POS module
           2. Inventory module
        4. Inspect router tree
    11. Common Testing Module
    12. Summary
18. Continuous Integration and API Design
    1. Continuous Integration
       1. Containerizing build environment
          1. Builder
             1. Debugging build environment
          2. Tester
             1. Configuring a headless browser for Angular
             2. Configuring testing environment
          3. Web server
       2. CircleCI
       3. Code coverage report
    2. API design
       1. Designing around major data components
          1. Defining entities
       2. Swagger
          1. Defining a Swagger YAML file
          2. Creating a Swagger server
             1. OpenAPI 3.0 with unofficial tooling
             2. Swagger 2.0 with official tooling
             3. Enable Cross-Origin Resource Sharing (CORS)
          3. Verifying and publishing Swagger server
    3. Summary
19. Design Authentication and Authorization
    1. Wrapping up mock-ups
    2. Design authentication and authorization workflow
       1. Add auth service
          1. Implement a basic authentication service
          2. Implementing the login component
       2. Conditional navigation
       3. Common validations
    3. UI service
       1. Caching with cookie and localStorage
       2. JSON Web Token life cycle
       3. HTTP interceptor
       4. Side navigation
       5. Log out
    4. Role-based routing after login
       1. Router Guards
       2. Auth Guard
    5. Auth Service Fake and Common Testing Providers
    6. Summary
20. Angular App Design and Recipes
    1. User class and object-oriented programming
    2. Reusing components
    3. User profile with multi-step auth-enabled responsive forms
       1. Form groups
       2. Stepper and responsive layout
       3. Calculated properties and DatePicker
       4. Type ahead support
       5. Dynamic form arrays
       6. ViewUser component
       7. Review component and Save form
    4. Resolve guard
    5. Reusable component with binding and route data
    6. Master/detail view auxiliary routes
    7. Data table with pagination
    8. Updating Unit Tests
    9. Summary
21. Highly-Available Cloud Infrastructure on AWS
    1. Right-sizing infrastructure
       1. Optimizing instance
       2. Simple load testing
    2. Deploy to AWS ECS Fargate
       1. Configuring ECS Fargate
          1. Creating a Fargate Cluster
          2. Creating container repository
          3. Creating task definition
          4. Creating elastic load balancer
          5. Creating cluster service
          6. Configuring the DNS
             1. Getting the DNS Name
       2. Prep Angular app
       3. Adding npm Scripts for AWS
       4. Publish
    3. Summary
22. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think