Course Overview

Building Responsive Web Applications with Angular and Bootstrap is a hands-on, lab-intensive training course that teaches students the best practices for building a responsive web application that will render and function well across the full range of possible clients. The labs walk students through building an application from the ground up including saving and deleting data from the RESTful web service provided with the course. The course begins by laying out the HTML templates for the application using Bootstrap and then reviewing npm and TypeScript to ensure a solid foundation in the underlying technologies.  Next, Angular concepts including components, data binding, services, and routing are gradually introduced transforming the templates into a single-page application. The course follows the official Angular Style Guide. 

Key Learning Areas

  • Understand Mobile First Responsive Design
  • CSS Media Queries
  • Using the Bootstrap Grid System
  • Targeting by Device Size
  • Theming and Customizing Bootstrap
  • Basic Styling including Buttons, Icons, Navs
  • Using Boostrap Components including Dropdowns, Thumbnails, and Alerts
  • Understand the Angular architecture
  • Use npm as a Build Tool
  • Work with TypeScript and ES6/ES2015
  • Develop Angular Components
  • Use directives and work with data binding
  • Work with Services and Dependency Injection
  • Create and validate forms
  • Use HTTP with Observables and Promises
  • Create a single-page application using Routing
  • Setup a Project

Course Outline

  • Introduction
  • npm QuickStart
  • Responsive Design with Bootstrap
  • TypeScript and ES6/ES2015 Introduction
  • Angular Components
  • Data Binding
  • Directives
  • Service and Dependency Injection
  • Advanced Components
  • Forms
  • Form Validation
  • Data Architectures
  • HTTP
  • Routing
  • Pipes
  • Project Setup
  • Custom Pipes
  • Custom Directives
  • Angular CLI
  • Testing Angular Apps (test harness) Installation
  • Demos of other CSS frameworks that work well with Angular 2

Who Benefits

Experienced developers who want to modernize their applications using TypeScript, Angular 2 and the responsive web design techniques provided by Bootstrap.

Students who attend this course will learn the fundamentals of npm and TypeScript including how to install and use the TypeScript compiler. They will also learn to create web components with Angular 2 and services as well as create forms with validation and save data to a RESTful API.

Prerequisites

All attendees must have substantial prior experience developing with JavaScript.