Web Development with Angular 2 and Bootstrap
2.5 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Web Development with Angular 2 and Bootstrap to your Wishlist.

Add to Wishlist

Web Development with Angular 2 and Bootstrap

Become an ace at creating stunning Angular2 applications using Bootstrap
2.5 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
12 students enrolled
Created by Packt Publishing
Last updated 2/2017
English
Current price: $10 Original price: $125 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • No Prior knowledge of Angular and Bootstrap is required. The course is based on Angular 2 and Bootstrap 3.
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.

About The Author

Tarun Sharma is a passionate web developer and senior developer, currently with a main focus on front-end technologies and JavaScript frameworks. He has 5 years of experience in developing front-end applications with various frameworks, most likely with Angular 1.x, Angular 2 and React JS.

He regularly contributes to open source projects and provides technical training on front-end technologies.

He would like to thank his Mother for being at his side for so many years and for always being so supportive in every kind of situation. He would also like to thank Sunny and Vivek for helping him out with Angular 2 questions and technical reviews.


Who is the target audience?
  • Anyone who wants to learn Web Development with Angular and Bootstrap, without any prior knowledge. Working knowledge of HTML, CSS, and JavaScript is required to fully get to grips with Bootstrap and AngularJS.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
59 Lectures
05:40:10
+
Getting Started with Angular 2.0
4 Lectures 22:42

This video provides an overview of the entire course

Preview 04:36

Angular 2.0 is latest version of Angular coming out. It has been rewritten using TypeScript and has a lot of changes in it. Now we will see how we can learn Angular 2.0, having knowledge of Angular 1.0.

Angular 2.0 Versus Angular 1.0
06:17

We will do the installation and setup for development of Angular 2.0 applications using TypeScript and will explore different ways to develop an application.

Installation and Setup for Angular 2.0 with TypeScript ES6
06:22

We will write our first application—a “Hello world” application—and render the created Angular component on our browser.

A “Hello world” Application Using Angular 2.0
05:27
+
Bootstrap Components and Styling
6 Lectures 36:05

Creating web design in the traditional approach is not responsive. The website doesn’t show consistent behavior in different devices. Now, after adding bootstrap classes in the application, we can see consistent behavior of our application in different devices.

Preview 05:15

CSS doesn’t always work without failing. Usually, it’s a tiny overlooked mistake that causes something not to work and is hard to find and fix. Enter the Chrome Dev Tools.

Bootstrap Fluid Responsive Layout with Grid System
08:54

Let’s start creating our web application by taking a good look at the header and then we will customize the body and the footer.

Bootstrap Responsive .navbar Header and .navbar Tabs
04:07

Looking for some cool bootstrap layout features here, they are glyph icons customized html forms list, and different tabs layout.

Bootstrap Carousel with Bootstrap Panel, Accordion, and Tab Menu
06:57

Looking for some cool bootstrap layout features such as adding accordions, adding image sliders carousel, and tab menus

Bootstrap Carousel with Bootstrap Panel, Accordion, and Tab Menu
05:52

Let’s Build the layout for our application using bootstrap styles and components.

Creating Demo Application Structure Using Bootstrap Component
05:00
+
Understanding Typescript, Module Loaders, and Transpilers
7 Lectures 32:35

Angular 2.0 is a language of the future, which can be written in different ways and can be compiled using different tools. Let’s unveil these ways of writing angular code. Now, after writing the Code in ES5 and ES6 with typescript, we now become aware of the role of typescript and ES6 in angular 2.0.

Preview 05:06

Angular 2.0 is a language of the future which is written in Typescript, let’s explore the role of typescript in Angular 2.0.

Typescript as a Language for Angular 2
04:52

Angular 2 doesn’t have its own module system as Angular 1 did, it uses System JS. It is a “Universal dynamic module loader”.

Understanding Universal Module Loader System JS
04:02

Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.

Understanding webpack Module Loader
05:45

Angular 2.0 is written in ES6 typescript. So to run the code, we always need a transpiler and a loader to compile code for the browser.

Loaders and Transpilers using NPM Package Manager
03:19

Angular 2.0 is component-based development as everything is being represented using components and ES6 class with annotations.

Typescript@ annotations for Components, Views, and Directives
04:45

Now we have a good understanding of components and directives, so let’s create something for our demo application.

Hands-On on Our Application
04:46
+
Understanding Features of ES6 ES2015
8 Lectures 38:59

The new version of JavaScript, "EcmaScript 6" or "ES6", offers a number of new features that extend the power of the language. ES6 is not widely supported in today's browsers. To run the code in browsers, we will be using typescript transpilers to transpile.

Preview 05:01

The aim of this video is to understand cover string interpolation and default arguments in ES6.

Template Literals and Default Arguments
04:13

The aim of this video is to understand cover Spread operator, Rest parameter and de-structuring.

Spread Operator, Rest Parameter, and De-Structuring
05:40

ES5 javascript for setting defaults to function arguments was to test parameter values in the body of the function and assign a value if they are undefined.

Arrow Function and Lexical This Binding
04:55

The aim of this video is to cover classes in ES6.

ES6 Classes and Inheritance
05:08

The aim of this video is to cover ES6 modules.

ES6 Modules Import and Export
05:33

