Ultimate Angular 4 (previously Angular 2) with Bootstrap 4
4.6 (1,816 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.
11,319 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ultimate Angular 4 (previously Angular 2) with Bootstrap 4 to your Wishlist.

Add to Wishlist

Ultimate Angular 4 (previously Angular 2) with Bootstrap 4

Go from Zero to Hero with Angular 2 and Angular 4 plus Bootstrap 4 and TypeScript!
4.6 (1,816 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.
11,319 students enrolled
Created by Jon Bonso
Last updated 4/2017
English
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 4 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Be a top-notch, highly paid developer with Angular 2 skill on your belt!
  • Setup your local workspace and install much-needed tools for Angular 2 development
  • Learn to create Angular 2 applications with Plunker, Angular-CLI and other different ways
  • Understand and Master the core concepts of Angular 2
  • Build Angular 2 application much faster and more robust
  • Properly use Directives, Components, Services, Routing and many more
  • Integrate Bootstrap 4 UI in our Angular 2 application
  • Learn the basics of TypeScript
  • Receive BIG discounts on my other Udemy courses
View Curriculum
Requirements
  • You DON'T need a prior knowledge of AngularJS to take this course!
  • Basic HTML
Description

Updated to Angular 4.0+ Final Version! 

____________________________________

Angular is the latest development framework from Google that was just released on September 2016 with the latest 4.0 release version last March 2017. Even though it is new, it is already a sought-after (& highly paid) skill for building scalable, robust and modern cross-platform applications. 

$100,000 is the average annual salary for talented software developers here and you can earn as much as $800 or even $1,000 gross per day if you are on a contract rate basis, and by learning Angular, your chance of having this kind of salary gets much higher!

For Front-End or for Full-stack developers, this course is a must for you to take your career and pay grade, on to the next level! This is also beneficial for Project Managers, Computer Science students, Recruiters or anyone who wants to know and learn the latest technology right now in the ever evolving world of technology.

In Ultimate Angular 4 with Bootstrap 4 & TypeScript course, Jon will take you on a pragmatic, hands-on and fun learning journey to master the Angular framework.

Within minutes, you'll learn how to create Angular 4 applications! We will discuss the basics of the framework and guide you to setup your local development workspace. From properly creating Directives, Components, Services and Routing to actually integrating them to build your application. With Angular CLI, I'll show you how to automate your development process. You will also learn the basics of TypeScript and how to use Bootstrap 4! 

You'll learn how to:

  • Install Node, NPM and other Angular dependencies 
  • Learn and use the official Angular Production Release version!
  • Create Angular archetypes with Angular CLI, QuickStart, Plunker and other methods.
  • Understand the basics of Angular framework.
  • Learn how to create Components, Directives, Pipes, Services and Routing. 
  • Easily generate source and test files with Angular CLI
  • Familiarize yourself with Visual Studio Code IDE
  • Use and Integrate Components, Directives, Pipes, Services and Routing.
  • Understand the concept of NgModule
  • Use the built-in Attribute Directives such as ngStyle and ngClass
  • Use the built-in Structural Directives like ngIf, ngSwitch and ngFor
  • Connect and Consume data from a Web Service using Observable
  • Develop a CRUD (Create, Read, Update, Delete) Application
  • Learn the basic of TypeScript by creating a Class, Interface and Enum
  • Integrate and use Bootstrap 4 in your application.
  • Migrate your old Angular 2 RC version to the final release version
  • . . . and many, many more!



Are you now ready for the next BIG jump of your career and your pay check? 

Come on and let's learn Angular today!

Who is the target audience?
  • Computer Science students who are eager to learn the latest technology from Google: Angular 2
  • Web and UI Developers who wants bring their careers to the next level.
  • Project Managers who are looking for a new framework for their projects.
Curriculum For This Course
81 Lectures
05:40:25
+
Course Introduction
4 Lectures 11:16

Welcome to Ultimate Angular 2 Developer with Bootstrap 4 and TypeScript!

Introduction
00:53


House Rules for asking questions in the Q&A section.

Course House Rules
01:35

Let's test your understanding about the basics of Angular 2

Angular Basics Quiz
5 questions

Create a working Angular 2 application in just a minute with Plunker:  http://www.plnkr.co

In this lesson, we will learn how to start your own 'Hello World' program with Plunker. This is helpful if you want to immediately run Angular 2 applications without using your own computer.

Preview 05:07
+
Local Development Setup
9 Lectures 53:27

This is the section overview of the things we will setup for your local development environment

Local Development Environment Overview
01:19

Overview of NodeJS runtime environment.

NodeJS Overview
01:33

Overview of the NodeJS Package Manager and NPM Registry.

NodeJS Package Manager (NPM) Overview
01:55

NodeJS and Node Package Manager (NPM) Installation on Windows
06:26

NodeJS and Node Package Manager Installation on your Mac OS.

NodeJS and NPM Installation on MAC
05:28

Learn how to update your NodeJS and Node Package Manager versions on your Windows system.

Updating NodeJS and NPM on Windows
12:49

Updating NodeJS and NPM on MAC
05:17

Learn how to install GIT versioning system on your Windows system.

Installing GIT on Windows
15:01

Learn how to install GIT versioning system on your MAC OSX system.

Installing GIT on MAC
03:39
+
Angular 2 Quick Starts and Workspace Setup
7 Lectures 15:16

In this lesson, you will learn how to setup and run the Angular2 QuickStart project. You may clone it here: https://github.com/angular/quickstart

Preview 03:16

Angular CLI ( Command Line Interface) is a helpful tool to automate the setup, creation of configurations files and source components for our Angular 2 application. This lesson will show you how to install Angular CLI on your local computer.

Angular CLI Installation
02:27

In this lesson, we will learn how to update the old beta or RC versions of your Angular CLI tool to the latest. 

Updating Your Angular CLI Tool
03:19

In this lesson, we will learn how to easily create and run our Angular 2 application using the Angular CLI tool.

Hello World Angular using Angular CLI
02:07

There are a lot of IDE (Integrated Development Environment) out there that you can use in developing your Angular 2 application. In this lesson, we will talk about Visual Studio Code IDE and WebStorm. Below are the download links: 

  • Visual Studio Code IDE: https://code.visualstudio.com/
  • WebStorm: https://www.jetbrains.com/webstorm/


Your IDEs for Angular
01:33

With all of our dependencies installed, we are now ready to setup our development workspace for Angular 2. In this lesson, we will use the Angular 2 app that was generated by our Angular CLI tool and then using the Visual Studio Code IDE to do some modification.

Angular Workspace Setup
02:00

Angular Workspace Setup Quiz
5 questions

Now that you had learned the basic steps to start an Angular 2 application, it is now time to put it in practice!

Exercise 1: Creating your First Angular Application
00:34
+
Angular 2 Core Concepts
2 Lectures 11:24
Angular Core Components
05:25

Angular Basics
5 questions

Just like the human body, an Angular 2 application is composed of different parts that does various functions. We will learn here its anatomy such as the configuration, tests and source files.

Anatomy of an Angular Application
05:59
+
Components, Directives, Services, Pipes and Routing
16 Lectures 54:42

Components are the building blocks of our Angular 2 application. In this lesson, we will learn how to manually create a Component and also, by using Angular CLI to auto-generate the actual Component and other associated files.

How to create Components
06:22

After we created our Components, it is now time to use it. Follow these steps to learn how to properly use Components on your application.

Using Components
04:30

One of the difference between an Attribute & Structural Directive to a Component is that, the Component has both a Controller and a View. The latter is basically the "Template". In this lesson, we will learn more about this and improve the simple template of our Component.

Templates
02:32

In this lesson, we will create a simple Attribute Directive that adds a highlight style to a DOM element. 

How to create Directives
03:36

This lesson will teach you how to use the custom Highlight Directive we created in the previous lesson.

Using Directives
04:17

In this lesson, we will create a simple service that will provide us with a list of stocks.

How to create Services
02:58

We will now use the new Stock Service that we create in our previous lesson.

Using Services
03:39

In this lecture, we will learn the overview of Pipes. 

Pipes Overview
00:31

In this lesson, we will create a custom Pipe.

How to create Pipes
01:35

In this lesson, we will learn how to use built-in Pipes from Angular 2.

Using Pipes
02:22

In this lesson, we will create a simple Routing for our Stocks Component. We will configure our app module to accommodate the routing.

How to create Routing
04:24

After creating our Routing, it is now time use it for our Stocks Component. 

Using Routes
02:38

Now that we have our Routing component all ready that directs us to our Stocks Component, we can now improve the navigation of our application by using RouterLink.

Adding RouterLink
01:22

In this lesson, we will learn more about Angular Module and explore the @NgModule decorator including the properties of our app.module.ts source file. We will also learn how to add our new Components, Services and Directives to our root module. 

Preview 07:00

If-Else NgIf Syntax Directive
04:39

In this lecture, we will learn the overview of what Angular Universal really is.

Angular Universal
02:17
+
TypeScript Basics
4 Lectures 05:58

Let's start first with the basic building block: a Class. Here, we will learn how to create a simple TypeScript class with Angular CLI and add its constructor plus a custom method.

TypeScript Class
01:25

Basically, an Interface is a description which tells the class (which 'implements' it) the specific methods that it must implement. In this lesson, we will create an Interface with the help of Angular CLI and then add methods in it, which will be implemented by the Bonds class.

TypeScript Interface
01:18

After we had created an Interface, it is now time to use it. We will implement the methods defined in our Security interface to our Bonds class.

Using TypeScript Interface
01:57

Enumeration, or "Enum" for short,  is a complete, ordered listing of all the items in a collection. You can use this to define a list of values for a collection. We will create an Enum for the various stock markets in the world such as NYSE, NASDAQ and ASX.

TypeScript Enum
01:18

TypeScript Basics Quiz

TypeScript Basics
5 questions
+
Bootstrap 4 Integration
7 Lectures 19:56

What is Bootstrap 4 and what does it do? Where can I get it and how can I use it on my Angular 2 app? In this lesson, we will learn more about Bootstrap 4. 

Preview 01:03

Learn the configuration of integrating Bootstrap 4 to your Angular CLI tool.

Note:  For the newer versions of Bootstrap 4, if you to use NgbModule.forRoot() instead of NgbModule, which is specified in this lecture.


@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})


