Web Development with Bootstrap 4 and Angular 2 - Second Edition

Combine the power of Bootstrap 4 and Angular 2 to build cutting-edge web apps that truly stand out from the crowd

Web Development with Bootstrap 4 and Angular 2 - Second Edition

This ebook is included in a Mapt subscription
Sergey Akopkokhyants, Stephen Radford

7 customer reviews
Combine the power of Bootstrap 4 and Angular 2 to build cutting-edge web apps that truly stand out from the crowd
$0.00
$39.99
$49.99
$29.99p/m after trial
RRP $39.99
RRP $49.99
Subscription
eBook
Print + eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781785880810
Paperback404 pages

Book Description

Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.

Inside this title you'll dive, fingers first, into the basics of both the tools, and once you're familiar with them, you'll move onto Bootstrap's new grid system and Angular's built-in directives. You'll then learn how to format output using Angular's pipes and how to make use of the built-in router to set up routes for all your components.

Webpack will be your buddy to wrap up your project. Then, after throwing in some SASS to make things pretty, you'll learn how to validate the forms you've built and debug your application. Finally, you'll go on to learn how to obtain smooth transitioning from Bootstrap to Angular and then how to hook up with a server and use Firebase as the persistence layer.

Once you're done with this book, you'll not only have a lovely little e-commerce application running, but you'll also take with you the confidence to innovate and build your own applications with ease.

Table of Contents

Chapter 1: Saying Hello!
Setting up a development environment
A TypeScript crash course
What are promises?
Angular 2 concepts
SystemJS loader and JSPM package manager
Writing your first application
Creating and bootstrapping an Angular component
Integrating Bootstrap 4
Summary
Chapter 2: Working with Bootstrap Components
Bootstrap 4
Introduction to Sass
Example project
Designing layouts with grids and containers
Using images
Using Cards
Using buttons
Navs
Navbars
Summary
Chapter 3: Advanced Bootstrap Components and Customization
How to capture a customer's attention
Products page layout
Summary
Chapter 4: Creating the Template
Diving deeper into Angular 2
Welcome page analysis
Application structure
Navigation component
Template expressions
Template statements
Data binding
Built-in directives
Structural directives
Category product component
Summary
Chapter 5: Routing
Modern web applications
Routing
The router configuration
Redirecting routes
Router outlet
Router links
Product card
Products grid component
Router change events
Routing strategies
Summary
Chapter 6: Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
ReflectiveInjector
The hierarchy of injectors
Category service
The shopping cart
Summary
Chapter 7: Working with Forms
HTML form
Bootstrap forms
Formless search
Product View
Angular 2 forms
Cart view
The Checkout View
Summary
Chapter 8: Advanced Components
Directives
The directive lifecycle
The Angular lifecycle hooks
Instantiation
Initialization
Change detection and rendering
Content projection (only for components)
After view (only for components)
Parent to child communications
Destroying
Summary
Chapter 9: Communication and Data Persistence
Client to server communication
Web API
REST
The HttpModule
The in-memory Web API
The HTTP client
The HTTP Promises
RxJS library
Observables versus promises
Observables in search-by-title
Introduction to Firebase
Connecting to Firebase
Deploying the application to Firebase
Summary
Chapter 10: Advanced Angular Techniques
Webpack
Webpack migration
Preparing our project for production
User authentication
Adding authentication in the application
Enabling authentication provider
AngularFirebase2 authentication
The ng2-bootstrap
Angular CLI
Just-in-time compilation
AOT compilation
Summary

What You Will Learn

  • Develop Angular 2 single page applications using an ecosystem of helper tools
  • Get familiar with Bootstrap’s new grid and helper classes
  • Embrace TypeScript and ECMAScript 2015 to write more maintainable code
  • Use custom directives for Bootstrap 4 with the ng2-bootstrap library
  • Understand the component-oriented structure of Angular 2 and its Router
  • Make use of the built-in HTTP library to work with API endpoints
  • Use Observables and Streams to manage the app’s data and state
  • Combine Angular 2 and Bootstrap 4 along with Firebase in the development of a solid example

Authors

Table of Contents

Chapter 1: Saying Hello!
Setting up a development environment
A TypeScript crash course
What are promises?
Angular 2 concepts
SystemJS loader and JSPM package manager
Writing your first application
Creating and bootstrapping an Angular component
Integrating Bootstrap 4
Summary
Chapter 2: Working with Bootstrap Components
Bootstrap 4
Introduction to Sass
Example project
Designing layouts with grids and containers
Using images
Using Cards
Using buttons
Navs
Navbars
Summary
Chapter 3: Advanced Bootstrap Components and Customization
How to capture a customer's attention
Products page layout
Summary
Chapter 4: Creating the Template
Diving deeper into Angular 2
Welcome page analysis
Application structure
Navigation component
Template expressions
Template statements
Data binding
Built-in directives
Structural directives
Category product component
Summary
Chapter 5: Routing
Modern web applications
Routing
The router configuration
Redirecting routes
Router outlet
Router links
Product card
Products grid component
Router change events
Routing strategies
Summary
Chapter 6: Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
ReflectiveInjector
The hierarchy of injectors
Category service
The shopping cart
Summary
Chapter 7: Working with Forms
HTML form
Bootstrap forms
Formless search
Product View
Angular 2 forms
Cart view
The Checkout View
Summary
Chapter 8: Advanced Components
Directives
The directive lifecycle
The Angular lifecycle hooks
Instantiation
Initialization
Change detection and rendering
Content projection (only for components)
After view (only for components)
Parent to child communications
Destroying
Summary
Chapter 9: Communication and Data Persistence
Client to server communication
Web API
REST
The HttpModule
The in-memory Web API
The HTTP client
The HTTP Promises
RxJS library
Observables versus promises
Observables in search-by-title
Introduction to Firebase
Connecting to Firebase
Deploying the application to Firebase
Summary
Chapter 10: Advanced Angular Techniques
Webpack
Webpack migration
Preparing our project for production
User authentication
Adding authentication in the application
Enabling authentication provider
AngularFirebase2 authentication
The ng2-bootstrap
Angular CLI
Just-in-time compilation
AOT compilation
Summary

Book Details

ISBN 139781785880810
Paperback404 pages
Read More
From 7 reviews

Read More Reviews