Web Development with Angular 2 and Bootstrap [Video]

Web Development with Angular 2 and Bootstrap [Video]

This video is included in a Mapt subscription
Tarun Sharma

Become an ace at creating stunning Angular2 applications using Bootstrap
$0.00
$106.25
$39.99p/m after trial
RRP $124.99
Subscription
Video
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

Video Details

ISBN 139781785889646
Course Length5 hours 40 minutes

Video Description

Angular 2 is a game changer in the field of web development and enables you to efficiently architect large-scale and maintainable software. It has everything from a powerful view engine to an exceptional data binding framework and a design that embraces modern web development. Bootstrap allows users to quickly get started developing professional-looking responsive web applications. With both joining forces, we burst into modern web development with the very best of development and design.

This course demonstrates how to write dynamic, feature-rich Angular 2 applications with Bootstrap's responsive layouts and end-to-end testing techniques. We will set up our development environment with Angular 2 and ES6 with TypeScript. In Angular 2, everything is a component using TypeScript annotations. This course takes a component-centric approach, using them as the main point of discussion to help you learn the core concepts in Angular 2. You'll also get to grips with Bootstrap to create and design web applications that are elegantly styled with a responsive user interface.

If you have been building applications with 1.x versions of Angular, this course will also lay down the migration steps required to port your application to the newer version without disrupting the functionalities. Throughout this course, you will learn about the advanced features of Angular 2 such as components, views, event handlers, directives, dependency injection, services, routing, and data binding using Bootstrap styling. Finally, we'll end the course by implementing all that you've learned using Angular 2 web components and BootstrapUI.

By the end of the course, you’ll be ready to start building quick and efficient applications with a stunning interface that takes advantage of all the new features on offer from both Angular 2 and Bootstrap. 

Style and Approach

This hands-on course is packed with helpful coding examples, and with each section you will uncover the new concepts of Angular 2 while building an incredibly polished application using Bootstrap. It’s like a pair programming session with the author!

Table of Contents

Getting Started with Angular 2.0
The Course Overview
Angular 2.0 Versus Angular 1.0
Installation and Setup for Angular 2.0 with TypeScript ES6
A “Hello world” Application Using Angular 2.0
Bootstrap Components and Styling
Bootstrap Installation and Setup
Bootstrap Fluid Responsive Layout with Grid System
Bootstrap Responsive .navbar Header and .navbar Tabs
Bootstrap Table, List, Form, and Glyph Icons and Responsive Utilities
Bootstrap Carousel with Bootstrap Panel, Accordion, and Tab Menu
Creating Demo Application Structure Using Bootstrap Component
Understanding Typescript, Module Loaders, and Transpilers
Writing an Application Using Typescript/ES5/ES6
Typescript as a Language for Angular 2
Understanding Universal Module Loader System JS
Understanding webpack Module Loader
Loaders and Transpilers using NPM Package Manager
Typescript@ annotations for Components, Views, and Directives
Hands-On on Our Application
Understanding Features of ES6 ES2015
Scope of Variables using let and const
Template Literals and Default Arguments
Spread Operator, Rest Parameter, and De-Structuring
Arrow Function and Lexical This Binding
ES6 Classes and Inheritance
ES6 Modules Import and Export
Asynchronous Processing with ES6 Native Promises
Iterators and Generators in ES6
Angular 2 Modules, Components, Templates, Metadata, and Architecture
Angular 2 Application Architecture
Angular Modules and Components
Angular 2 Modules: @Ng Module
Angular Components Nesting and Templates
Angular Web Component and View Encapsulation
Angular Component Metadata
Angular Component Communication Input and Output
Angular Component Building for Application
Data Binding, Events, and pipes in Angular 2
Angular 2 - Property binding
DOM events and event binding
Two-way data binding in Angular app
Attribute directives and structural directives
Pipes in Angular 2
Angular component Lifecycle Hooks
Application development with data binding, pipes, and directives
The Dependency Injection and Inversion of Control Patterns
Dependency Injection and Inversion of Control Patterns
Injector and Providers @inject @injectable
Building And Registering a Service
Dependency Injection with Angular 2 Application
Angular 2 Understanding Routing Basics, Observable Objects, and Immutable Objects
Angular 2 Understanding Routing Basics, Observable Objects, and Immutable Objects
Route Architecture with Route Linking and Redirection
Angular 2.0 Understanding Child Routes and Route Param
Securing Routes and Location Strategy
Routing with Angular 2 Demo Application
Understanding Angular 2 Forms
Angular 2 Template Driven forms
Template-driven forms with Validation
Model-driven Forms or Reactive Forms
Model-driven Forms with Validations
Angular 2 Application Development with Forms
Reactive Programming in Angular 2 RX Observables
Angular 2.0 Understanding Reactive Functional Programming
Scheduling Cron Jobs
Observables with HTTP service in Angular 2
Observables with Angular Forms in Angular 2
Observables and RX JS with Angular 2Application

