Cover image for Learning Angular - Second Edition

Learning Angular - Second Edition

Author Pablo Deeleman , Christoffer Noring
Release Date: 2017/12/01
ISBN: 9781787124929
Topic:
0%
386
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Build modern SPAs by learning the latest and powerful features of Angular 5 and TypeScript 2.x

About This Book

  • The best overview of Angular 5 on the market, this guide gathers together everything there is to know about Angular 5 and groups it into intuitive sections.
  • Learn to build, grow and test powerful and scalable mobile and desktop web applications with Angular
  • Explore the latest features of Angular 5 and TypeScript 2.4 by building a complete responsive application from scratch.
  • Deliver seamless web navigation experiences with application routing and state handling common features with ease
  • The author has done all the hard work of fitting everything Angular 5 means for developers, making this book the quickest way to learn Angular 5 from scratch.

Who This Book Is For

This book is for web developers who want to build the next generation of state-of-the-art mobile and desktop web applications with Angular. This book does not require you to have prior exposure to either Angular 1.x, 2 or 4, although comprehensive knowledge of JavaScript is assumed.

What You Will Learn

  • Set up the workspace and the project using webpack and Angular-Cli
  • Explore the features of TypeScript and organize the code in ES6 modules
  • Work with HTTP and Data Services and understand how data can flow in the app
  • Create multiple views and learn how to navigate between them
  • Make the app beautiful by adding Material Design
  • Implement two different types of form handling and its validation
  • Add animation to some standard events such as route change, initialization, data load, and so on
  • Discover how to bulletproof your applications by introducing smart unit testing techniques and debugging tools

In Detail

The latest version of Angular comes with a lot of new features that help you to make your applications smaller and faster. This book will show you how to set up an Angular project, and you’ll build Angular components right from the beginning.

Moving on, you’ll explore and work with the components to build your app. Next, you’ll find out more about TypeScript and see how to use it to build apps in the best way possible. You’ll then be introduced to the building blocks - Properties, Events, Directives, and Pipes - and how it can be used to implement and enhance the components.

Additionally, you’ll be using Angular components to organize your components in a scalable way. Then you’ll understand how to get data in your app and add navigation to it. Furthermore, you’ll deep dive and work with Forms, Authentication, and see how Material design will help you make your app beautiful in just a few short lines of code. Lastly, you’ll see how to use animating components with Angular, and test and debug the app.

All in all, the overall mission is to give you a great start when developing apps using Angular and TypeScript.

Style and approach

