Angular 2 Master Class with Alejandro Rangel

Get all the knowledge required and become an Angular 2 ninja. Build many applications following the live Master Class
4.4 (200 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.
4,122 students enrolled
$19
$30
37% off
Take This Course
  • Lectures 80
  • Length 9.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

Learn everything you need to become an Angular 2 expert!

In this Master Class you will learn all aspects of Angular 2 including ES6 and TypeScript. You will get three packages in one course!

You just need to know pure Javascript, CSS and HTML, I will teach you the rest needed for becoming a master in Angular 2. Additionally, You will be using several IDEs, so, at the end of the class you can decide which is the most suitable for you, specifically we will take a look on WebStorm, Visual Code Studio, Sublime Text and Plunkr.

This Master Class is a live session of more than 9.5 hours will lots of examples, exercises and professional tips that you won't get in any other documentation available today.

Every section is divided in a Theory lesson and a Practical Exercise. This will help you to understand complex topics like Dependency Injection, RxJS, Routing and at the same time code with me and get the most of every part of Angular 2.

Why is this Master Class so valuable?

  • 9.5+ hours of unique content. This is 15+ GB of videos
  • It resumes lots of materials and conferences available in Internet related to Angular 2. This will save you hundred of hours watching different sources
  • Professional tips from practical examples learnt from real experience
  • It offers Angular 2, TypeScript and ES6 in one full package!
  • This master class goes beyond the basics, you will build full applications that mix all concepts you need for programming real applications
  • Offers comparison between Angular 1 and 2 in the critical sections. This will help you for upgrading versions
  • Every section has a PDF, PPT and the source code. You can use this resources for practising after watching the course
  • I offer personal assistance at any time you need to solve an exercise. Lets Skype!

Why do I recorded this Master Class?

As a professional Frontend architect, I started working with Angular 2 since alpha version. I study all parts of the framework while Angular team has been releasing new versions. I decided to switch a full Angular 1/Ionic product to Angular 2 and since them my team has been working intensively with Components, Directives, Routing, Http, Services, Styling and more.

This Master Class is my resume of all possible resources that I have found and used with my team and I consider that this is the most valuable material that I can offer in Internet.

Continuous Updates of this course:

  • This Master Class will have updates every time that Angular 2 release new features
  • I will upload all live conferences I do related to Angular 2. This is a big plus, you will learn from the audience questions too

Why Angular 2?

One of the most popular open source JavaScript frameworks in the world of web application development is AngularJS. Since its release, it has received an exponential growth of adoption and support.

Announced at the ng-conference in October 2014, Angular 2.0 is the new version of Angular.

For those who thought that it will be just an update… sorry, it is not! Angular 2 is an entire new framework with breaking changes.

Faster than Angular 1, Angular 2 uses natural, easy-to-write syntax. It gives you the tools you need to build apps for desktop, mobile web, Android, and iOS.

What are you waiting for? Register now and enjoy the course!

What are the requirements?

  • You should be familiar with Html, CSS and Javascript in order to be able to follow this master class
  • You should download any of the following IDE: Visual Code Studio, Sublime Text or WebStorm. I will make examples with all of them, so, you can be familiar and choose the most suitable for you
  • It is a plus if you know Angular 1. I will be comparing both frameworks many times

What am I going to get from this course?

  • Full understanding of Angular 2
  • Master Angular Components, Directives, Pipes, Services, Routing, Http, Bootstrapping and many more details
  • Good techniques for coding with Angular 2
  • Code with examples
  • You will learn everything you need to work with Angular 2. I can guarantee that this Master Class will give you all the knowledge you need
  • Master TypeScript and ES6

What is the target audience?

  • Angular 2 is for frontend developers that want to learn about the next version of Angular
  • This Master class is recorded in live, so, you should code with me, follow the examples, make mistakes and debug the code. This is the best way to learn new frameworks
  • You should take this Master Class if you really want to understand all areas of Angular 2. There is a dedicated section for every part of the framework

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Course Introduction
Introduction
Preview
03:33
Section 2: ES6 - Javascript New features
Introduction
Preview
14:05
06:39

You will learn about the ES6 new block scoping with the keywords: let and const

04:08

You will learn how to create Classes with ES6

03:18

You will learn about inheritance of classes in ES6

03:41

You will learn how to pass default parameters to functions in case none is provided

06:55

You will learn how to use Collections in ES6: Set and Map

Iterators
03:53
Array Comprehension
05:26
Modules
03:02
Arrow Function or "Fat Arrow" =>
08:49
Section 3: TypeScript
Introduction
16:50
Type System Part 1
08:34
Type System Part 2
09:18
Functions
04:39
Classes, Objects, Interfaces and Inheritance - Part 1
16:29
Classes, Objects, Interfaces and Inheritance - Part 2
01:49
Modules
07:01
Decorators
02:17
Section 4: RxJS
15:56

You will learn about the library RxJS and why is so important for Angular 2

11:14

Code with me a Practical example using RxJS Observable. You will need when we use the library Angular 2 Http

Section 5: Angular 2 - Introduction
Introduction - Part 1
16:08
Introduction - Part 2
19:43
Section 6: Architecture
08:44

You will learn about the different areas of Angular 2:

  • Components
  • Directives
  • Services
  • Pipes
  • Forms
  • Routing

This section is just an introduction before getting into details of each area

Section 7: Angular 2 - Setup
Configuration and Bootstrapping
13:38
Section 8: Components
06:44

You will learn what are Components and how to use them

09:25
Code with me and learn how to create your first Component from scratch
Section 9: Display Data
02:08

You will learn the theory behind displaying data from the templates of your Angular 2 components

04:26

Code with me and learn how to display data to the user with a practical example

Section 10: User Input
03:28
You will learn the theory behind handling user events in Angular 2
06:41

Code with me and learn how to handle user events like mouseup and keypup

Section 11: Forms
Forms - Theory
11:19
Forms - Practical Exercise
07:07
Section 12: Services
04:34

You will learn the theory behind Services in Angular 2

Services - Practical exercise
06:08
Section 13: Dependency Injection
06:03

You will learn in the most simple way "What is Dependency Injection"

04:52

Code with me and learn how to inject Services in your Components

Section 14: Pipes
03:26

You will learn the theory behind Pipes in your Angular 2 templates

09:53

Code with me and learn how to create a Pipe for scratch

Section 15: Atribute Directive
08:02

You will understand the theory behind writing Attribute Directives for styling the Dom

06:46

Code with me and learn how to create your first Attribute Directive from scratch

Section 16: Structural Directive
10:27

You will learn the theory behind build-in and custom Structural Directives in Angular 2

04:38

Code with me and learn how to create your first Structural Directive

Section 17: Http
05:01

In this section you will learn how to use the Http library from Angular 2 and code an example making a Http GET request to an external api

06:26

Code with me and learn how to make an http GET request

Section 18: Routing
06:54

You will learn the theory behind the Angular 2 Router

Routing - Practical Exercise Part 1
12:17
Routing - Practical Exercise Part 2
13:56
Section 19: Full Angular 2 Weather App
03:29

In this section we will build a full application using the following concepts:

  • Setup an Angular 2 application from scratch
  • Components
  • Services
  • TypeScript models and Interfaces
  • Data and event binding
  • Debugging
  • Using a real Http api with RxJS
  • Styling components
09:48

You will learn how to setup an Angular 2 application from scratch. In order to do that, the first step is to create the package.json. We will get into the details of every line of the package.json and then code

04:36

You will learn how to setup Angular 2 for working with TypeScript. In order to transpile TypeScript to Javascript, we have to specify a tsconfig.json. We will get into the details of every line of the tsconfig.json and then code

05:41

You will code with me the first Component of the WeatherApp

07:09

You will learn how to setup Angular 2 for bootstrapping in the browser. This is a super important step in order to start the application. We will code together the boot.ts

07:07

You will learn to create the index.html required to load any Angular 2 application. You will learn about System.js

02:37

In this video you will learn and code for displaying data in the AppComponent o the WeatherApp. We will use interpolation

02:34

You will learn how to debug an Angular 2 application using the sourceMap property from the tsconfig.json

09:30

You will learn how to create a Data Model implementing an Interface. This is am important concept for proper structure of your Angular 2 code.

12:59

You will learn how to use Two-way data binding for getting the city from an user input

07:59

You will learn how to apply inline and external css to the AppComponent of the WeatherApp

Structural Directive: *ngIf and *ngFor
05:46
09:28

You will learn and code with me a Weather Service for returning the weather data to the AppComponent

14:10

You will learn how to use the Angular 2 Http library for getting real weather data from openweathermap.org

Section 20: MyTunes
02:27

Full Angular 2 application for learning how a real production application looks like. You will learn:

  • Setup
  • Configuring TypeScript for a different output directory
  • Writing custom Attribute and Structural Directives
  • Components
  • Classes and Interfaces
  • Services
  • Connected the application with Firebase and Last.fm API
  • Routing in depth
  • Styling
  • Tricks for a production ready application
04:04

Configuration of the application:

  • package.json
  • tsconfig.json
  • index.html
  • Modifying the System.js for loading javascript from a different folder
01:20

You will practise the Boostrapping process writing the main.ts

02:25

We will add external libraries:

  • Bootstrap
  • Font-awesome
  • Firebase
02:02

Explanation in detail about the folders structure in MyTunes

01:54

Analysis of the components needed in MyTunes and how to organise them in modules

06:55

Writing the components for MyTunes

03:17

Configure the RouteConfig in the AppComponent.ts

01:44

We will configure TypeScript for placing the Javascript files in a different folder

03:57

We introduce some common bugs in Mytunes. In this lesson we are going to fix them.

09:50

We will write all classes and interfaces needed in MyTunes

11:01

We are going to connect MyTunes with Firebase, Last.fm using Angular 2 Http library and RxJS Observables

01:36

We will create a custom Pipe

02:36

We are going to create to custom directives:

  • Structural Directive: For looping in the Dom
  • Attribute Directive: For highlighting albums
Wiring Component, Services, Directives, Pipes and Models
19:18
01:35

We will add an extra CSS style for the Sticky footer

09:11

Lets run MyTunes and see the final product

Section 21: Goodbye

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Alejandro Rangel, Mobile, Web Developer and Teacher

Hi! I'm Alejandro. I have a degree in Telecommunications Engineer from Universidad Politécnica de Cataluña. Software Development and teaching are my passions.

I have been working for 7+ years as a freelance and for companies as a Mobile and Frontend Software Developer. As a teacher, I love to share my Knowledge and experience with my students, so, they can have a full training about been and working as a software developer. Teaching makes me happy.

I am working hard for creating awesome courses in Udemy. Hope to see you in my classroom

Ready to start learning?
Take This Course