Integrating Bootstrap 4 to Angular CLI
01:48

Now that your Bootstrap has been add to Angular CLI tool, we will now integrate the NgbModule or "NG Bootstrap" module, to our main Angular 2 module. 

Integrating Bootstrap 4 to Angular
01:46

With all of the Bootstrap 4 - Angular 2 plumbing ready, we can now use its various components to our application, such as Alerts, Buttons, Modals and many more -- creating a rich, user-friendly interface for our users.

Adding Bootstrap 4 Components
01:59

In this lesson, we will learn how to add a Bootstrap 4 navigation bar, also known as a "menu", to our Angular 2 application. We will also integrate the RouterLink that we created earlier to the new menu. 

Adding and Customizing a Bootstrap 4 Navigation Bar
06:37

Creating a Dashboard Page
03:49

Customizing Your Dashboard Using Jumbotron
02:54

Bootstrap 4 Quiz

Bootstrap 4 Quiz
5 questions
+
Built-In Directives
5 Lectures 26:40

ngFor is one of the built-in directives of Angular 2, which is used to show a collection of items by looping through each element of that collection.

Structural Directive #1: *ngFor
03:23

ngIf is one of the built-in directives of Angular 2, which is used to show or to hide a specific DOM element.

Structural Directive #2: *ngIf
04:05

