Angular Essentials (Angular 2/ Angular 4 with TypeScript)
4.7 (737 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.
18,202 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular Essentials (Angular 2/ Angular 4 with TypeScript) to your Wishlist.

Add to Wishlist

Angular Essentials (Angular 2/ Angular 4 with TypeScript)

The most efficient way to dive into Angular 2 or Angular 4 if you got limited time or need to refresh the basics!
Bestselling
4.7 (737 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.
18,202 students enrolled
Last updated 8/2017
English
Current price: $10 Original price: $120 Discount: 92% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 14 Articles
  • 21 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
What Will I Learn?
  • Build highly reactive and user-friendly web applications running in the browser (driven by JavaScript)
  • Dive deeper into Angular with very solid fundamentals taught by this course
View Curriculum
Requirements
  • You should bring solid JavaScript knowledge
  • NO Angular knowledge is required at all (this includes Angular 1, 2 or 4)
Description

Angular is an amazing JavaScript (TypeScript) framework which allows you to build small, medium or large Single-Page-Applications (SPAs). Since the code runs entirely in the browser, you can build user experiences which are way faster than traditional websites could ever be!

The skills required to build such SPAs are in extremely high demand since this kind of web app is very popular and allows you to build almost mobile-like, highly reactive user experiences. Indeed most modern web applications are built as SPAs today!

As the creator of the 5-star rated, BESTSELLING Angular course here on Udemy, I know what I'm talking about and I know what the core features of Angular are which you need to learn.

It's my goal to allow you to focus on these core features to get the quickest and best introduction into Angular, you can find!

Learning Angular never is a wrong choice and with this course, it's more correct than it ever was before! This course gives you the fastest and most efficient way of diving into Angular. If you don't want or can't take my Complete Guide on Angular or you want to get a feeling for Angular before doing so, this course is for you! It's also your #1 choice if you already know Angular but want to have resource for refreshing your basic Angular knowledge as fast as possible.

Whilst this course is much shorter, it gives you all the core insights into Angular you need. It focuses on the heart of Angular, the most important features Angular offers you and even shows you how to build a complete Angular app!

Telling by the length of the course, you might not believe it, but you'll actually learn about all these topics:

  • What Angular is
  • What TypeScript is - including a super-efficient introduction to it
  • How to use the CLI to create Angular projects and manage them
  • How Angular apps start and work
  • Which role components play and how to use them
  • How to bind and pass data
  • How to debug your app
  • How to use other, 3rd party JS libraries in an Angular app
  • How to use directives
  • How you may manage application state with services
  • How to turn your SPA into an "illusionary" MPA with routing
  • How to handle user input with forms
  • How to send Http requests
  • How to build your project, optimize it and deploy it
  • Much more!
Who is the target audience?
  • Anyone who wants to learn how to create reactive web applications providing awesome user experiences
  • Everyone interested in building single-page-applications (SPAs) with one of the most powerful frameworks you can use as of today
Students Who Viewed This Course Also Viewed
Curriculum For This Course
112 Lectures
06:16:08
+
Getting Started
11 Lectures 43:52

Let's dive into the course and let me welcome you to it!

Preview 01:44

Obviously, it's extremely important to know what you're working with. This lecture tackles the most important question for that reason: What is Angular?

Preview 03:11

In order to use Angular, you also need to know how it works - this lecture dives into that question.

Preview 03:30

Enough of the theory - let's get started! In this lecture, we'll set up our first Angular App!

Preview 06:58

The first app is running - that's amazing. But it would be even more amazing if we would change it, right? Let's do that in this lecture.

Preview 04:12

We got our first app, we did edit it ... but what did the CLI actually create for us? Let's go through the project structure.

Preview 04:56

What's happening behind the scenes? We didn't take a closer look yet, so it's time to do that now.

How does an Angular App Start?
05:56

Let me briefly walk you through the course structure and explain what you can get out of this course.

Preview 03:50

Angular uses TypeScript and you don't need to know TypeScript in order to follow along. It can still be easier if you got some basics about TypeScript set. That's the goal of this lecture.

Optional: TypeScript Essentials
08:24

This course offers a lot of content but sometimes, you might get stuck. Learn how to get un-stuck with the hints outlined in this lecture.

How to get the Course Source Code & Ask Questions
00:49

Need more information? Have a look at this lecture.

Useful Resources & Links
00:22
+
Understanding Components
15 Lectures 51:17

Let me introduce you to this course module and what you're going to learn in it.

Module Introduction
00:47

Before we dive into components, let's make sure we have a development environment we actually want to work with.

Configuring the Editor
03:02

Components use templates and templates influence what we see on the screen in the end. Let's dive deeper into this relation in this lecture.

Templates and the DOM
03:20

We worked with Components a bit but how does Angular actually work with them? Let's dive into this question in this lecture.

How Angular Reads Your Components
05:25

Time to leave the world of "AppComponent" - let's build our first custom component in this lecture.

Adding Custom Components
05:14

Obviously, we want to output content when creating an app. Angular offers a couple of ways of achieving this - this lecture explores the first method: String Interpolation.

Outputting Content via String Interpolation
01:57

Outputting content is nice but for a reactive app, we also need to be able to listen to events. This lecture shows how that works.

Listening to (User) Events
04:10

Let's dive into the third form of databinding: Property binding.

Binding to Properties
02:34

Want to combine event binding with property binding? You actually can! Learn more about two-way-binding in this lecture.

All at the same Time: Two-Way-Binding
04:31

We learned a lot about Components, let's now take this knowledge and apply it to a practical assignment!
Time to Practice - Component Basics
1 question

We had a look at property binding - the great thing is: You can also bind to properties of your own components! Learn more about that in this lecture.

Binding Component Properties
03:57

Just as you can bind your own properties, you can also emit your own events - and listen to them. More about that in this lecture.

Listening to your Custom Events
07:17

Thus far, we only worked with two components. Let's now add more components and let's also see how the CLI helps you with this.

Multiple Components & Using the CLI for Component Generation
04:41

Since the last assignment, you gathered some valuable skills when it comes to working with components. Time to utilize them in another assignment!
Time to Practice - Beyond Component Basics
1 question

Angular does something special when it comes to styling your component. Let's take a closer look!

Understanding Scoped Component Styles
03:09

Let me wrap this module up and summarize what you learned.

Wrap Up
01:04

Want to dive deeper? Have a look at this lecture!

Useful Resources & Links
00:09
+
Debugging & Using 3rd Party Libraries
8 Lectures 19:57

Let me introduce you to this module and what you're going to learn in it.

Module Introduction
00:45

You can't avoid running into errors - they're going to happen! But error messages can be very helpful as this lecture will show you.

How to Handle Angular Errors (and Error Messages)
02:58

For logical errors, you're not going to get any error messages. But thankfully, you can debug your code at runtime. How? Take a look at this lecture.

Debugging Code with Developer Tools & Sourcemaps
03:44

You need more insights? Have a look at Augury - a useful Chrome plugin for developing Angular apps.

Deeper Insights with Augury
01:54

Sometimes, you need that extra CSS framework. Learn how to easily add CSS framework to your Angular (CLI) project in this lecture.

Using CSS Frameworks with Angular (and the Angular CLI)
05:11

What about JS libraries - can you add those, too? Yes, of course! This lecture shows how to quickly add a JS library to your Angular (CLI) project.

Using JS Libraries with Angular (and the Angular CLI)
04:47

Let me wrap this module up and summarize what you learned.

Wrap Up
00:35

Want to dive deeper or learn more? Have a look at this lecture!

Useful Links & Resources
00:03
+
Extra Features with Directives
8 Lectures 22:01

Let me introduce you to this module and to what you're going to learn!

Module Introduction
00:49

Let's dive into the most important question first: What are Directives? This lecture answers this question.

What are Directives?
01:55

A key directive Angular ships with, is ngFor. Learn how it works and which kind of directive it is in this lecture.

Outputting Lists with ngFor
05:01

Want to conditionally add or remove CSS classes? Angular's got a directive for you!

Controlling CSS Classes with ngClass
05:47

We learned about two very important Directives - let's take a closer look at other directives, too.

More on Directives
04:17

ngIf is another core directive as you'll learn in this lecture.

Conditionally Outputting Content via ngIf
02:57

Let me wrap this module up and summarize what you learned thus far.

Wrap Up
01:11

Want to dive deeper? Have a look at this lecture!

Useful Resources & Links
00:04
+
Angular in Practice: Starting the Course Project
9 Lectures 35:38

Let me introduce you to this module and its goal.

Module Introduction
00:56

Before you start building any (Angular) project, you first need to plan it, right? Let's do that in this lecture.

Planning the App
04:56

The app planning is finished, time to get started!

Getting Started
04:38

The app is planned, we also got started, let's now start fill the app and its components with some life.

Filling Components with Life
03:21

Obviously our application uses some data. How do we manage that? This lecture helps with that question.

Managing Data in our Application
07:56

If you need to pass data between components, consider property binding. This lecture shows how to quickly pass data around.

Passing Data via Property Binding
03:05

What would you expect if you click a tab link? That the tab looks like it was selected, right? Let's work on that experience in this lecture.

Using ngClass to Provide the User Feedback
02:28

We're not limited to passing data down the component tree. We of course can build our own events and emit them to go the other direction.

Passing Data via Event Binding
07:34

Let me wrap this module up and summarize what you learned.

Wrap Up
00:44
+
Amazing Data Management with Services
10 Lectures 26:35

Let me introduce you this module and outline what we're going to learn.

Module Introduction
01:09

Before we start creating services, you of course need to understand what they are and which role they play. This lecture will do just that.

What are Services?
02:43

Now that you know what services are, it's time to create one!

Creating a Service
03:35

We got a service. Great! How do we use it? Well, this lecture shows how NOT to use it.

How NOT to Use Services
04:20

Angular ships with a powerful Dependency Injection Framework. This lecture shows you how you may use it to use services in components (or anywhere else in your app).

Injecting Services
04:28

We already used Dependency Injection. It's a powerful tools and you can use it in different ways. This lecture explores your alternatives.

Understanding Dependency Injection
02:37

With Services in place, we can clean up the course project and improve it. Let's do that in this lecture.

Cleaning up the Project
01:32

What if you want to inject a Service into another Service. Does that work? Yes it does, learn how it works in this lecture.

Injecting Services into Services
05:26

Let me wrap this module up and summarize what you learned thus far.

Wrap Up
00:42

Want to dive deeper? Have a look at this lecture!

Useful Resources & Links
00:03
+
Handling User Input with Forms
12 Lectures 34:06

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
01:03

Let's start by setting up a form in a component template. No rocket science but the foundation for all further steps.

Creating a Form in the Template
07:29

Learn how Angular helps you with handling forms in this lecture.

Handling Forms with Angular
06:36

We got a form and with that, users may submit content. Learn how to handle user submissions in this lecture.

How to use Submitted Values
03:41

Of course you want to make sure that you only work with valid data. This lecture shows you how you may use Angular to easily validate forms.

Validating User Input (with Angular)
04:28

In the previous lecture, you learned about required. There are other validators, too. Learn more in this lecture.

More Validation Methods
00:16

It's great that we may validate forms, it's even better if we inform the user about incorrect inputs. This lectures explores your options.

Using the Form State to Give Visual Feedback
06:02

We used ngModel in this course module. We also used it earlier in the course - for two-way-binding. How else may you use it?

The Different Faces of ngModel
02:07

There is an alternative approach you may use - learn a bit more about it in this lecture.

An Alternative to the Approach Shown in This Module
01:16

Does the reactive approach sound interesting to you? Learn more about it in this lecture.

Using the Reactive Approach
00:19

Let me wrap this module up and summarize what we learned.

Wrap Up
00:42

Want to dive deeper? This lecture is for you!

Useful Resources & Links
00:06
+
Changing Pages with Routing
12 Lectures 39:04

Let me introduce you to this module and the topics we'll cover.

Module Introduction
01:09

It's key to understand the differences between server-side and client-side routing. We'll take a closer look at this question in this lecture.

Server-side vs Client-side Routing
03:52

When using routing, it makes sense to have a header. In this lecture, we're going to create one.

Adding a Header Component
02:52

Enough of the preparation - time to finally add routing to our application!

Adding Routing to the Application
04:30

Having routes is great, but typically, you provide a better user experience if you provide links. Learn how to easily add links in this lecture.

Navigating with Router Links
05:15

If the user enters an unknown route, you probably want to handle that. This lecture dives into your options.

Handling Unknown Routes with Wildcards and Redirects
01:32

Now we're getting advanced - let's dive into child routes and route params!

Using Child Routes and Route Parameters
07:30

Being able to pass dynamic data via route params is great but it's only useful if you can extract that data. This lecture shows you how that works.

Extracting Route Paramters
05:50

Did you notice that the page reloads unexpectedly? Let's fix this issue in this lecture - it's a common gotcha!

Fixing Page Reload Issues
01:28

With routing added, we may clean up our app. Whilst doing that, we'll discover that it kind of broke. We'll fix it soon though!

Cleanup & Missing Reactivity
04:07

Let me wrap this module up and summarize what we learned.

Wrap Up
00:58

Want to learn more? This lecture is for you!

Useful Resources & Links
00:01
+
Reactivity, RxJS and Observables
7 Lectures 15:21

Let me introduce you to this module and the topics we'll cover.

Module Introduction
01:21

We already used it in this course: subscribe(). What does it actually do though? Learn more about it in this lecture.

Understanding subscribe()
03:42

We need more reactivity in our course project. And actually, you often need to be able to push events from one part of your app to another part. This lectures shows you to use Subjects for exactly that purpose.

Using Subjects as Event Emitters
05:44

When subscribing to your own Subjects (or Observables), you have to make sure to unsubscribe() in time. This lecture dives into the details.

Managing Subscriptions
02:17

Let me give you some additional information about RxJS and Observables.

More on RxJS and Observables
01:15

Do you want to learn more about RxJS and Observables? Check out this article/ the links in the article.

Dive Deeper into RxJS
00:09

Let me wrap this module up and summarize what you learned in it.

Wrap Up
00:53
+
Connecting to APIs via Http
10 Lectures 25:20

Let me introduce you to this module and the topics we'll cover in it.

Module Introduction
01:03

In order to send Http requests, we'll need the Angular Http service. Learn how to inject it in this lecture.

Injecting the Angular Http Service
04:27

With the Http service injected, let's use it to send a GET request.

Sending a GET Request
04:50

Do you want to pass data TO the server instead of fetching it? Have a look at this lecture!

Sending a POST Request
00:41

The response you receive may not be in the format you need it to be. Learn how to easily transform it with Observables power in this lecture.

Transforming Responses
06:23

We got data, now we have to make sure our UI reflects that. Let's dive into this issue in this lecture.

Updating the UI
01:11

What else can you do from this point on? Let's take a look in this lecture.

Further Options
01:53

With the addition of our Http GET request, we introduced a bug into our app. Did you find it yet? Let's fix it together!

Fixing a "Bug" we Introduced into Our Project
03:41

Let me wrap this module up and summarize what you learned.

Wrap Up
01:07

Want to dive deeper? Have a look at this lecture!

Useful Resources & Links
00:03
2 More Sections
About the Instructor
Maximilian Schwarzmüller
4.7 Average rating
43,034 Reviews
131,920 Students
15 Courses
Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS) I also became more and more of a frontend developer using modern frameworks like Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 100.000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.