Expert Angular

Expert Angular

by Mathieu Nayrolles, Rajesh Gunasundaram, Sridhar Rao
Released July 2017
Publisher(s): Packt Publishing
ISBN: 9781785880230

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn everything you need to build highly scalable, robust web applications using Angular release 4

About This Book

  • Apply best practices and design patterns to achieve higher scalability in your Angular applications
  • Understand the latest features of Angular and create your own components
  • Get acquainted with powerful, advanced techniques in Angular to build professional web applications

Who This Book Is For

This book is for JavaScript developers with some prior exposure to Angular, at least through basic examples. We assume that you've got working knowledge of HTML, CSS, and JavaScript.

What You Will Learn

  • Implement asynchronous programming using Angular
  • Beautify your application with the UI components built to the material design specification
  • Secure your web application from unauthorized users
  • Create complex forms, taking full advantage of 2-way data binding
  • Test your Angular applications using the Jasmine and Protractor frameworks for better efficiency
  • Learn how to integrate Angular with Bootstrap to create compelling web applications
  • Use Angular built-in classes to apply animation in your app

In Detail

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.

Style and approach

This book provides comprehensive coverage of all aspects of development with Angular. You will learn about all the most powerful Angular concepts, with examples and best practices. This book is everything you need for the deep understanding of Angular that will set you apart from the developer crowd.

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. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Architectural Overview and Building a Simple App in Angular
    1. Angular architecture
      1. NgModules
      2. Components
      3. Templates
      4. Metadata
      5. Data Binding
      6. Directives
      7. Services
      8. Dependency Injection
    2. Basics of TypeScript
      1. Basic types
        1. Number type
        2. Boolean type
        3. String
        4. Array
        5. Enum
        6. Any
        7. Void
      2. Classes
      3. Interfaces
        1. Optional properties using an interface
        2. Function type interfaces
        3. Array type interfaces
        4. Class type interfaces
        5. Extending interfaces
        6. Hybrid type interfaces
      4. Inheritance
        1. Inheritance in TypeScript
      5. Private and public modifiers
      6. Accessors
      7. Static properties
      8. Modules
        1. Namespaces
        2. Modules
      9. Functions
        1. Optional and default parameters
      10. Rest parameter
      11. Generics
        1. Generic interfaces
        2. Generic classes
      12. Decorators
        1. Class decorators
        2. Method decorators
        3. Accessor decorators
        4. Property decorators
        5. Parameter decorators
    3. Building a simple application
    4. Summary
  3. Migrating AngularJS App to Angular App
    1. Migration process
    2. Syntax difference between Angular and AngularJS
      1. Local variables and bindings in templates
      2. Filters and pipes in templates
      3. Local variables in templates
      4. Angular app directives
      5. Handling the CSS classes
      6. Binding click event
      7. Controllers and components in templates
    3. Benefits of upgrading to Angular
      1. Strategies to upgrade to Angular
    4. Rules for incremental upgrade to Angular
    5. Incremental upgrading using UpgradeAdapter
      1. Injecting AngularJS dependencies to Angular
      2. Injecting Angular dependencies to AngularJS
    6. Components migration
    7. Roadmap from AngularJS to Angular
      1. JavaScript to TypeScript
      2. Installing Angular packages
      3. Creating the AppModule
      4. Bootstrapping your application
      5. Upgrading application services
      6. Upgrading your application component
      7. Adding the Angular router
    8. Summary
  4. Using Angular CLI to Generate Angular Apps with Best Practices
    1. Introducing Angular CLI
    2. Installing and setting up Angular CLI
    3. Generating code for a new application
    4. Generating components and routes
      1. Routes
    5. Generating services
    6. Generating directives and pipes
      1. Pipes
    7. Creating builds targeting various environments
    8. Running tests for your application
    9. Updating Angular CLI
    10. Summary
  5. Working with Components
    1. Components 101
      1. A basic root component
      2. Defining child components
    2. Component life cycle
    3. Communicating and sharing data between components
      1. Referencing child components from a parent component
        1. Template reference variables
        2. Injecting child components
      2. Using services with components
    4. Summary
  6. Implementing Angular Routing and Navigation
    1. Importing and configuring the router
      1. Building blocks of router
        1. About router LocationStrategy
        2. Handling the error state - wildcard route
    2. Route Guards
      1. Custom component routes and child routes
    3. Custom component routes with inner child routes
      1. Integrating all the components together
      2. Demo application routing and navigation
    4. Summary
  7. Creating Directives and Implementing Change Detection
    1. Angular Directives
    2. Component Directives
    3. Structural Directives
      1. ngFor directive
      2. ngIf directive
      3. ngSwitch directive
    4. Attribute Directives
      1. Built-in Attribute Directives
        1. Creating custom directives - Structural and Attribute Directives
          1. Angular CLI - generating the directives
          2. Creating custom Attribute Directives
          3. Creating custom Structural Directives
    5. Implementing change detection in Angular
      1. Change detection - Angular and ZoneJS
        1. Change detection strategy
          1. ChangeDetectionStrategy - Default
          2. ChangeDetectionStrategy - OnPush
          3. Advantages of ChangeDetectionStrategy - OnPush
    6. Summary
  8. Asynchronous Programming Using Observables
    1. Observer patterns
      1. TypeScript Observable
      2. TypeScript Observable with parameters
    2. Observing HTTP responses
      1. Implementation
      2. Understanding the implementation
    3. Promises
    4. Summary
  9. Template and Data Binding Syntax
    1. Learning about Template Syntax
      1. Various ways to include Template Syntax
        1. Using inline Template Syntax
        2. Using templateURL to include a template
      2. Interpolation in templates
      3. Template expressions in Angular
      4. Attaching events to views in templates
      5. Implementing directives inside templates
      6. Bindings in the template
    2. Angular Data Binding
      1. One-way Data Binding - Data source to view
      2. One-way Data Binding - View template to data source
      3. Angular Two-way Data Binding
    3. Summary
  10. Advanced Forms in Angular
    1. Getting started
    2. Reactive forms
    3. Using FormBuilder
    4. Adding validations
    5. Custom validation
    6. Two-way Data Binding with ngModel
    7. Keeping things neat (extra credit)
    8. Summary
  11. Material Design in Angular
    1. Installing the package
    2. Responsive layout
    3. Material icons
      1. Buttons
      2. Menu
      3. Toolbars
      4. Dialogs
      5. Side navigation drawers
    4. Theming
    5. Summary
  12. Implementing Angular Pipes
    1. Angular Pipes - An overview
    2. Defining a pipe
      1. Built-in Pipes
        1. DatePipe
        2. DecimalPipe
        3. CurrencyPipe
        4. LowerCasePipe and UpperCasePipe
        5. JSON Pipe
        6. SlicePipe
        7. async Pipe
    3. Parameterizing pipes
    4. Chaining pipes
    5. Creating custom pipes
      1. Pure and Impure Pipes
        1. Pure Pipes
        2. Impure Pipes
    6. Summary
  13. Implementing Angular Services
    1. Why use a service or factory?
    2. Creating a service
    3. Accessing data from components using services
      1. Implementing services
      2. Consuming the service
    4. Creating an asynchronous service
      1. What is a Promise?
      2. Using a Promise in a service
    5. Summary
  14. Applying Dependency Injection
    1. Applications without Dependency Injection
    2. Dependency Injection - Introduction
      1. Understanding provider classes
      2. Understanding hierarchical DI
        1. Overview - Hierarchical components and DI
      3. Creating an injectable
    3. Registering providers
      1. Registering providers inside the component
      2. Provider classes with dependencies
      3. Using @Inject, provide, and useValue
    4. Summary
  15. Handling Angular Animation
    1. Introduction to Angular animations
      1. Installing the Angular animations library
      2. Angular animation - Specific functions
        1. Trigger
        2. States
        3. Transitions
      3. Animating page transitions
        1. One more example - Angular animations
        2. Using keyframes - Sequence of styles
      4. Animate collapse menu
    2. Summary
  16. Integrating Bootstrap with Angular Application
    1. Installing Bootstrap
    2. Understanding the grid system
    3. Using Bootstrap directives
      1. Accordion
      2. Alert
      3. Datepicker
      4. Tooltip
      5. Progress bar
      6. Rating
    4. Summary
  17. Testing Angular Apps Using Jasmine and Protractor Frameworks
    1. Concepts in testing
    2. Understanding and setting up Angular CLI for testing
    3. Introduction to Jasmine framework
      1. The Jasmine framework - Global methods we can use
        1. Commonly used methods in Jasmine
        2. Angular CLI and Jasmine framework - First test
        3. Testing Angular components with Jasmine
      2. Testing Angular components with Jasmine
      3. Testing Angular components - Advanced
        1. TestBed
        2. Example - Writing test scripts with change detection
      4. Testing Angular services
      5. Testing Angular services - Mocking backend services
    4. Introduction to Protractor framework
      1. Protractor - A quick overview
        1. Protractor and DOM
        2. Some methods available to select element(s)
        3. Exploring the Protractor API
        4. Protractor - First steps
      2. Writing E2E tests using Protractor
      3. Writing E2E tests using Protractor - Advanced
    5. Summary
  18. Design Patterns in Angular
    1. Model-View-Controller (MVC)
      1. MVC at large
      2. MVC limitations for the frontend
      3. Angular is MVC
    2. Singleton and Dependency Injection
    3. Prototype and reusable pool
    4. Factory pattern
    5. Memento pattern
    6. Summary

Product information

  • Title: Expert Angular
  • Author(s): Mathieu Nayrolles, Rajesh Gunasundaram, Sridhar Rao
  • Release date: July 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781785880230