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

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