Bookstore

Learning Angular, Second Edition

A Hands-On Guide to Angular 2 and Angular 4

Learning Angularteaches modern application development with Angular 2 and Angular 4. It begins with the basics of Angular and the technologies and techniques used throughout the book, such as key features of TypeScript, newer ES6 syntax and concepts, and details about the tools needed to write professional Angular applications.

The reader will next build an Angular application from scratch while learning about the primary pieces of an Angular application and see how they work together. Using lots of examples, the core parts of Angular will be introduced, such as Components, the Router, and Services.

The book also covers techniques like server-side rendering and how to incrementally add Angular 2+ features to existing AngularJS applications. Finally, the reader will gain insight into advanced skills that should be part of any professional Angular developer’s toolkit such as testing, tooling options, and performance tuning.

• Understand how Angular is organized and learn best practices for designing Angular applications
• Quickly build Angular templates with built-in directives that enhance the user experience
• Bind UI elements to your data model, so changes to your model and UI occur automatically in tandem
• Define custom Angular directives that extend HTML
• Implement zoomable images, expandable lists, and other rich UI components
• Implement client-side services that interact with web servers
• Build dynamic browser views to provide even richer user interaction
• Create custom services you can easily reuse
• Implement rich UI components as custom Angular directives

Contents at a Glance

Introduction

• What is Angular
• Why Use Angular
• Who this Book is For
• How to Use this Book
• Getting the Source Code

Chapter 1: Jumping into JavaScript

• Setting Up a JavaScript Development Environment
• Defining Variables
• Understanding JavaScript Data Types
• Using Operators
• Implementing Looping
• Creating Functions
• Understanding Variable Scope
• Using JavaScript Objects
• Manipulating Strings
• Working with Arrays
• Adding Error Handling

Chapter 2: Jumping into TypeScript

• Learning the Different Types
• Understanding Interfaces
• Implementing Classes
• Implementing Modules
• Understanding Functions

Chapter 3: Getting Started with Angular

• Why Angular?
• Understanding Angular
• Separation of Responsibilities
• Adding Angular to Your Environment
• Using the Angular CLI
• Creating a Basic Angular Application

Chapter 4: Angular Components

• Component Configuration
• Building the Template
• Using Constructors
• Using External Templates
• Implementing Directives

Chapter 5: Expressions

• Using Expressions
• Using Pipes
• Building a Custom Pipe

Chapter 6: Data Binding

• Understanding Data Binding
• Interpolation
• Property Binding
• Attribute Binding
• Class Binding
• Style Binding
• Event Binding
• Two-Way Binding

Chapter 7: Built-in Directives

• Understanding Directives
• Using Built-in Directives
• Structural Directives
• Attribute Directives

Chapter 8: Custom Directives

• Creating a Custom Attribute Directive
• Creating a Custom Directive with a Component

Chapter 9: Events and Change Detection

• Using Browser Events
• Emitting Custom Events
• Using Observables

Chapter 10: Implementing Angular Services in Web Applications

• Understanding Angular Services
• Using the Built in Services
• Sending HTTP GET and PUT Requests with the http Service
• Implementing a Simple Mock Server Using the http Service
• Changing Views with the router Service
• Implementing a Router with a Navigation Bar
• Implementing a Router with Parameters

Chapter 11: Creating Your Own Custom Angular Service

• Integrating Custom Services into Angular Applications
• Implementing a Simple Application That Uses a Constant Data Service
• Implementing a Data Transform Service
• Implementing a Variable Data Service
• Implementing a Service that Returns a Promise
• Implementing a Shared Service

Chapter 12: Having Fun with Angular

• Implementing an Angular Application That Uses the Animation Service
• Implementing an Angular Application That Zooms in on Images
• Implementing an Angular Application That Enables Drag and Drop
• Implementing a Star Rating Angular Component

Learning Angular: A Hands-On Guide to Angular 2 and Angular 4

Introduction     1
Chapter 1 Jumping into JavaScript     5
Setting Up a JavaScript Development Environment     5
Defining Variables     6
Understanding JavaScript Data Types     6
Using Operators     8
    Arithmetic Operators     8
    Assignment Operators     8
    Applying Comparison and Conditional Operators     9
Implementing Looping     11
    while Loops     11
    do/while Loops     12
    for Loops     12
    for/in Loops     13
    Interrupting Loops     13
Creating Functions     14
    Defining Functions     14
    Passing Variables to Functions     15
    Returning Values from Functions     15
    Using Anonymous Functions     16