Structural Directive #3: *ngSwitch
07:18

ngStyle is a built-in attribute directive from Angular 2, that is used to update the style of our HTML element. Let's look at it in detail here in this lecture.

Attribute Directive #1: ngStyle
03:45

Just like ngStyle, we also have another built-in attribute directive from Angular 2 which is called ngClass. We will discuss how we can implement the different types of ngClass via a String, an Array and via an Object.

Attribute Directive #2: ngClass
08:09
+
Angular 2 JSON-Server REST Web Service Setup
4 Lectures 21:05

We will install the POSTMAN Tool to help us connect and test our webservices which we will be using in our Angular 2 application. 


POSTMAN website: https://www.getpostman.com/

Installing and Running the POSTMAN API Tool
03:22

Before we learn how to fetch data from an API web service using Angular 2, let's first create our own API service using JSON-Server. This lecture will provide a step-by-step guide on how to install JSON-Server. 


JSON-Server Github : https://github.com/typicode/json-server

JSON Server Installation
04:06

Testing JSON Server's CRUD Operations with POSTMAN
06:41

Preparing a Custom JSON-Server API Data
06:56
+
Building a CRUD Application in Angular 2
11 Lectures 59:22
CRUD Application Github repository
00:03



READ: data using ngFor
02:59

READ: data using a Table
04:34

CREATE: Data using POST
07:24

Updating data with PUT HTTP Method
12:47

DELETE: data with DELETE HTTP Method
05:12

Here's the custom Loader CSS that is used in this lesson:


.loader {
    border: 66px solid #f3f3f3; /* Light grey */
    border-top: 66px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 320px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle ;
    margin-top: 200px !important;
      display: table-cell;
        position: relative;
  top: 50%;
  transform: translateY(-50%);
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Adding a Simple Spinner Loader
01:05

Auto-Refresh Data Table
03:03

In this lecture, we will learn how to create a simple modal. 

Preview 09:07
3 More Sections
About the Instructor
Jon Bonso
4.5 Average rating
1,961 Reviews
18,440 Students
5 Courses
Full Stack Developer

Jon is a Full Stack software developer based in Sydney, Australia, with over a decade of diversified experience in Banking, Financial Services, Telecommunications and Healthcare industries.  He was also employed to top tech and finance companies such as HP, Accenture, Telstra, Macquarie Bank and Credit Agricole CIB to name a few. 

On the side, he is also doing freelance jobs on web development and mobile apps for various clients. When he's not in front of the screen, he likes to play the piano and guitar.