Next-Level UI Development with PrimeNG Master the Versatile Angular Component Library to Build Stunning Angular Applications
Unlock the full potential of PrimeNG and jumpstart your Angular development with essential tools and techniques for web application development Key Features Gain a comprehensive understanding of PrimeNG for Angular development Leverage PrimeNG's UI components, theming, and performance optimizat...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2024]
|
| Edición: | First edition |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009805128206719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Contributors
- Table of Contents
- Preface
- Part 1: Introduction to PrimeNG
- Chapter 1: Introducing Angular and PrimeNG: A Powerful Combination
- Technical requirements
- Introducing Angular
- Introducing PrimeNG
- Exploring key features of PrimeNG
- Using Angular and PrimeNG together
- Summary
- Chapter 2: Setting Up Your Development Environment
- Technical requirements
- Setting up the Angular CLI
- Installing Node.js v18 (using NVM)
- Installing the Angular CLI
- Creating a new Angular project
- Understanding the project structure
- Discovering useful VS Code extensions
- Angular Language Service
- Editor Config
- Angular Schematics
- Auto Rename Tag
- Nx Console
- Summary
- Chapter 3: Utilizing Angular's Features and Improvements
- Technical requirements
- Introducing modern Angular
- Learning about the core features and improvements in Angular
- Angular data binding
- Angular components
- Dependency injection
- Angular services
- Angular directives
- Angular pipes
- Angular signals
- Angular control flow
- Organizing an Angular project
- Summary
- Chapter 4: Integrating PrimeNG into Your Angular Project
- Technical requirements
- Adding PrimeNG components to your Angular project
- Installing PrimeNG
- Importing PrimeNG styles into your Angular application
- Working with PrimeNG icons
- Adding PrimeNG methods
- Using PrimeNG components in your templates
- Working with PrimeNG component APIs and directives
- Configuring PrimeNG modules and dependencies
- Global configuration
- Angular animation configuration
- Customizing component styles and themes
- Overriding styles at the component level
- Overriding styles globally
- Troubleshooting common integration issues
- Conflict or compatibility issues
- Missing or incorrect imports.
- Incorrect configuration or setup
- Inspecting console errors and warnings
- Using the Angular CLI
- Seeking help from the community
- Summary
- Part 2: UI Components and Features
- Chapter 5: Introducing Input Components and Form Controls
- Technical requirements
- Introducing input components and form controls
- Template-driven forms
- Reactive forms
- Enhancing Angular forms with PrimeNG input components
- Working with text inputs, checkboxes, and radio buttons
- InputText
- InputMask
- Checkbox
- RadioButton
- Using dropdowns, multi-selects, and date pickers
- Dropdown
- MultiSelect
- Calendar
- Implementing form validation
- Understanding Angular form states
- Built-in Angular form validation
- Crafting custom form validation
- PrimeNG and form validation
- Summary
- Chapter 6: Working with Table, List, and Card Components
- Technical requirements
- Creating responsive layouts with PrimeFlex
- Integrating PrimeFlex with PrimeNG
- Using Flexbox in PrimeFlex
- Introducing data display components
- Working with data table components
- Creating a basic table
- Table with dynamic columns
- Table with sorting
- Table with filtering
- Table with a paginator
- Working with list components
- DataView
- OrderList
- PickList
- Working with card components
- Summary
- Chapter 7: Working with Tree, TreeTable, and Timeline Components
- Technical requirements
- Working with Tree components
- When to use the PrimeNG Tree component
- Creating a basic Tree component
- Expanding and collapsing nodes
- Using node selection events
- Using node expansion and collapse events
- Working with lazy loading
- Working with TreeTable components
- When to use the PrimeNG TreeTable component
- Creating a basic TreeTable component
- Using dynamic columns
- Enabling the TreeTable paginator
- Associated events and methods.
- Working with Timeline components
- When to use the PrimeNG Timeline component
- Creating a basic timeline
- Timeline alignment
- Timeline horizontal layout
- Summary
- Chapter 8: Working with Navigation and Layout Components
- Technical requirements
- Introducing navigation and layout components
- What are navigation and layout components?
- Crafting an intuitive navigation and layout experience
- Best practices for creating navigation and layout components
- Working with menus
- What are PrimeNG menus?
- Creating a basic menu
- Working with Menubar
- Working with MegaMenu
- Working with ContextMenu
- Working with TieredMenu
- Working with Breadcrumb
- Introducing PrimeNG panels
- Creating a basic panel
- Working with ScrollPanel
- Working with Accordion
- Working with Fieldset
- Working with TabView
- Working with Splitter
- Summary
- Part 3: Advanced Techniques and Best Practices
- Chapter 9: Customizing PrimeNG Components with Theming
- Technical requirements
- Introducing PrimeNG theming
- Working with pre-built themes
- When to use PrimeNG pre-built themes
- Example of PrimeNG pre-built themes
- Switching themes
- Creating your own custom themes
- What are PrimeNG custom themes?
- When are PrimeNG custom themes used?
- How to create PrimeNG custom themes
- Creating a custom theme via the Visual Editor
- Creating a custom theme via Sass compilation
- Creating a custom theme by embedding SCSS files
- Overriding component styles and other tips
- How to override component styles
- Using PrimeNG common utils
- Working with PrimeNG CSS variables
- Other tips and tricks
- Summary
- Chapter 10: Exploring Optimization Techniques for Angular Applications
- Technical requirements
- Introducing Angular performance optimization
- What is Angular performance optimization?.
- Major performance issues in Angular applications
- Popular optimization techniques
- Introducing performance profiling and analysis
- When is performance profiling and analysis used?
- How does performance profiling and analysis work in Angular?
- Implementing lazy loading and deferring
- When are lazy loading and deferring used?
- Example of lazy loading
- Example of PrimeNG deferring
- Working with change detection
- How does change detection work?
- How change detection strategies affect performance
- Potential pitfalls of OnPush
- Optimizing data binding
- When is optimized data binding used?
- A few optimized data binding techniques
- Optimized data binding example - the trackBy function
- Optimized data binding example - pure pipes
- Working with code and bundle optimization
- When is code and bundle optimization used?
- Utilizing Source Map Explorer for bundle optimization
- Summary
- Chapter 11: Creating Reusable and Extendable Components
- Technical requirements
- Introducing reusable and extendable components
- Why are reusable and extendable components important?
- Steps to create reusable and extendable components
- Angular component best practices
- Getting to know StyleClass
- Why use PrimeNG StyleClass?
- Example: toggle classes
- Example: animation
- Utilizing PrimeBlocks for creating UI clocks
- Advantages and Disadvantages of using PrimeBlocks
- How to use PrimeBlocks
- Creating reusable and extendable components
- Crafting your own components with PrimeNG
- Why create custom components?
- Example: utilizing PrimeNG to create a sign-in component
- Summary
- Chapter 12: Working with Internationalization and Localization
- Technical requirements
- Introducing internationalization and localization
- Introducing internationalization (i18n) in Angular applications.
- Understanding the role of localization (l10n) in creating multi-lingual experiences
- Challenges and considerations for designing internationally friendly applications
- Exploring popular internationalization libraries for Angular
- @angular/localize
- ngx-translate
- @ngneat/transloco
- angular-i18next
- Working with ngx-translate for internationalization
- Integrating ngx-translate into an Angular application
- Tips and tricks for working with ngx-translate
- Working with PrimeNG Locale
- Summary
- Chapter 13: Testing PrimeNG Components
- Technical requirements
- Getting started with basic Angular testing
- Introduction to Angular testing fundamentals
- Angular testing with Jest
- Step-by-step guide to writing your initial Angular tests
- Breaking down a simple unit test
- Writing test for PrimeNG components
- How PrimeNG tests its components
- Creating and testing our own component
- Utilizing testing tips and tricks
- Isolate unit tests
- Utilize NO_ERRORS_SCHEMA
- Utilize the spyOn method
- Working with fakeAsync
- Utilizing third-party libraries - Spectator
- Utilizing third-party libraries - ng-mocks
- Summary
- Part 4: Real-World Application
- Chapter 14: Building a Responsive Web Application
- Technical requirements
- Introduction to building a responsive web application
- Why responsive web applications matter
- The benefits of responsive web applications
- Key principles of responsive web design
- Introducing our responsive web application project
- Creating the layout of the website
- Starting to develop the website
- Prerequisites
- Header with navigation
- Hero section
- Features section
- Testimonials section
- Pricing section
- Footer section
- Deploying the responsive web application
- Getting the project ready for production
- Different options for deployment.
- Final notes after deployment.
