O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Modern Web Applications using Angular

Book Description

Design and develop next generation web applications using Angular 2 and Angular 4

About This Book

  • Learn about the core building blocks of Angular
  • Build and architect high performance web applications
  • Implement the latest JavaScript concepts in ECMAScript 2015, ECMAScript 2016, and TypeScript
  • Leverage the latest Angular features to get the most out of your web applications

Who This Book Is For

This book is targeted at JavaScript developers who are interested in learning how to build rich and powerful web applications with the latest version of Angular. Working knowledge of Angular 1 will be beneficial.

What You Will Learn

  • Develop a frontend web application using component-based architecture
  • Use ES5, ES2015, and TypeScript to build Angular 4 UI applications
  • Develop simple to complex user interfaces in Angular 4
  • Develop and handle forms in Angular 4 UI applications
  • Test UIs built in Angular 4
  • Use material design components and animations in Angular 4

In Detail

In the last few years, Angular has established itself as the number one choice of JavaScript Developers. What makes Angular special is performance and productivity. With Angular, developers can work on consistent coding patterns and build web applications that are powerful and scalable.

This book will you get you up and running with Angular and teach how to build modern web applications. It starts with basics of Angular 2 and then brushes you up with the new features of Angular 4. You will learn the core concepts involved in building web applications with Angular such as Data Binding, Routing, Dependency Injection, and much more. The book teaches how to build components and use them to build web apps of your choice. It will help you to handle different kinds of forms and learn the concept of reactive programming. Finally the book teaches how to build visually appealing and responsive UIs.

Style and approach

It follows a practical approach to explain almost every feature of Angular 2 and Angular 4 and their concepts through real-world examples. In each chapter, a different example is used so that you can build a foundation and understand the concepts by applying them in different scenarios.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Errata
      3. Piracy
      4. Questions
  2. Getting Started
    1. Introduction to Angular
      1. What is new in Angular?
    2. Setting up the environment
      1. Installing Node.js and npm
    3. Language choices
      1. ECMAScript 5
      2. ECMAScript 2015
      3. TypeScript
      4. Installing TypeScript
      5. TypeScript basics - types
        1. String
        2. Number
        3. Boolean
        4. Array
        5. Enum
        6. Any
        7. Void
        8. Functions
          1. Function declaration - named function
          2. Function expression - anonymous function
        9. Classes
    4. Writing your first Angular application
      1. Set up the Angular application
        1. Step 1
        2. Step 2
        3. Step 4
        4. Step 5
        5. Step 6
        6. Step 7
        7. Step 8
          1. SystemJS
          2. Using the Angular component
          3. Understanding npm packages
        8. Step 9
        9. Step 10
    5. Using Angular CLI
      1. Getting started with Angular CLI
    6. Summary
  3. Basics of Components
    1. Getting started
      1. Project setup
    2. Working with data
      1. Displaying data
        1. Interpolation syntax
        2. Property binding
        3. Attribute binding
      2. Event binding
      3. Two-way data binding
    3. Built-in directives
      1. Structural directives
        1. ngIf
        2. ngFor
          1. Understanding ngFor syntax
        3. ngSwitch
      2. Attribute directives
        1. ngStyle
        2. ngClass
    4. Building the master-detail component
    5. Summary
  4. Components, Services, and Dependency Injection
    1. Introduction
    2. Working with multiple components
      1. Input properties
        1. Aliasing input properties
      2. Output properties
        1. Aliasing output properties
    3. Sharing data using services
    4. Dependency injection
      1. Using a class provider
      2. Using a class provider with dependencies
      3. Using alternate class providers
      4. Using aliased class providers
    5. Summary
  5. Working with Observables
    1. Basics of RxJS and Observables
      1. Reactive programming
      2. Observer
      3. Observable
      4. Subscription
      5. Operators
    2. Observables in Angular
      1. Observable stream and mapping values
      2. Merging Observable streams
      3. Using the Observable.interval() method
      4. Using AsyncPipe
      5. Building a Books Search component
    3. Summary
  6. Handling Forms
    1. Why are forms hard?
    2. Angular forms API
      1. FormControl, FormGroup, and FormArray
        1. FormControl
          1. Creating a form control
          2. Accessing the value of an input control
          3. Setting the value of input control
          4. Resetting the value of an input control
          5. Input control states
        2. FormGroup
        3. FormArray
    3. Template driven forms
      1. Creating a registration form
        1. Using the ngModel directive
        2. Accessing an input control value using ngModel
        3. Using ngModel to bind a string value
        4. Using ngModel to bind a component property
        5. Using the ngForm directive
        6. Submitting a form using the ngSubmit method
        7. Using the ngModelGroup directive
        8. Adding validations to the registration form
      2. Pros and cons of template driven forms
    4. Reactive forms
      1. Creating a registration form using reactive forms
        1. Using FormGroup, FormControl, and Validators
        2. Using [formGroup], formControlName, and formGroupName
        3. Using FormBuilder
        4. CustomValidators
      2. Pros and cons of reactive forms
    5. Summary
  7. Building a Book Store Application
    1. Book Store application
    2. HTTP
      1. Making GET requests
    3. Routing
      1. Defining routes
      2. RouterOutlet Directive
        1. Named RouterOutlet
      3. Navigation
      4. Route params
      5. Animating routed components
    4. Feature modules using @NgModule()
    5. Summary
  8. Testing
    1. Testing
      1. Unit testing
      2. End-to-end testing
      3. Tooling
      4. Configuration files
    2. Jasmine basics
    3. Unit testing
      1. Isolated unit tests
        1. Writing basic isolated unit tests
        2. Testing services
          1. Mocking dependencies
        3. Testing components
      2. Integrated unit tests
        1. Testing components
        2. Testing components with dependencies
    4. Summary
  9. Angular Material
    1. Introduction
      1. Getting started
      2. Project setup
    2. Using Angular Material components
      1. Master-detail page
      2. Books list page
      3. Add book dialog
      4. User registration form
    3. Adding themes
    4. Summary