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