Web Development with Bootstrap 4 and Angular 2

Overview

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

  • Updated for the latest releases of Angular and Bootstrap, this book shows you how to build web applications with cutting-edge web technologies
  • Combine the best of both worlds to build single page apps with elegant user interfaces
  • Build, develop, and customize your application using Angular and Bootstrap
  • Packed with tips to help you avoid potential stumbling blocks while developing

 

Web Development with Bootstrap 4 and Angular 2

 

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

 

Course Outline:

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

 

2. Working with Bootstrap Components

Bootstrap 4
Introduction to Sass
Designing layouts with grids and containers
Using images
Using Cards
Using buttons
Navs
Navbars
Content
Colors
Containers
Responsive Navbar
Responsive utilities
The Navbar content alignment

 

3. Advanced Bootstrap Components and Customization

How to capture a customer’s attention
Displaying content with Jumbotron
Typography
Displaying content with a carousel

Products page layout
Quick Shop component
Input group
Categories component
List group
Creating a product grid
Product component
Images
Tags
Button groups
Drop-down menus
Tables
Shopping cart component

 

4. Creating the Template
Diving deeper into Angular 2
Welcome page analysis
Application structure
Navigation component

Template expressions
Expression context
Template reference variable
Expression guidelines
Expression operators
Template statements

Data binding

Built-in directives
Structural directives
Category product component

 

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

 

6. Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
ReflectiveInjector

The hierarchy of injectors
Category service

The shopping cart

 

7. Working with Forms

HTML form
Bootstrap forms
Formless search
Product View
Angular 2 forms
Cart view
The Checkout View

 

8. Advanced Components

Directives
The directive lifecycle
The Angular lifecycle hooks
Instantiation
Initialization
Change detection and rendering
Content projection (only for components)
Parent to child communications
Destroying

 

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

 

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

 

 

Web Development with Bootstrap 4 and Angular 2 Training

Email : info@bigdatatraining.in

Call –: +91 97899 68765 / +91 9962774619 / 044 – 42645495

Weekdays / Fast Track / Weekends / Corporate Training modes available

Web Development with Bootstrap 4 and Angular 2 Training Also available across India in Bangalore, Pune, Hyderabad, Mumbai, Kolkata, Ahmedabad, Delhi, Gurgon, Noida, Kochin, Tirvandram, Goa, Vizag, Mysore,Coimbatore, Madurai, Trichy, Guwahati

 

On-Demand Fast track Web Development with Bootstrap 4 and Angular 2 Training globally available also at Singapore, Dubai, Malaysia, London, San Jose, Beijing, Shenzhen, Shanghai, Ho Chi Minh City, Boston, Wuhan, San Francisco, Chongqing.