Learning Web Development with Bootstrap and Angular

548 Pages·2016·6.36 MB·English

by  Sergey Akopkokhyants

Web Development with Bootstrap 4
and Angular 2 - Second Edition
Table of Contents
Web Development with Bootstrap 4 and Angular 2 - Second Edition
Credits
About the Authors
About the Reviewer
www.PacktPub.com
eBooks, discount offers, and more
Why subscribe?
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
Errata
Piracy
Questions
1. Saying Hello!
Setting up a development environment
Defining a shell
Installing Node.js
Setting up npm
Installing Git
Code editor
A TypeScript crash course
Types
Arrow function
Block scope variables
Template literals
The for-of loop
Default value, optional and rest parameters
Interfaces
Classes
Modules
Generics
What are promises?
Event loop
Asynchronous results via events
Asynchronous results via callbacks
Asynchronous results via promises
Angular 2 concepts
Building blocks of Angular 2
Module
Metadata
Directives
Attribute directives
Structural directives
Component
Template
Data binding
Service
Dependency injection
SystemJS loader and JSPM package manager
SystemJS Loader
JSPM package manager
Writing your first application
TypeScript compile configuration
Task automation and dependency resolution
Creating and bootstrapping an Angular component
Compiling and running
Adding user input
Integrating Bootstrap 4
Summary
2. Working with Bootstrap Components
Bootstrap 4
Introduction to Sass
Setting up of Ruby
Setting up of Sass
Sass crash course
Variables
Mathematical expressions
Functions
Nesting
Imports
Extends
Placeholders
Mixins
Function directives
Example project
The scenario
Gathering customer requirements
Preparing use-cases
Welcome page
Products page
Products page
Cart page
Checkout page
Designing layouts with grids and containers
Using images
Using Cards
Using buttons
General button styles
Outline button styles
Button sizes
Block level button styles
The button with active style
The button with inactive state
Radio buttons and checkboxes
Navs
The base Nav
Inline navigation
Tabs
Pills
Stacked pills
Navigation with dropdowns
Navbars
Content
Colors
Containers
Responsive Navbar
Responsive utilities
The Navbar content alignment
Summary
3. Advanced Bootstrap Components and Customization
How to capture a customer's attention
Displaying content with Jumbotron
Typography
Headings
Sub-headings
Display headings
Lead
Inline text elements
Abbreviations
Blockquotes
Address
Displaying content with a carousel
Carousel container
Carousel inner
Carousel item
Carousel indicators
Carousel controls
Products page layout
Quick Shop component
Input group
Text addons
Sizing
Checkboxes and radio option addons
Button addons
Dropdown menu addons
Segmented buttons
Categories component
List group
Listing with tags
Linked list groups
Button list groups
Contextual classes
Custom content
Creating a product grid
Nested rows
Product component
Images
Responsive images
Image shapes
Image alignment
Tags
Button groups
Sizing
Button toolbars
Nesting dropdowns
Vertical button groups
Dropdown menus
Dropdown containers
Dropdown triggers
Dropdown menus with items
Menu alignment
Menu headers and dividers
Menu dividers
Disabling menu items
Tables
table-inverse
Striped rows
Bordering tables
Making rows hoverable
Table head options
Making table smaller
Contextual classes
Responsive tables
Reflowing tables
Shopping cart component
Summary
4. Creating the Template
Diving deeper into Angular 2
Welcome page analysis
Single responsibility principle
Naming conventions
Barrels
Application structure
Folders-by-feature structure
Shared folder
Navigation component
Decorators
Tree of components
NavItem object
Template expressions
Expression context
Template reference variable
Expression guidelines
Expression operators
The Elvis operator
The pipe operator
The custom pipes
Template statements
Statement context
Statement guidelines
Data binding
HTML attributes versus DOM properties
Interpolation
Property binding
Attribute binding
Class binding
Style binding
Event binding
Custom events
Two-way data binding
Built-in directives
NgClass
NgStyle
NgIf
NgSwitch
NgFor
Structural directives
Custom structural directive
Category product component
Summary
5. Routing
Modern web applications
Routing
Routing path
Installing the router
The base URL
The Angular router
The router configuration
Creating basic routes
Query parameters
Router parameters
Route versus query parameters
Register routing in bootstrap
Redirecting routes
Router outlet
Welcome View
The footer component
The category data
Category card view
The product data
Products View
Quick shop component
List of categories component
Update the CategoryModule
Router links
Product card
Products grid component
Card groups
Card columns
Card desks
Combine them all together
The product module
Update the AllModule
Router change events
Routing strategies
Summary
6. Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
Constructor injection
Other injection methods
Components versus services
ReflectiveInjector
Injectable decorator
Inject decorator
Optional decorator
Configuring the injector
Class providers
Aliased class providers
Value providers
Multiple values
Factory providers
The hierarchy of injectors
Category service
Injector provider for category service
Product service
Injector provider for product service
The shopping cart
The Cart model and CartItem
The CartService
The Cart menu component
Cart module
Update the Navbar
Update the Cart via Service
Summary
7. Working with Forms