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