Expert Angular by Mathieu Nayrolles, Sridhar Rao, Rajesh Gunasundaram -- Read -- Imperial Library of Trantor

Index

Title Page Copyright

Expert Angular

Credits About the Authors About the Reviewers 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

Architectural Overview and Building a Simple App in Angular

Angular architecture

NgModules Components Templates Metadata Data Binding Directives Services Dependency Injection

Basics of TypeScript

Basic types

Number type Boolean type String Array Enum Any Void

Classes Interfaces

Optional properties using an interface Function type interfaces Array type interfaces Class type interfaces Extending interfaces Hybrid type interfaces

Inheritance

Inheritance in TypeScript

Private and public modifiers Accessors Static properties Modules

Namespaces Modules

Functions

Optional and default parameters

Rest parameter Generics

Generic interfaces Generic classes

Decorators

Class decorators Method decorators Accessor decorators Property decorators Parameter decorators

Building a simple application Summary

Migrating AngularJS App to Angular App

Migration process Syntax difference between Angular and AngularJS

Local variables and bindings in templates Filters and pipes in templates Local variables in templates Angular app directives Handling the CSS classes Binding click event Controllers and components in templates

Benefits of upgrading to Angular

Strategies to upgrade to Angular

Rules for incremental upgrade to Angular Incremental upgrading using UpgradeAdapter

Injecting AngularJS dependencies to Angular Injecting Angular dependencies to AngularJS

Components migration Roadmap from AngularJS to Angular

JavaScript to TypeScript Installing Angular packages Creating the AppModule Bootstrapping your application Upgrading application services Upgrading your application component Adding the Angular router

Summary

Using Angular CLI to Generate Angular Apps with Best Practices

Introducing Angular CLI Installing and setting up Angular CLI Generating code for a new application Generating components and routes

Routes

Generating services Generating directives and pipes

Pipes

Creating builds targeting various environments Running tests for your application Updating Angular CLI Summary

Working with Components

Components 101

A basic root component Defining child components

Component life cycle Communicating and sharing data between components

Referencing child components from a parent component

Template reference variables Injecting child components

Using services with components

Summary

Implementing Angular Routing and Navigation

Importing and configuring the router

Building blocks of router

About router LocationStrategy Handling the error state - wildcard route

Route Guards

Custom component routes and child routes

Custom component routes with inner child routes

Integrating all the components together Demo application routing and navigation

Summary

Creating Directives and Implementing Change Detection

Angular Directives Component Directives Structural Directives

ngFor directive ngIf directive ngSwitch directive

Attribute Directives

Built-in Attribute Directives

Creating custom directives - Structural and Attribute Directives

Angular CLI - generating the directives Creating custom Attribute Directives Creating custom Structural Directives

Implementing change detection in Angular

Change detection - Angular and ZoneJS

Change detection strategy

ChangeDetectionStrategy - Default ChangeDetectionStrategy - OnPush Advantages of ChangeDetectionStrategy - OnPush

Summary

Asynchronous Programming Using Observables

Observer patterns

TypeScript Observable TypeScript Observable with parameters

Observing HTTP responses

Implementation Understanding the implementation

Promises Summary

Template and Data Binding Syntax

Learning about Template Syntax

Various ways to include Template Syntax

Using inline Template Syntax Using templateURL to include a template

Interpolation in templates Template expressions in Angular Attaching events to views in templates Implementing directives inside templates Bindings in the template

Angular Data Binding

One-way Data Binding - Data source to view One-way Data Binding - View template to data source Angular Two-way Data Binding

Summary

Advanced Forms in Angular

Getting started Reactive forms Using FormBuilder Adding validations Custom validation Two-way Data Binding with ngModel Keeping things neat (extra credit) Summary

Material Design in Angular

Installing the package Responsive layout Material icons

Buttons Menu Toolbars Dialogs Side navigation drawers

Theming Summary

Implementing Angular Pipes

Angular Pipes - An overview Defining a pipe

Built-in Pipes

DatePipe DecimalPipe CurrencyPipe LowerCasePipe and UpperCasePipe JSON Pipe SlicePipe async Pipe

Parameterizing pipes Chaining pipes Creating custom pipes

Pure and Impure Pipes

Pure Pipes Impure Pipes

Summary

Implementing Angular Services

Why use a service or factory? Creating a service Accessing data from components using services

Implementing services Consuming the service

Creating an asynchronous service

What is a Promise? Using a Promise in a service

Summary

Applying Dependency Injection

Applications without Dependency Injection Dependency Injection - Introduction

Understanding provider classes Understanding hierarchical DI

Overview - Hierarchical components and DI

Creating an injectable

Registering providers

Registering providers inside the component Provider classes with dependencies Using @Inject, provide, and useValue

Summary

Handling Angular Animation

Introduction to Angular animations

Installing the Angular animations library Angular animation - Specific functions

Trigger States Transitions

Animating page transitions

One more example - Angular animations Using keyframes - Sequence of styles

Animate collapse menu

Summary

Integrating Bootstrap with Angular Application

Installing Bootstrap Understanding the grid system Using Bootstrap directives

Accordion Alert Datepicker Tooltip Progress bar Rating

Summary

Testing Angular Apps Using Jasmine and Protractor Frameworks

Concepts in testing Understanding and setting up Angular CLI for testing Introduction to Jasmine framework

The Jasmine framework - Global methods we can use

Commonly used methods in Jasmine Angular CLI and Jasmine framework - First test Testing Angular components with Jasmine

Testing Angular components with Jasmine Testing Angular components - Advanced

TestBed Example - Writing test scripts with change detection

Testing Angular services Testing Angular services - Mocking backend services

Introduction to Protractor framework

Protractor - A quick overview

Protractor and DOM Some methods available to select element(s) Exploring the Protractor API Protractor - First steps

Writing E2E tests using Protractor Writing E2E tests using Protractor - Advanced

Summary

Design Patterns in Angular

Model-View-Controller (MVC)

MVC at large MVC limitations for the frontend Angular is MVC

Singleton and Dependency Injection Prototype and reusable pool Factory pattern Memento pattern Summary

← Prev
Back
Next →

← Prev
Back
Next →