Web Development with Angular and Bootstrap: Embrace responsive web design and build adaptive Angular web applications

Description

Cover Title Page Copyright and Credits Dedication About Packt Contributors Table of Contents Preface Chapter 1: Quick Start Angular's evolution Angular's building blocks Components Templates Directives Modules Services Dependency injection Setting up your development environment Writing your first Angular application Using your development environment Location of your files Generating our to-do list application Serving up our to do list application Angular basics Components Code listing for the to-do list application Interpolation Templating and styling Property binding Event binding Our sample project Annotated photo album Design principles Wireframes Wireframing tools Wireframes for our annotated photo album Home page Dashboard Image upload Photo preparation Create Album Photo listing Photo album listing Workbench Album viewer Paper prototyping Summary Chapter 2: ECMAScript and TypeScript Crash Course The (quick) roadmap The relationship between JavaScript and TypeScript A series of fortunate events for JavaScript Chromium project Javascript frameworks ECMAScript 2015 TypeScript crash course Transpilation versus compilation  let Const Data typing Objects  JSON  JavaScript runtime environment Arrays TypedArray Maps  WeakMap Set WeakSet Classes Interfaces Inheritance Destructuring  Template strings for-of loop Decorators Promises Modules Default exports Summary Chapter 3: Bootstrap - Grid Layout and Components A word about what this chapter is not Our example application Game plan Sass crash course What is Sass? Compass framework Two SASS styles Installing Ruby  Installing Sass Online tools for Sass Offline tools for Sass Sass features and syntax Nesting Variables Mathematical operations Imports Extend Mixins Placeholders Built-in functions  Custom functions Bootstrap crash course What is Bootstrap? Motivation Bootstrap's role in our example application Installing Bootstrap Bootstrap's responsive grid system The container The row The column Differing viewport sizes Bootstrap components Button components Alert components Navbar component Modal components Listing Carousel – a formal introduction Idea generation/concept Analysis — feasibility study Requirement gathering Wireframes Implementation Installing our interim web server Welcome page Signup Login Listings Create listing Edit listing Wireframes collection Summary Chapter 4: Routing What is routing in Angular? Creating our application's shell using the CLI First things first – basic concepts Base Href RouterLink and RouterLinkActive Configuring routes for our application Parameterized routes Child routes Route guards Completing our route configuration Bootstrap navigation bar and router links directives Specifying the location for rendering the component templates Running our application Routing strategies Summary Chapter 5: Flex-Layout - Angular's Responsive Layout Engine Why this chapter was included in the book The four available techniques for the layout of our components Table Positioning using float, and clear FlexBox CSS CSS Grid Why FlexBox CSS is probably the best option What is Flex-Layout and why should you use it? Integrating Flex-Layout The Flex-Layout API Design strategies when using FlexBox Associating our components with the chapters and topics in this book Implementing our selected wireframes The Create Listing wireframe The Edit Listing wireframe Summary Chapter 6: Building Angular Components Angular application architecture – a tree of components Architecting an Angular application Breaking up your components into sub-components Component responsibilities Annotations  @Component Properties of the @Component decorator selector template and templateUrl styles and stylesUrls View encapsulation Module versus NgModule Properties of the @NgModule decorator Content projection Projecting multiple sections Life cycle hooks Most common life cycle hooks Component interface – inputs and outputs, and the flow of data Our implementation of the components for our three pages Summary Chapter 7: Templates, Directives, and Pipes Templates Directives Attribute directives Structural directives NgFor Accessing the index value of the iteration Built-in directives NgIf NgSwitch, NgCase, and NgDefault NgStyle NgClass NgNonBindable Data binding using the NgModel directive Event binding Property binding Custom directives Pipes Custom pipes Summary Chapter 8: Working with NG Bootstrap Integrating NGB  Installing NBG Why use NGB? Creating our playground for NGB (and Angular Material, and more) Creating a playground directory Creating the playground component class Creating the playground template file Creating the playground CSS file Creating the playground menu item NGB widgets Collapse Our parent component Our NGB collapse component class Our NGB collapse component template Importations and declarations  Modal Our NGB modal component class Our NGB modal component template Importations and declarations  Carousel Our NGB carousel component class Our NGB carousel component template Implementing NGB into our example application UX design rules of thumb Keep it clean Keep it functional Keep it obvious Summary Chapter 9: Working with Angular Material What is Angular Material? Installing Angular Material Categories of components Navigation Navigation components using schematics Custom Material menus and navigation Custom sidebar menus Cards and layout  Material cards Lists Lists with dividers Navigation lists Accordions and expansion panels Steppers Tabs Form controls Buttons and indicators Popups and modals Data tables Summary Chapter 10: Working with Forms Bootstrap forms What are forms? Bootstrap form classes  Bootstrap form classes – extended  Sizing Readonly Inline forms Forms using Bootstrap grid classes Disabled  Help text inside forms Displaying input elements as plain text Angular forms Template-driven forms Template-driven forms – pros Template-driven forms – cons Template-driven forms – important modules Building our login form Model-driven forms, or reactive forms Model-driven forms – pros Model-driven forms – cons Model-driven forms – important modules Reactive forms – registration form example Angular form validations Template-driven form validation Reactive form, or model-driven form, validations Submitting form data  Summary Chapter 11: Dependency Injection and Services What is DI? Generating services and interfaces Guarding against code minification Summary Chapter 12: Integrating Backend Data Services ListingApp – an overview Fundamental concepts for Angular applications Strongly typed languages Typescript interfaces Observables NoSQL databases concept CRUD operations – overview ListingApp – technical requirements Building APIs for ListingApp Google Firestore database Angular HttpClient HttpClient and HTTP verbs HTTP GET HTTP POST HTTP PUT HTTP DELETE HTTP via promises Integrating backend services  Integrating Angular HTTP with backend APIs Integrating Angular HTTP with Google Firebase Summary Chapter 13: Unit Testing Introduction to testing frameworks About the Jasmine framework About the Karma framework Angular test automation Testing Angular components Testing directives Testing Angular routing Testing dependency injection What is dependency injection? Testing Angular services Testing HTTP Summary Chapter 14: Advanced Angular Topics Custom directives Custom form validations Building single-page applications User authentication User authentication with Firebase User authentication with Auth0 Summary Chapter 15: Deploying Angular Applications Deploying Angular applications Compilation options for Angular applications What is just-in-time compilation? What is ahead-of-time compilation?  Deploying a standalone Angular application Deploying composite Angular applications Creating and deploying multiple Angular applications Packing the Angular project as an npm package Deploying Angular apps to GitHub Pages Creating and deploying applications in GitHub Pages Summary Other Books You May Enjoy Index