Angular UI Development with PrimeNG电子书

Title Page

Copyright

Angular UI Development with PrimeNG

Credits

Foreword

About the Authors

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Getting Started with Angular and PrimeNG

TypeScript fundamentals

Basic types

Interfaces, classes, and enums

Functions

Generics

Modules

Advanced types, decorators, and compiler options

Union types and type aliases

Type inference

Decorators

Type definition files

Compiler options

Angular cheat sheet - overview of key concepts

Components, services, and dependency injection

Templates and bindings

Built-in directives

Communication between components

Forms

Routing

Angular modularity and lifecycle hooks

Modules and bootstrapping

Lifecycle hooks

Running PrimeNG with SystemJS

The SystemJS configuration for Angular

Adding PrimeNG dependencies

Setting up PrimeNG project with Webpack

Entry point and output

Loaders and plugins

Adding PrimeNG, CSS, and SASS

Setting up PrimeNG project with Angular CLI

Generating scaffolding

Adding PrimeNG dependencies

Summary

Theming Concepts and Layouts

Understanding structural and skinning CSS

Organizing your project structure with Sass

Simple ways to create a new theme

ThemeRoller approach

The Sass approach

The responsive grid system in PrimeNG

Basic principles

Nested columns

Responsive and fluid layout

Bootstrap flexbox layout meets PrimeNG

Summary

Enhanced Inputs and Selects

Formatted input with InputMask

Mask format options

Using the slot character

Making a part of the mask optional

Autosuggestion with AutoComplete

Multiple selection

Working with objects

Advanced features - the customized content displays

Entering multiple values with Chips

Display complex information using template

Discovering checkbox - boolean, many, and TriState

Boolean checkbox - single selection

Checkbox multiple selection

Multistate representation - TriStateCheckbox

Choosing items with single and MultiSelect components

Customized Dropdown

The MultiSelect dropdown

Basic and advanced Calendar scenarios

Localization

Time picker options

Advanced features

Spinner and Slider – different ways to provide input

Advanced features - going beyond basic usage

Slider

Advanced features - going beyond basic usage

Text editing with rich editors

The customized editor

Password and star-based rating inputs

Rating input

Validation with the input and select components

Summary

Button and Panel Components

Enhanced Button, RadioButton, and SplitButton

Button

Icons and severity

RadioButton

SplitButton

Icons and theming

Selecting a value with ToggleButton and SelectButton

SelectButton

Grouping buttons with Toolbar

Arranging your view with Panels and FieldSets

Panel

FieldSet

Vertical stacked panels with Accordion

Grouping content with tabs in TabView

Summary

Data Iteration Components

Multi feature DataTable

Change detection

Dynamic columns

Selecting rows in DataTable

Single selection

Multiple selection

RadioButton selection

Checkbox selection

Sorting, filtering, and paginating data in DataTable

Sorting

Filtering

Pagination

Customizing the cell content with templating

Resizing, reordering, and toggling columns in DataTable

Resizing

Reordering

Toggling

In-cell editing with DataTable

Making DataTable responsive

Using column and row grouping

Column grouping

Row grouping

Expandable row groups

Sub-headers

RowSpan groups

Handling tons of data with lazy DataTable

Row expansion by providing a row template

Exporting data in CSV format

DataTable events and methods

Listing data with DataList

Facets and pagination

Lazy loading

Events

Listing data with PickList

Listing data with OrderList

Grid-organized data with DataGrid

Beyond basic usage - advanced features

On-demand data loading with DataScroller

Lazy loading

Visualizing data with Tree

Selection features - single, multiple, and checkbox

Beyond basic usage - advanced features

Visualizing data with TreeTable

Selection features - single, multiple, and checkbox

Beyond basic usage - advanced features

Managing events with Schedule

Header customization

Beyond basic usage - advanced features

Events and methods

Summary

Amazing Overlays and Messages

Displaying content in the popup mode

Dialog

Usability features

Customized header and footer

ConfirmDialog

Customization

Multipurpose scenarios with OverlayPanel

Integration with other components

Closable properties

Displaying content in Lightbox

Custom content mode

Transition effects

Notifying users with Messages and Growl

Growl - another way of notifying information

Sticky behavior

Tooltips for form components

Summary

Endless Menu Variations

Creating programmatic menus using the MenuModel API

Menu actions

Statically and dynamically positioned menus

Accessing commands via MenuBar

ContextMenu with nested items

Customized target for ContextMenu

DataTable integration

SlideMenu – menu in the iPod style

TieredMenu – sub-menus in nested overlays

MegaMenu – the multicolumn menu

PanelMenu – hybrid of Accordion and Tree

TabMenu - menu items as tabs

Breadcrumb – providing contextual information about the page hierarchy

Summary

Creating Charts and Maps

Working with the chart model

Chart types

Customization

Events

Data representation with line and bar charts

Data representation with pie and doughnut charts

Data representation with radar and polar area charts

Drawing an organization chart for the relationship hierarchy

Hierarchical data with zero configuration

Advanced customization

Selection and events

Basic integration with the Google Maps API

Various use cases with the GMap component

Overlays

Events

Summary

Miscellaneous Use Cases and Best Practices

File uploading in all its glory

Basic, multiple, and automatic file uploading

Restrictions by file types and size

Customizations

Learning draggable and droppable directives

Draggable

Droppable

Displaying a collection of images with Galleria

Get it up and running

Auto play mode and effects

Events

CRUD sample implementation with DataTable

Deferring mechanism to optimize page loading

Blocking page pieces during long-running AJAX calls

Process status indicator in action

Selecting colors with ColorPicker

Displaying confirmation dialog with guarded routes

Implementing a custom wizard component with Steps

Introduction to state management with @ngrx/store

Redux principles

CRUD application with @ngrx/store

Summary

Creating Robust Applications

Setting up unit testing with Jasmine and Karma

Brief introduction to Jasmine

Testing setup with Webpack and Karma

Unit testing of components and services

Angular testing utilities

Testing a component

Testing a service

Tips on how to speed up unit testing

Setting up the e2e test environment with Protractor

Installing and configuring Protractor

Writing automated UI tests at a glance

Browser object, element, and locators

Clean architecture with Page Objects

Writing complete the e2e test

Exploring a PrimeNG application with Augury and ng.probe

Augury in action

Debugging with ng.probe

Summary