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