Angular UI Development with PrimeNG

图书信息

作者	Sudheer Jonna, Oleg Varaksin
出版社	Packt Publishing
ISBN	9781788297868
出版时间	2017-07-27
字数	43.4万
分类	Packt Publishing,进口书,外文原版书,电脑,网络

读书简介

Unleash the power of PrimeNG components to design compelling user interface for your Angular applications About This Book ? Detailed insights into PrimeNG concepts, components and features with examples to help you make excellent User Interfaces for Angular web apps. ? Get familiar with themes, layouts and customization in real world applications. ? Develop Angular applications rapidly using advance tools and standards with best practices. Who This Book Is For This book is for everybody who would like to learn or create modern Angular based single page applications using PrimeNG component library. This book is a good choice for beginners to advanced users who are serious to learn modern Angular applications. The prerequisites for this book are some basic knowledge on the Angular 2+ version with TypeScript and CSS skills. What You Will Learn ? Setup PrimeNG projects with SystemJS, Webpack, and Angular CLI. ? Use theming concepts and layouts with grid systems and Bootstrap. ? Work with enhanced input, select, button and panel components. ? Apply countless DataTable features: sorting, filtering, grouping, and templating. ? Meet data iteration components: DataList, DataGrid, Tree, and so on. ? Build endless menu variations: SlideMenu, TieredMenu, MegaMenu, and so on. ? Visualize your data representations with PrimeNG charts and GMap components. ? Adopt best practices such as state management with @ngrx/store. ? Write unit and end-to-end tests with Jasmine, Karma, and Protractor. In Detail PrimeNG is a leading UI component library for Angular applications with 80+ rich UI components. PrimeNG was a huge success in the Angular world and very quickly. It is a rapidly evolving library that is aligned with the last Angular release. In comparison with competitors, PrimeNG was created with enterprise applications in mind. This book provides a head-start to help readers develop real–world, single-page applications using the popular development stack. This book consists of 10 chapters and starts with a short introduction to single-page applications. TypeScript and Angular fundamentals are important first steps for subsequent PrimeNG topics. Later we discuss how to set up and configure a PrimeNG application in different ways as a kick-start. Once the environment is ready then it is time to learn PrimeNG development, starting from theming concepts and responsive layouts. Readers will learn enhanced input, select, button components followed by the various panels, data iteration, overlays, messages and menu components. The validation of form elements will be covered too. An extra chapter demonstrates how to create map and chart components for real-world applications. Apart from built-in UI components and their features, the readers will learn how to customize components to meet their requirements. Miscellaneous use cases are discussed in a separate chapter, including: file uploading, drag and drop, blocking page pieces during AJAX calls, CRUD sample implementations, and more. This chapter goes beyond common topics, implements a custom component, and discusses a popular state management with @ngrx/store. The final chapter describes unit and end-to-end testing. To make sure Angular and PrimeNG development are flawless, we explain full-fledged testing frameworks with systematic examples. Tips for speeding up unit testing and debugging Angular applications end this book. The book is also focused on how to avoid some common pitfalls, and shows best practices with tips and tricks for efficient Angular and PrimeNG development. At the end of this book, the readers will know the ins and outs of how to use PrimeNG in Angular applications and will be ready to create real- world Angular applications using rich PrimeNG components. Style and approach Step-by-step practical approach

目录

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