Welcome to ONLC Training Centers


Web Development with Bootstrap 4 and Angular 2 Course Outline

 (4 days)

Overview
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.

During this class, 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 class, 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.

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

Special Note to New Hampshire Residents
This course has not yet been approved by the State's Department of Education. Please contact us to get an update as to when the class should be available in New Hampshire.

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
Summary

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

3: Advanced Bootstrap Components and Customization
How to capture a customer's attention
Products page layout
Summary

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

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

6: Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
ReflectiveInjector
The hierarchy of injectors
Category service
The shopping cart
Summary

7: Working with Forms
HTML form
Bootstrap forms
Formless search
Product View
Angular 2 forms
Cart view
The Checkout View
Summary

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

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

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
View outline in Word

XWDBA2

Attend hands-on, instructor-led Web Development with Bootstrap 4 and Angular 2 training classes at ONLC's more than 300 locations. Not near one of our locations? Attend these same live classes from your home/office PC via our Remote Classroom Instruction (RCI) technology.

For additional training options, check out our list of Courses and select the one that's right for you.

Microsoft Gold Partner
Class Dates
(click date for class times)
(click Enroll for locations)

Fee:  $1595

Savings options:

 CEA Apps Saver
Need a price quote?

Follow the link to our self-service price quote form to generate an email with a price quote.

Email Alert

Receive an email when this class is available as "Ready to Run" or "Early Notice" status.

Attend from your office or home

If you have high-speed internet and two computers you can likely take this class from your office or home.

Need a class for a group?

We can deliver this class for a private group at your location. Follow the link to request more information.

Attend computer classes from ONLC Training Centers Request a copy via mail

GENERAL INFO

Class Format
Class Policies
Student Reviews

Bookmark and Share


HAVE QUESTIONS?
First Name

Last Name

Company

Phone

Email

Location

Question/Comment



ONLC TRAINING CENTERS
800-288-8221
www.onlc.com