Building Large-Scale Web Applications with Angular
Your one-stop guide to building scalable and production-grade Angular web apps
1st Edition
Published on 21. December 2018
698 pages
978-1-78995-832-4 (ISBN)
Description
A definitive guide on frontend development with Angular from design to deploymentKey FeaturesDevelop web applications from scratch using Angular and TypeScriptExplore reactive programming principles and RxJS to develop and test apps easilyStudy continuous integration and deployment on the AWS cloudBook DescriptionIf you have been burnt by unreliable JavaScript frameworks before, you will be amazed by the maturity of the Angular platform. Angular enables you to build fast, efficient, and real-world web apps. In this Learning Path, you'll learn Angular and to deliver high-quality and production-grade Angular apps from design to deployment. You will begin by creating a simple fitness app, using the building blocks of Angular, and make your final app, Personal Trainer, by morphing the workout app into a full-fledged personal workout builder and runner with an advanced directive building - the most fundamental and powerful feature of Angular. You will learn the different ways of architecting Angular applications using RxJS, and some of the patterns that are involved in it. Later you'll be introduced to the router-first architecture, a seven-step approach to designing and developing mid-to-large line-of-business apps, along with popular recipes. By the end of this book, you will be familiar with the scope of web development using Angular, Swagger, and Docker, learning patterns and practices to be successful as an individual developer on the web or as a team in the Enterprise. This Learning Path includes content from the following Packt products: Angular 6 by Example by Chandermani Arora, Kevin HennessyArchitecting Angular Applications with Redux, RxJS, and NgRx by Christoffer NoringAngular 6 for Enterprise-Ready Web Applications by Doguhan UlucaWhat you will learnDevelop web applications from scratch using Angular and TypeScriptExplore reactive programming principles, RxJS to develop and test apps efficientlyStudy continuous integration and deployment your Angular app on the AWS cloudWho this book is forIf you're a JavaScript or frontend developer looking to gain comprehensive experience of using Angular for end-to-end enterprise-ready applications, this Learning Path is for you.
More details
Other editions
Additional editions
Chandermani Arora | Kevin Hennessy | Christoffer Noring
Building Large-Scale Web Applications with Angular
Your one-stop guide to building scalable and production-grade Angular web apps
Book
12/2018
Packt Publishing
€60.30
Shipment within 3-4 weeks
Content
- 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
