Angular for Enterprise Applications Build Scalable Angular Apps Using the Minimalist Router-First Architecture
Harness the full power of Angular 17 with up-to-date tools and enterprise-level best practices Purchase of the print or Kindle book includes a free PDF eBook Key Features Dive straight into the most relevant topics that will help you build large, complex, and high-performance web applications Find u...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2024]
|
| Edición: | Third edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009799143506719 |
Tabla de Contenidos:
- Cover
- Copyright
- Contributors
- Table of Contents
- Preface
- Chapter 1: Angular's Architecture and Concepts
- Two Angulars
- A brief history of web frameworks
- The jQuery era
- The server-side MVC era
- Rich client era
- Angular and the philosophies behind it
- Deterministic releases
- First-class upgrades
- Maintainability
- Angular Evergreen
- TypeScript
- Component architecture
- Reactive programming
- RxJS
- Reactive data streams
- Modular architecture
- Standalone architecture
- Angular Router
- Lazy loading
- State management
- The Flux pattern
- NgRx
- NgRx component store
- React.js architecture
- Future of Angular
- Summary
- Further reading
- Questions
- Chapter 2: Forms, Observables, Signals, and Subjects
- Technical requirements
- Great UX should drive implementation
- Reactive versus template-driven forms
- Adding Angular reactive forms
- Adding and verifying components
- Adding a search option to the weather service
- Implementing a search
- Limiting user inputs with throttle/debounce
- Input validation and error messages
- Template-driven forms with two-way binding
- Component interaction with BehaviorSubject
- Global events
- Child-parent relationships with event emitters
- Parent-child relationships with input binding
- Sibling interactions with subjects
- Managing subscriptions
- Lifecycle of services
- Exposé of a memory leak
- Unsubscribing from a subscription
- Subscribe with first or takeUntilDestroyed
- Coding in the reactive paradigm
- Binding to an observable with an async pipe
- Tapping into an observable stream
- Chaining API calls
- Implementing a postal code service
- Observable sequencing with switchMap
- Using Angular Signals
- Implementing dark mode
- Replacing BehaviorSubject with signals
- Generating apps with ChatGPT
- Summary
- Exercises.
- Questions
- Chapter 3: Architecting an Enterprise App
- Succeeding as a technical lead or architect
- Understand the business impact
- Set parameters of success
- Elastic leadership
- Ingredients of a successful project
- Agile software development
- Agile engineering best practices
- Engineering excellence and craftsmanship
- Angular in an enterprise
- Diverse coding paradigm support
- Community support
- Tools and techniques for high-performance apps
- Runtime performance
- Root cause of performance bottlenecks
- Minimalist JavaScript solutions
- ArrowJS
- Qwik.js
- Angular performance solutions
- Server-side rendering and hydration
- App shell
- Service workers
- RxAngular
- Angular Signals
- Build performance
- Nx
- esbuild
- Test automation
- Planning using Kanban and GitHub projects
- Setting up a GitHub project
- Customizing the Kanban board
- Creating a prioritized backlog for your app
- The 80-20 solution
- Understanding line-of-business apps
- Disciplined and balanced approach
- Router-first architecture
- Feature modules
- Developing a roadmap and scope
- Designing with lazy loading in mind
- Implementing a walking skeleton
- Achieve a stateless, data-driven design
- Enforce a decoupled component architecture
- Differentiate between user controls and components
- Maximize code reuse with TypeScript and ES
- Summary
- Further reading
- Questions
- Chapter 4: Creating a Router-First Line-of-Business App
- Technical requirements
- Creating LemonMart
- Creating a router-first app
- Configuring Angular and VS Code
- Configuring Angular Material and styles
- Designing LemonMart
- Identifying user roles
- Identifying high-level modules with a site map
- Generating router-enabled modules
- Designing the home route
- Setting up default routes
- RouterLink
- Router outlet.
- Branding, customization, and Material icons
- Branding
- Color palette
- Implementing a browser manifest and icons
- Custom themes
- Custom icons
- Material icons
- Feature modules with lazy loading
- Configuring feature modules with components and routes
- Lazy loading
- Creating the walking skeleton
- The manager module
- User module
- POS and inventory modules
- PosModule
- InventoryModule
- Common testing module
- Designing around major data entities
- Defining entities
- High-level UX design
- Creating an artifacts wiki
- Leveraging mock-ups in your app
- Summary
- Exercise
- Further reading
- Questions
- Leave a review!
- Chapter 5: Designing Authentication and Authorization
- Technical requirements
- Designing an auth workflow
- JWT life cycle
- TypeScript operators for safe data handling
- Null and undefined checking
- The conditional or ternary operator
- The null coalescing operator
- The nullish coalescing operator
- Optional chaining
- Implementing data entities and interfaces
- Classes, Interfaces, and Enums
- Reusable services leveraging OOP concepts
- Creating an auth service
- Implement an abstract auth service
- Abstract functions
- A cache service using localStorage
- Caching the JWT
- An in-memory auth service
- Simple login
- Logout
- Resuming a JWT session
- An HTTP interceptor
- Summary
- Further reading
- Questions
- Chapter 6: Implementing Role-Based Navigation
- Technical requirements
- Dynamic UI components and navigation
- Implementing the login component
- Conditional navigation
- Common validations for forms
- UI service using environment provider
- Side navigation
- Role-based routing using guards
- Route guards
- Auth guards
- Auth service fake and common testing providers
- A Firebase authentication recipe
- Create a Firebase application.
- Configuring Firebase authentication
- Adding a Firebase auth provider to Angular
- Providing a service using a factory
- Summary
- Further reading
- Questions
- Leave a review!
- Chapter 7: Working with REST and GraphQL APIs
- Technical requirements
- Full-stack architecture
- Minimal MEAN
- NestJS
- Working with monorepos
- Nx monorepo
- Git submodules
- CircleCI config
- Designing APIs
- REST APIs
- OpenAPI Spec
- OpenAPI spec with Express
- GraphQL APIs
- GraphQL schema
- Apollo with Express
- Implementing APIs with Express.js
- Bootstrapping the server
- REST routes and versioning
- GraphQL resolvers
- Services
- MongoDB ODM with DocumentTS
- Implementing JWT auth
- Authenticating middleware
- Custom server auth provider
- Summary
- Exercise
- Further reading
- Questions
- Chapter 8: Recipes - Reusability, Forms, and Caching
- Technical requirements
- Implementing CRUD services with caching
- Updating the cache
- Multi-step responsive forms
- Form controls and form groups
- Stepper and responsive layout
- Reusing repeating template behavior with directives
- Attribute directives
- Field error attribute directive
- Calculated properties and DatePicker
- Typeahead support
- Dynamic form arrays
- Creating shared components
- Reviewing and saving form data
- Scalable form architecture with reusable parts
- Abstract form component
- Implementing a reusable form part
- Input masking
- Custom controls with ControlValueAccessor
- Implementing a custom rating control
- Using custom controls in forms
- Layouts using a grid list
- Restoring cached data
- Exercise
- Summary
- Further reading
- Questions
- Chapter 9: Recipes - Master/Detail, Data Tables, and NgRx
- Technical requirements
- Loading data with resolve guard
- Reusing components with binding and route data.
- Master/detail view using auxiliary routes
- Data tables with pagination
- NgRx store and effects
- Implementing NgRx for LocalCast Weather
- Comparing BehaviorSubject and NgRx
- Setting up NgRx
- Defining NgRx actions
- Implementing NgRx effects
- Impact of RxJS operators on actions
- Implementing reducers
- Registering with Store using selector
- Dispatching store actions
- Unit testing reducers and selectors
- Unit testing components with MockStore
- NgRx ecosystem
- NgRx/Data
- NgRx/ComponentStore
- NgRx/Signals
- Akita
- Elf
- Configuring server proxies with the Angular CLI
- Implementing a global spinner with NgRx/SignalState
- NgRx/SignalState
- Pre-loading screens with HTML and CSS
- Rewriting Angular apps with NgRx/SignalStore
- RxJS and signal helpers
- NgRx/SignalStore
- Refactoring RxJS and NgRx code
- NgRx Store to SignalStore
- Services from Observables to Signals
- Components from Observables to Signals
- Summary
- Exercises
- Further reading
- Questions
- Chapter 10: Releasing to Production with CI/CD
- Technical requirements
- Automated testing
- Unit testing
- Cypress e2e tests
- Continuous integration
- CircleCI
- GitHub flow
- Deploying to the cloud
- Vercel
- Deploying static files
- Firebase
- ng deploy
- DevOps
- Containerizing web apps using Docker
- Anatomy of a Dockerfile
- Installing Docker
- Setting up npm scripts for Docker
- Building and publishing an image to Docker Hub
- npm scripts in VS Code
- Docker extensions in VS Code
- Working with containers in the cloud
- Continuous deployment
- Deploying to Vercel using CircleCI
- Gated CI workflows
- Code coverage reports
- Code coverage in CI
- Summary
- Exercises
- Further reading
- Questions
- Leave a review!
- Appendix A
- Setting Up Your Development Environment
- Recommended web development tools.
- CLI package managers.