This book tells you everything there is to know about getting well-acquainted with Angular without bogging you down. Everything is neatly laid out under clear headings for quick consultation, giving you the information required to understand a concept immediately. You’ll also get full coverage of the TypeScript syntax required to follow the examples included.

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. Downloading the color images of this book
      3. Errata
      4. Piracy
      5. Questions
  2. Creating Our First Component in Angular
    1. It's just Angular – introducing semantic versioning
      1. Patch change
      2. Minor change
      3. Major change
      4. What about Angular?
    2. A fresh start
      1. Web components
      2. Why TypeScript over other syntaxes?
    3. Setting up our workspace with Angular CLI
      1. Prerequisites
      2. Installation
      3. First app
      4. Testing
    4. Hello Angular
      1. Creating the component
        1. Selector
        2. Template/templateUrl
        3. Telling the module
      2. Setting up a bootstrap file
    5. Diving deeper into Angular components
      1. Component methods and data updates
        1. Going from static to actual data
      2. Adding interactivity to the component
      3. Improving the data output
    6. Summary
  3. IDEs and Plugins
    1. IDEs
      1. Atom
      2. Sublime Text 3
      3. Webstorm
      4. Visual Studio Code
    2. Summary
  4. Introducing TypeScript
    1. Understanding the case for TypeScript
      1. The benefits of TypeScript
      2. Introducing TypeScript resources in the wild
        1. The TypeScript official site
        2. The TypeScript official wiki
    2. Types in TypeScript
      1. String
        1. Declaring our variables – the ECMAScript 6 way
      2. The let keyword
      3. Const
      4. Number
      5. Boolean
      6. Array
      7. Dynamic typing with the any type
      8. Custom type
      9. Enum
      10. Void
      11. Type inference
    3. Functions, lambdas, and execution flow
      1. Annotating types in our functions
      2. Function parameters in Typescript
        1. Optional parameters
        2. Default parameters
        3. Rest parameters
        4. Overloading the function signature
      3. Better function syntax with and scope handing with lambdas
    4. General features
      1. Spread parameter
      2. Template strings
      3. Generics
    5. Classes, interfaces, and class inheritance
      1. Anatomy of a class – constructors, properties, methods, getters, and setters
      2. Constructor parameters with accessors
      3. Interfaces in TypeScript
      4. Extending classes with class inheritance
    6. Decorators in TypeScript
      1. Class decorators
        1. Extending the class decorator function signature
      2. Property decorators
      3. Method decorators
      4. Parameter decorator
    7. Organizing our applications with modules
      1. Internal modules
      2. External modules
        1. ES6 like modules per TypeScript > 1.5 
    8. Summary
  5. Implementing Properties and Events in Our Components
    1. A better template syntax
      1. Data bindings with input properties
      2. Some extra syntactic sugar when binding expressions
      3. Event binding with output properties
      4. Input and output properties in action
        1. Setting up custom values declaratively
        2. Communicating between components through custom events
      5. Emitting data through custom events
      6. Local references in templates
      7. Alternative syntax for input and output properties
    2. Configuring our template from our component class
      1. Internal and external templates
      2. Encapsulating CSS styling
        1. The styles property
        2. The styleUrls property
        3. Inline style sheets
      3. Managing view encapsulation
    3. Summary
  6. Enhancing Our Components with Pipes and Directives
    1. Directives in Angular
      1. Core directives
        1. NgIf
        2. NgFor
          1. Advanced looping
        3. Else
        4. Applying style
          1. Interpolation
          2. NgStyle
          3. NgClass
        5. NgSwitch, ngSwitchCase, and ngSwitchDefault
    2. Manipulating template bindings with pipes
      1. The uppercase/lowercase pipe
      2. The decimal, percent, and currency pipes
        1. The decimal pipe
        2. The percent pipe
        3. The currency pipe
      3. The slice pipe
      4. The date pipe
      5. The JSON pipe
      6. The i18n pipes
        1. The i18nPlural pipe
        2. The i18nSelect pipe
      7. The async pipe
    3. Putting it all together in a task list
      1. Setting up our main HTML container
      2. Building our task list table with Angular directives
      3. Toggling tasks in our task list
      4. Displaying state changes in our templates
      5. Embedding child components
    4. Building our own custom pipes
      1. Anatomy of a custom pipe
        1. Imports
        2. Defining our pipe
        3. Registering it
        4. The pure property
      2. A custom pipe to better format time output
      3. Filtering out data with custom filters
    5. Building our own custom directives
      1. Anatomy of a custom directive
        1. Listening to events
        2. Adding input data
          1. Adding more than one input property
      2. A second example – error validation
      3. Building a task tooltip custom directive
    6. A word about naming conventions for custom directives and pipes
    7. Summary
  7. Building an Application with Angular Components
    1. Introducing the component tree 
    2. Common conventions for scalable applications
      1. File and ES6 module naming conventions
      2. From facades/barrels to NgModule 
        1. Using NgModule
    3. How dependency injection works in Angular
      1. A note on providers
      2. Injecting dependencies across the component tree
        1. Restricting dependency injection down the component tree
        2. Restricting provider lookup
      3. Overriding providers in the injector hierarchy
      4. Extending injector support to custom entities
      5. Initializing applications with bootstrapModule()
        1. Switching between development and production modes
          1. Different modes in Angular CLI
    4. Introducing the app directory structure
    5. Refactoring our application the Angular way
      1. The shared context or store it all in a common module
        1. Services in the shared context
        2. Configuring application settings from a central service
      2. Putting it all together in our shared module
      3. Creating our components
        1. Introduction to life cycle hooks
          1. OnInit - the beginning of it all
          2. OnDestroy - called when a component is removed from a DOM tree
          3. OnChanges - a change has occurred
        2. The timer feature
        3. The tasks feature
        4. Defining the top root component
    6. Summary
  8. Asynchronous Data Services with Angular
    1. Strategies for handling asynchronous information
      1. Asynchronous response - from callbacks to promises
      2. Observables in a nutshell
    2. Reactive functional programming in Angular
      1. The RxJS library
    3. Introducing the HTTP API
      1. Working with headers
      2. Handling errors when performing HTTP requests
      3. Injecting the HttpClient service
    4. A real case study – serving Observable data through HTTP
      1. Leveraging HTTP – refactoring our TaskService to use HTTP service
        1. Using the Angular HTTP service
      2. A stateful TaskService for most scenarios
      3. Further improvements – turning TaskService into a stateful, more robust service 
        1. Handling service calls when network connection intermittently goes offline
        2. Introducing the store/feed pattern
        3. Persisting data
        4. Refreshing our service
      4. HttpInterceptor
        1. Creating a mock interceptor
    5. Some best practices
      1. Async operator
      2. Being a good citizen – cleaning up after yourself
    6. Summary
  9. Firebase
    1. Three-way binding versus two-way binding
    2. Some words on storage - the problem with a list
      1. Objects in a list - solving the deletion problem
    3. AngularFire2
      1. The core classes
    4. The admin tools
      1. Defining your database
    5. Adding AngularFire2 to your app
    6. Protecting our app
      1. Authentication - allowing access to the app
      2. Authorization - deciding who gets to access what data, and how
      3. Validation
    7. Working with data - CRUD
      1. Reading data
      2. Changing data
      3. Removing data
        1. Removing an object
        2. Removing an item in a list
    8. Responding to change
    9. Adding authentication
      1. Simple authentication with email/password
    10. Summary
  10. Routing
    1. Adding support for the Angular router
      1. Specifying the base element
      2. Importing and setting up the router module
        1. Defining the routes
        2. Defining a viewport
    2. Building a practical example – setting up the router service
      1. Building a new component for demonstration purposes
        1. Cleaning up the routes
      2. The router directives – RouterOutlet, RouterLink, and RouterLinkActive
      3. Triggering routes imperatively
    3. Handling parameters
      1. Building detail pages – using route parameters
      2. Filtering your data – using query parameters
    4. Advanced features
      1. Child routes
      2. Absolute versus relative navigation
      3. Named outlets
      4. Debugging
      5. Fine-tuning our generated URLs with location strategies
    5. Securing the routes with AuthGuard and CanActivate hook
    6. Resolve<T> – fetching and resolving data before routing
    7. The CanDeactivate – handling cancel and save
    8. Async routing – improving response time
      1. Lazy loading
        1. CanLoad – don't lazy load unless the user has access
      2. Preloading
    9. Summary
  11. Forms in Angular
    1. Template-driven forms
      1. Turning a simple form into a template-driven form
        1. Input field error – from a CSS standpoint
        2. Detecting an error on an input field with named references
      2. Improving the form 
        1. Showing errors at the right time
    2. Reactive forms
      1. AbstractControl
      2. Programmatic and dynamic approach
      3. Turning a form into a dynamic form
      4. Adding controls with validation rules
      5. Refactoring – making the code more dynamic
      6. Updating our component form model – using setValue and patchValue
        1. setValue
        2. patchValue
      7. Cleaning up our form creation and introducing FormBuilder
      8. Building your own custom validator
      9. Watching state changes and being reactive 
    3. Summary
  12. Angular Material
    1. Material Design
      1. Known implementations
    2. Angular Material
      1. Installation
        1. Our first Angular Material app
    3. Component overview
      1. Buttons
      2. Form controls
        1. Input
        2. Autocomplete
        3. Checkbox
        4. Date picker
      3. Navigation
        1. Menu
      4. Layout
        1. List
        2. Grid list
      5. Popups and modals
        1. Dialog
          1. A more advanced example – sending data to and from your dialog
      6. Data table
        1. Table
        2. Sorting
        3. Pagination
    4. Summary
  13. Animating Components with Angular
    1. Creating animations with plain vanilla CSS
    2. Introducing Angular animations
      1. Our first trigger
        1. Connecting the parts
        2. The wildcard state
        3. The void state
      2. Animation callbacks
    3. Animating components with the AnimationBuilder
      1. Creating a reusable animation directive
    4. Summary
  14. Unit Testing in Angular
    1. Why do we need tests?
    2. The anatomy of a unit test
    3. Introduction to testing in Angular
      1. Configuration and setting up
      2. Angular testing utilities
    4. Introduction to component testing
    5. Component testing with dependencies
      1. Using a stub to replace the dependency
      2. Spying on the dependency method
      3. Async services
    6. Testing pipes
    7. Mocking HTTP responses with HttpClientTestingController 
    8. Input and outputs
    9. Testing routing
      1. Testing navigation
      2. Testing routes by URL
      3. Testing route parameters 
    10. Testing directives
    11. The road ahead
      1. Introducing code coverage reports in your test stack
      2. Implementing E2E tests
    12. Summary
  15. SystemJS
    1. SystemJS introduction
    2. A flying start with the quickstart repository
    3. Understanding the parts
      1. The essential concepts that makes out any Angular project set up with SystemJS
        1. Starter web page - index.html
        2. Core files - that Angular is dependent on 
          1. core-js
          2. zone.js
          3. rxjs
        3. SystemJS - our module loader
        4. Node.js setup - package.json
        5. TypeScript setup
    4. Summary
  16. Webpack with Angular
    1. Core concepts
      1. Loaders
      2. Plugins
    2. Webpack - first project
      1. Improving our project - using a configuration file
    3. Adding more capabilities to our project
      1. Creating several bundles
    4. Setting up Angular with webpack
      1. Common configuration
    5. Dev configuration
      1. Production configuration
      2. Testing
    6. Summary