Book Image

Expert Angular

By : Sridhar Rao Chivukula

Book Image

Expert Angular

By: Sridhar Rao Chivukula

Overview of this book

Got some experience of Angular under your belt? Want to learn everything about using advanced features for developing websites? This book is everything you need for the deep understanding of Angular that will set you apart from the developer crowd. Angular has introduced a new way to build applications. Creating complex and rich web applications, with a lighter resource footprint, has never been easier or faster. Angular is now at release 4, with significant changes through previous versions. This book has been written and tested for Angular release 4. Angular is a mature technology, and you'll likely have applications built with earlier versions. This book starts by showing you best practices and approaches to migrating your existing Angular applications so that you can be immediately up-to-date. You will take an in-depth look at components and see how to control the user journey in your applications by implementing routing and navigation. You will learn how to work with asynchronous programming by using Observables. To easily build applications that look great, you will learn all about template syntax and how to beautify applications with Material Design. Mastering forms and data binding will further speed up your application development time. Learning about managing services and animations will help you to progressively enhance your applications. Next you’ll use native directives to integrate Bootstrap with Angular. You will see the best ways to test your application with the leading options such as Jasmine and Protractor. At the end of the book, you’ll learn how to apply design patterns in Angular, and see the benefits they will bring to your development.

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Free Chapter

Architectural Overview and Building a Simple App in Angular

Architectural Overview and Building a Simple App in Angular

Angular architecture

Basics of TypeScript

Building a simple application

Migrating AngularJS App to Angular App

Migrating AngularJS App to Angular App

Migration process

Syntax difference between Angular and AngularJS

Benefits of upgrading to Angular

Rules for incremental upgrade to Angular

Incremental upgrading using UpgradeAdapter

Components migration

Roadmap from AngularJS to Angular

Using Angular CLI to Generate Angular Apps with Best Practices

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

Generating services

Generating directives and pipes

Creating builds targeting various environments

Running tests for your application

Updating Angular CLI

Working with Components

Working with Components

Component life cycle

Communicating and sharing data between components

Implementing Angular Routing and Navigation

Implementing Angular Routing and Navigation

Importing and configuring the router

Custom component routes with inner child routes

Creating Directives and Implementing Change Detection

Creating Directives and Implementing Change Detection

Angular Directives

Component Directives

Structural Directives

Attribute Directives

Implementing change detection in Angular

Asynchronous Programming Using Observables

Asynchronous Programming Using Observables

Observer patterns

Observing HTTP responses

Template and Data Binding Syntax

Template and Data Binding Syntax

Learning about Template Syntax

Angular Data Binding

Advanced Forms in Angular

Advanced Forms in Angular

Getting started

Using FormBuilder

Adding validations

Custom validation

Two-way Data Binding with ngModel

Keeping things neat (extra credit)

Material Design in Angular

Material Design in Angular

Installing the package

Responsive layout

Implementing Angular Pipes

Implementing Angular Pipes

Angular Pipes - An overview

Defining a pipe

Parameterizing pipes

Creating custom pipes

Implementing Angular Services

Implementing Angular Services

Why use a service or factory?

Creating a service

Accessing data from components using services

Creating an asynchronous service

Applying Dependency Injection

Applying Dependency Injection

Applications without Dependency Injection

Dependency Injection - Introduction

Registering providers

Handling Angular Animation

Handling Angular Animation

Introduction to Angular animations

Integrating Bootstrap with Angular Application

Integrating Bootstrap with Angular Application

Installing Bootstrap

Understanding the grid system

Using Bootstrap directives

Testing Angular Apps Using Jasmine and Protractor Frameworks

Testing Angular Apps Using Jasmine and Protractor Frameworks

Concepts in testing

Understanding and setting up Angular CLI for testing

Introduction to Jasmine framework

Introduction to Protractor framework

Design Patterns in Angular

Design Patterns in Angular

Model-View-Controller (MVC)

Singleton and Dependency Injection

Prototype and reusable pool

Factory pattern

Memento pattern

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Getting started

As stated in the introduction of this chapter, we will build upon our JSON API for the Marvel Cinematic Universe of Chapter 7, Asynchronous Programming Using Observables. To be a bit more precise, we will improve the Promise-based version. Why Promises instead of pure observers? Well, Promises are an extremely powerful tool, and they are used in the majority of Angular/Typescript projects I have seen so far. Consequently, a bit more practice with Promises won't hurt much.

You can find the code of the Promises part here http://bit.ly/mastering-angular2-chap7-part3.

To clone this code into a new repo called advanced-forms, use the following command:

$ git clone --depth one https://github.com/MathieuNls/mastering-
   angular2 advanced-forms
$ cd advanced-forms
$ git filter-branch --prune-empty --subdirectory-filter chap7/angular-
   promise HEAD
$ npm install

These...