What You Will Learn

  • Understand the changes made from Angular 1.x with side-by-side code samples to help demystify the Angular 2 learning curve
  • Get to know the basics of the Bootstrap framework to integrate with Angular projects
  • Get to work with the new router and form features in Angular 2
  • Build your own customized version of Bootstrap for use in your site
  • See the new features of ES6 and get to know how to use them with Angular 2
  • Work with the grid layout systems of Bootstrap to control the layout of your website
  • Use TypeScript to write modern, powerful Angular 2 applications
  • Conjure up an interesting app using Angular 2 web components and BootstrapUI

Authors

Table of Contents

Getting Started with Angular 2.0
The Course Overview
Angular 2.0 Versus Angular 1.0
Installation and Setup for Angular 2.0 with TypeScript ES6
A “Hello world” Application Using Angular 2.0
Bootstrap Components and Styling
Bootstrap Installation and Setup
Bootstrap Fluid Responsive Layout with Grid System
Bootstrap Responsive .navbar Header and .navbar Tabs
Bootstrap Table, List, Form, and Glyph Icons and Responsive Utilities
Bootstrap Carousel with Bootstrap Panel, Accordion, and Tab Menu
Creating Demo Application Structure Using Bootstrap Component
Understanding Typescript, Module Loaders, and Transpilers
Writing an Application Using Typescript/ES5/ES6
Typescript as a Language for Angular 2
Understanding Universal Module Loader System JS
Understanding webpack Module Loader
Loaders and Transpilers using NPM Package Manager
Typescript@ annotations for Components, Views, and Directives
Hands-On on Our Application
Understanding Features of ES6 ES2015
Scope of Variables using let and const
Template Literals and Default Arguments
Spread Operator, Rest Parameter, and De-Structuring
Arrow Function and Lexical This Binding
ES6 Classes and Inheritance
ES6 Modules Import and Export
Asynchronous Processing with ES6 Native Promises
Iterators and Generators in ES6
Angular 2 Modules, Components, Templates, Metadata, and Architecture
Angular 2 Application Architecture
Angular Modules and Components
Angular 2 Modules: @Ng Module
Angular Components Nesting and Templates
Angular Web Component and View Encapsulation
Angular Component Metadata
Angular Component Communication Input and Output
Angular Component Building for Application
Data Binding, Events, and pipes in Angular 2
Angular 2 - Property binding
DOM events and event binding
Two-way data binding in Angular app
Attribute directives and structural directives
Pipes in Angular 2
Angular component Lifecycle Hooks
Application development with data binding, pipes, and directives
The Dependency Injection and Inversion of Control Patterns
Dependency Injection and Inversion of Control Patterns
Injector and Providers @inject @injectable
Building And Registering a Service
Dependency Injection with Angular 2 Application
Angular 2 Understanding Routing Basics, Observable Objects, and Immutable Objects
Angular 2 Understanding Routing Basics, Observable Objects, and Immutable Objects
Route Architecture with Route Linking and Redirection
Angular 2.0 Understanding Child Routes and Route Param
Securing Routes and Location Strategy
Routing with Angular 2 Demo Application
Understanding Angular 2 Forms
Angular 2 Template Driven forms
Template-driven forms with Validation
Model-driven Forms or Reactive Forms
Model-driven Forms with Validations
Angular 2 Application Development with Forms
Reactive Programming in Angular 2 RX Observables
Angular 2.0 Understanding Reactive Functional Programming
Scheduling Cron Jobs
Observables with HTTP service in Angular 2
Observables with Angular Forms in Angular 2
Observables and RX JS with Angular 2Application

Video Details

ISBN 139781785889646
Course Length5 hours 40 minutes
Read More

Read More Reviews