Angular 6 for enterprise-ready web applications deliver production-ready and cloud-scale Angular web apps
A hands-on guide with a minimalist and flexible approach that enables quick learning and rapid delivery of cloud-ready enterprise applications with Angular 6 About This Book Explore tools and techniques to push your web app to the next level Master Angular app design and architectural considerations...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham :
Packt
2018.
|
| Edición: | 1st edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009631729106719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Packt Upsell
- Contributors
- Table of Contents
- Preface
- Chapter 1: Setting Up Your Development Environment
- CLI package managers
- Install Chocolatey for Windows
- Installing Homebrew for macOS
- Git and GitHub Desktop
- Why use GitHub?
- Why use GitHub Desktop?
- Installing Git and GitHub Desktop
- Node.js
- Existing Node.js Installation
- Installing Node.js
- Visual Studio Code
- Installing Visual Studio Code
- Automation for Windows and macOS
- Summary
- Further reading
- Chapter 2: Create a Local Weather Web Application
- Introduction to Angular
- Angular's philosophy
- What's new in Angular 6?
- Angular in Full-Stack Architecture
- Wireframe design
- High level architecture
- Folder structure
- Set up your development directory
- Generate your Angular application
- Installing Angular CLI
- Initializing Angular app
- Publishing Git Repository using GitHub Desktop
- Inspecting and updating package.json
- Commiting code using VS Code
- Running your Angular app
- Optimizing VS Code for Angular
- IDE settings
- IDE extensions
- Coding style
- 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 3: Prepare Angular App for Production Release
- Angular unit tests
- Unit test execution.
- Declarations
- Providers
- Imports
- Test doubles
- Jasmine specs
- Angular e2e tests
- e2e test execution
- e2e spec
- Troubleshooting common Angular errors
- Debugging with Chrome Developer Tools
- Optimizing Chrome Dev Tools
- Troubleshooting network issues
- Investigating console errors
- Karma, Jasmine, and Unit Testing errors
- NetworkError
- Generic ErrorEvents
- Debugging with Visual Studio Code
- 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 4: Staying Up to Date with Angular Updates
- A brief history of web frameworks
- Updating Node
- n - Node version manager for macOS
- Updating npm and Global npm packages
- Global Npm packages
- Npm fails to install a global tool on Windows
- Updating Angular
- Angular update guide
- Take stock of your current version
- Using Angular Update Guide
- Updating your Angular app
- Pre-upgrade checklist
- Before updating
- During the Update
- Incompatible peer dependencies
- Continuing the update
- After the update
- Post Update Checklist
- Manual update
- Testing performance
- Addressing security vulnerabilities
- Updating your web server
- Updating Docker image
- Summary
- Chapter 5: Enhance Angular App with Angular Material
- Angular Material
- Angular Material setup and performance
- Installing Angular Material
- Automatically
- Manually
- Understanding Material's components
- Manually configuring Angular Material
- Importing modules
- Importing theme
- Adding Material Icon font
- Angular Flex Layout
- Responsive layouts.
- Installing Angular Flex Layout
- Layout basics
- Flex Layout APIs for DOM containers
- Flex Layout APIs for DOM elements
- Flex Layout APIs for any element
- 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
- Custom themes
- Advanced themes
- Updating Angular Material
- Take stock of your current versions
- Check on the latest available versions
- Updating Angular Material
- Summary
- Chapter 6: Reactive Forms and Component Interaction
- Interactive prototype
- MockFlow WireFramePro
- Building the mock-up
- Home screen
- Search results
- Settings pane
- Adding interactivity
- Exporting the functional prototype
- Searching with user input
- Adding Angular Reactive Forms
- Adding and verifying components
- Adding search to weather service
- Implementing search
- Limiting user inputs with throttle/debounce
- Implementing input validation and error messaging
- Template driven forms with two-way binding
- Enabling component interaction
- Global events
- Child-parent relationships with event emitters
- Parent-child relationships with input binding
- Sibling interactions with subjects
- Summary
- Chapter 7: 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 8: 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 9: 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 10: Angular App Design and Recipes
- User class and object-oriented programming
- Reusing components
- User service with caching, GET and POST
- 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 11: Highly-Available Cloud Infrastructure on AWS
- Creating a secure AWS account
- Securing secrets
- 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
- AWS Billing
- Summary
- Chapter 12: Google Analytics and Advanced Cloud Ops
- Collecting Analytics
- Adding Google Tag Manager to Angular App
- Set up Google Tag Manager
- Setting up Google Analytics
- Configuring Google Analytics Tag in Tag Manager
- Budgeting and scaling
- Calculating per user cost
- Advanced load testing
- Reliable Cloud Scaling
- Cost per user in a scalable environment
- Calculating target server utilization
- Pre-scheduled provisioning
- Blue-Green deployments
- Revising estimates with metrics
- Measuring actual use
- Creating a custom event
- Adding custom events in Angular.
- Advanced Analytics events.