Understanding Variable Scope     16
Using JavaScript Objects     17
    Using Object Syntax     17
    Creating Custom Defined Objects     18
    Using a Prototyping Object Pattern     19
Manipulating Strings     19
    Combining Strings     21
    Searching a String for a Substring     21
    Replacing a Word in a String     22
    Splitting a String into an Array     22
Working with Arrays     22
    Combining Arrays     24
    Iterating Through Arrays     24
    Converting an Array into a String     24
    Checking Whether an Array Contains an Item     25
    Adding Items to and Removing Items from Arrays     25
Adding Error Handling     25
    try/catch Blocks     26
    Throwing Your Own Errors     26
    Using finally     27
Chapter 2 Jumping into TypeScript     29
Learning the Different Types     29
Understanding Interfaces     31
Implementing Classes     32
    Class Inheritance     33
Implementing Modules     33
Understanding Functions     34
Chapter 3 Getting Started with Angular     37
Why Angular?     37
Understanding Angular     37
    Modules     38
    Directives     38
    Data Binding     38
    Dependency Injection     38
    Services     39
Separation of Responsibilities     39
Adding Angular to Your Environment     39
Using the Angular CLI     40
    Generating Content with the CLI     40
Creating a Basic Angular Application     41
    Creating Your First Angular App     42
    Understanding and Using NgModule     43
    Creating the Angular Bootstrapper     44
Chapter 4 Angular Components     49
Component Configuration     49
    Defining a Selector     50
Building a Template     50
    Using Inline CSS and HTML in Angular Applications     51
Using Constructors     53
Using External Templates     54
Injecting Directives     56
    Building a Nested Component with Dependency Injection     56
    Passing in Data with Dependency Injection     58
    Creating an Angular Application that Uses Inputs     59
Chapter 5 Expressions     61
Using Expressions     61
    Using Basic Expressions     62
    Interacting with the Component Class in Expressions     64
    Using TypeScript in Angular Expressions     65
Using Pipes     68
    Using Built-in Pipes     69
    Using Built-in Pipes     71
Building a Custom Pipe     72
    Creating a Custom Pipe     73
Chapter 6 Data Binding     75
Understanding Data Binding     75
    Interpolation     76
    Property Binding     77
    Attribute Binding     78
    Class Binding     79
    Style Binding     81
    Event Binding     82
    Two-Way Binding     85
Chapter 7 Built-in Directives     87
Understanding Directives     87
Using Built-in Directives     87
    Components Directives     88
    Structural Directives     88
    Attribute Directives     91
Chapter 8 Custom Directives     95
Creating a Custom Attribute Directive     95
Creating a Custom Directive with a Component     98
Chapter 9 Events and Change Detection     103
Using Browser Events     103
Emitting Custom Events     104
    Emitting a Custom Event to the Parent Component Hierarchy     104
    Handling Custom Events with a Listener     104
    Implementing Custom Events in Nested Components     104
    Deleting Data in a Parent Component from a Child Component     107
Using Observables     110
    Creating an Observable Object     110
    Watching for Data Changes with Observables     111
Chapter 10 Implementing Angular Services in Web Applications     115
Understanding Angular Services     115
Using the Built-in Services     115
Sending HTTP GET and PUT Requests with the http Service     116
    Configuring the HTTP Request     117
    Implementing the HTTP Response Callback Functions     117
    Implementing a Simple JSON File and Using the http Service to Access It     118
Implementing a Simple Mock Server Using the http Service     121
    Implementing a Simple Mock Server and Using the http Service to Update Items on the Server     127
Changing Views with the router Service     132
    Using routes in Angular     134
    Implementing a Simple Router     134
Implementing a Router with a Navigation Bar     138
Implementing a Router with Parameters     143
Chapter 11 Creating Your Own Custom Angular Services     149
Integrating Custom Services into Angular Applications     149
Adding an Angular Service to an Application     150
Implementing a Simple Application that Uses a Constant Data Service     151
Implementing a Data Transform Service     152
Implementing a Variable Data Service     156
Implementing a Service that Returns a Promise     161
Implementing a Shared Service     162
Chapter 12 Having Fun with Angular     171
Implementing an Angular Application that Uses the Animation Service     171
Implementing an Angular Application that Zooms in on Images     176
Implementing an Angular Application that Enables Drag and Drop     179
Implementing a Star Rating Angular Component     185
Index     195