The aim of this video is to understand cover ES6 native promises which will provide us with a way to deal with asynchronous API calls.

Asynchronous Processing with ES6 Native Promises
03:41

The aim of this video is to cover iterators and generators in ES6.

Iterators and Generators in ES6
04:48
+
Angular 2 Modules, Components, Templates, Metadata, and Architecture
8 Lectures 51:31

The new version of JavaScript, "EcmaScript 6" or "ES6", offers a number of new features that extend the power of the language. ES6 is not widely supported in today's browsers. To run the code on the browser, we will be using typescript transpilers to transpile.

Preview 07:52

The aim of this video is to understand Modules in the angular application with Components.

Angular Modules and Components
04:43

The aim of this video is to understand the ng module and other angular modules.

Angular 2 Modules: @Ng Module
05:39

The aim of this video is to understand about nesting of angular components and different ways to define template for components.

Angular Components Nesting and Templates
05:42

The aim of this video is to understand about Web Components and the different principles of Web components.

Angular Web Component and View Encapsulation
07:39

The aim of this video is to understand about metaData Decorators we are using in our component.

Angular Component Metadata
06:37

The aim of this video is to understand about nesting of angular components and different ways to define template for components.

Angular Component Communication Input and Output
07:10

The aim of this video is to understand the working on our application to understand more on angular directives component communication.

Angular Component Building for Application
06:09
+
Data Binding, Events, and pipes in Angular 2
7 Lectures 39:36

The aim of this video is to talk about property binding in angular components.

Preview 04:03

The aim of this video is to add DOM events in the same example.

DOM events and event binding
05:44

The aim of this video is to understand how two-way data binding in Angular 2 is implemented and how we can implement it in our own Components.

Two-way data binding in Angular app
06:13

The aim of this video is to discuss about different categories of directives.

Attribute directives and structural directives
06:55

The aim of this video is to understand about pipes.

Pipes in Angular 2
06:18

The aim of this video is to understand about the component lifecycle.

Angular component Lifecycle Hooks
05:46

The aim of this video is toadd more features to our application with Data binding, pipes, and directives.

Application development with data binding, pipes, and directives
04:37
+
The Dependency Injection and Inversion of Control Patterns
4 Lectures 18:39

The aim of this video is to understand the Dependency Injection and Inversion Of Control Patterns in software development.

Preview 04:53

The aim of this video is to create angular service, add dependency injection in angular 2 component, and understand @inject and @injectable annotations.

Injector and Providers @inject @injectable
04:23

Angular 2 has greatly simplified services since Angular 1. In Angular 1, there was a service, factory, provider, delegate, value, constant, and so on, and it wasn't always clear when to use which. For most use cases in Angular 2, services have been greatly simplified.

Building And Registering a Service
03:34

Creating services is nothing new in Angular 2. We just need to Create the service class,define the metadata with a decorator,and import what we need. Looks familiar? These are the same basic steps we followto build our components and custom pipes.Let's look at the code for a simple service.

Dependency Injection with Angular 2 Application
05:49
+
Angular 2 Understanding Routing Basics, Observable Objects, and Immutable Object
5 Lectures 30:02

The aim of this video is to discuss the role of routing in Single Page Applications and Angular 2's new component router.

Preview 06:39

Routing comes with a lot of features. It is not all about rendering route templates on route-outlet, Here, we can create nested routes, child routes, and can pass some data as route parameters while accessing that route.

Route Architecture with Route Linking and Redirection
04:10

The aim of this video is to understand more in the routing section such as Nested routes and passing data in routes as route param.

Angular 2.0 Understanding Child Routes and Route Param
06:25

The aim of this video is to understand more in the routing section such as Location strategy and securing routes from unauthorized access or Guarding Routes.

Securing Routes and Location Strategy
06:19

The aim of this video is to add routing for our Angular 2 Application.

Routing with Angular 2 Demo Application
06:29
+
Understanding Angular 2 Forms
5 Lectures 31:53

The aim of this video is to understand Angular 2 forms, form validation and capturing data from forms.

Preview 05:06

The aim of this video is to understand the custom validation rules and basic validation rules in Template-driven forms

Template-driven forms with Validation
07:08

The aim of this video is to understand Model-driven forms and how they are different from Template-driven forms.

Model-driven Forms or Reactive Forms
04:42

Model-driven forms enable us to test our forms without being required to rely on end-to-end tests.

Model-driven Forms with Validations
06:34

The aim of this video is to develop an Angular form app using Model driven forms.

Angular 2 Application Development with Forms
08:23
+
Reactive Programming in Angular 2 RX Observables
5 Lectures 38:08

The aim of this video is to understand the basics of reactive functional programming.

Preview 08:09

The aim of this video is to have a basic setup of applications using observables.

Observables and Reactive Extensions
06:06

The aim of this video is to learn how to make HTTP requests using RxJs Observable library.

Observables with HTTP Service in Angular 2
08:10

The aim of this video is to learn the other ways in which we can use observables in our application, such as using Form control Events.

Observables with Angular Forms in Angular 2
06:28

The aim of this video is to use observables in our application, such as using Form control Events where we can capture data from control asynchronously.

Observables and RX JS with Angular 2 Application
09:15
About the Instructor
Packt Publishing
3.9 Average rating
8,175 Reviews
58,727 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.