Angular 7 (formerly Angular 2) - The Complete Guide
4.6 (79,305 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
250,166 students enrolled

Angular 7 (formerly Angular 2) - The Complete Guide

Master Angular (Angular 2+, incl. Angular 7) and build awesome, reactive web apps with the successor of Angular.js
Bestseller
4.6 (79,305 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
250,166 students enrolled
Last updated 4/2019
English
English [Auto-generated]
Current price: $11.99 Original price: $189.99 Discount: 94% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 28.5 hours on-demand video
  • 40 articles
  • 98 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Develop modern, complex, responsive and scalable web applications with Angular 7
  • Fully understand the architecture behind an Angular 7 application and how to use it

  • Use their gained, deep understanding of the Angular 7 fundamentals to quickly establish themselves as frontend developers

  • Create single-page applications with one of the most modern JavaScript frameworks out there
Course content
Expand all 427 lectures 28:33:49
+ Getting Started
11 lectures 36:31

First things first! What is Angular? Why would you want to learn it? This lecture helps answering this question.

Preview 01:59

So many Angular versions! What's up with them and which version does this course cover?

Preview 02:44

Got issues using the CLI, setting up a project or simply want to learn more about it? Check out this lecture.

Preview 01:35

Enough of the talking, let's create our first Angular project and view our first app in the browser.

Preview 06:11

Let's edit our first app!

Preview 10:05

How is this course structured? This lecture answers the question and explains what you're going to learn!

Preview 04:00

Of course you can simply go through all the lectures, but to get the most out of the course, you should consider the advises given in this lecture.

Preview 02:25

Angular uses TypeScript. What does that mean for you?

Preview 02:09

A lot of sections of this course will start with a basic setup - this lecture explains how that basic setup is created with the CLI.

Preview 04:11

Do you get some strange error? Are you stuck? Have a look at the source code of this course.

Where to find the Course Source Code
00:14
+ The Basics
29 lectures 01:46:26

Let me introduce you to the module and explain what you're going to learn.

Module Introduction
00:56

We saw our first App run in the browser but do you really know how it got there? This lecture answers the question.

How an Angular App gets Loaded and Started
07:11

Angular is all about Components! This lectures takes a closer look and explains what Components really are.

Components are Important!
03:08

Thus far, we worked with the AppComponent. Time to change this and create our first own component.

Creating a New Component
06:51

Did you recognize that AppModule file? It's super important - this lecture explains what it's about!

Understanding the Role of AppModule and Component Declaration
05:15

Now that we learned how to create and register our own components, let's now dive into using them.

Using Custom Components
01:12

We can also use the CLI to create components. This lecture explains how that then works and also how you may nest components.

Creating Components with the CLI & Nesting Components
03:51

A Component needs to have a Template. It's an absolute must. This lectures dives deeper into templates.

Working with Component Templates
03:08

Whilst a Component is required to have a template, Styles are optional. This lectures explains how you may add styling.

Working with Component Styles
04:02

The Selector of a Component is important if you want to include it in another template. This lecture explains how that selector actually works and what to watch out for.

Fully Understanding the Component Selector
03:50
Time to practice what you learned about Components. In this assignment, you're going to create, use and style your own components and see practice how you can build up your Angular app with Components.
Practicing Components
1 question
[OPTIONAL] Assignment Solution
06:42

Enough about Components for now - let's finally output more dynamic content now. Databinding is super important when it comes to that. This lectures explains what Databinding is.

What is Databinding?
02:49

One of the simplest forms of Databinding is String Interpolation which allows you to output text in your template. This lecture takes a closer look.

String Interpolation
05:19

Property Binding is another form of Databinding - also related to outputting content. Learn more about it in this lecture.

Property Binding
06:34

Since both Property Binding and String Interpolation are related to outputting content, which one should you use? This lecture helps you with that decision!

Property Binding vs String Interpolation
03:07

So far, we only passed data to the template. What if we want to react to (User) Events? Event Binding to the rescue!

Event Binding
04:09

To which Properties and Events can you bind? This article should be helpful.

Bindable Properties and Events
00:22

When we're talking about Events, we have to consider passing data. This lecture explains how that works.

Passing and Using Data with Event Binding
04:37
Important: FormsModule is Required for Two-Way-Binding!
00:13

You can also combine event and property binding - with Two-Way-Databinding. Learn more about it in this lecture.

Two-Way-Databinding
02:47

We learned about the different forms of Databinding, let's now combine them!

Combining all Forms of Databinding
01:46
You learned a lot about Databinding! Time to practice it on your own. In this assignment, you're going to use the different forms of Databinding and see how you may use them in your app.
Practicing Databinding
1 question
[OPTIONAL] Assignment Solution
05:12

Directives are another important building block in Angular apps. Learn more about it in this lecture.

Understanding Directives
02:17

ngIf is one of the built-in directives - it's super helpful if you want to output data dynamically.

Using ngIf to Output Data Conditionally
03:53

ngIf is not limited to the usage you learned in the last lecture. Learn how to use it together with an else condition in this lecture.

Enhancing ngIf with an Else Condition
02:46

Want to change some styles dynamically? ngStyle is what you're looking for.

Styling Elements Dynamically with ngStyle
05:01

Kind of related to the dynamic styling - you can also apply CSS classes dynamically with ngClass.

Applying CSS Classes Dynamically with ngClass
02:53

What if you wanted to output lists (e.g. an array)? ngFor is there for you.

Outputting Lists with ngFor
03:43
The last assignment for this course section. Practice what you learned about Directives and use the most common Directives on your own!
Practicing Directives
1 question

ngFor also allows you to get the Index of the current iteration - this lecture explains how that works.

Getting the Index when using ngFor
02:52
+ Course Project - The Basics
17 lectures 01:03:43

Time to get started with the Course Project.

Project Introduction
01:04

How should the Angular app we're building look like? Let's plan which features and components we need.

Planning the App
05:33

This is an important one - make sure to not skip this lecture!

Installing Bootstrap Correctly
00:29

Let's get our hands dirty and set the app up.

Setting up the Application
04:31

Time to create the components we planned to create. Try doing it on your own first!

Creating the Components
09:33

With the components created in the last lecture, it's now time to use them so that we can see something.

Using the Components
03:15

Later in this course, we want to switch pages - setting up a navigation bar sounds like a great idea for that.

Adding a Navigation Bar
05:09

Our navbar collapses and we don't offer a hamburger menu. Feel free to implement one on your own or change the code as outlined here.

Alternative Non-Collapsable Navigation Bar
00:12

We're also going to use some data in this project - time to create a model for that data.

Creating a "Recipe" Model
04:33

With the model and the component created, we can now add some content to our component template.

Adding Content to the Recipes Components
07:41

In the end, we want to have more than one recipe, so let's prepare our template to output such a list.

Outputting a List of Recipes with ngFor
04:37

We also want to display some detailed information about selected recipes, so let's add the appropriate code.

Displaying Recipe Details
05:52

We worked on the Recipe Components, let's now do the same for the shopping list.

Working on the ShoppingListComponent
01:49

As with the Recipe, we're also going to use some Ingredients in our app - let's add the respective model.

Creating an "Ingredient" Model
02:35

With the model added, we can work on outputting some ingredients.

Creating and Outputting the Shopping List
02:27

We also want to be able to add new Ingredients to the Shopping List, so let's add the respective feature.

Adding a Shopping List Edit Section
03:28

Part one of the app is finished. We achieved a lot but a lot of features are also still missing - time to move on and learn more about Angular.

Wrap Up & Next Steps
00:54
+ Debugging
3 lectures 12:09

Things don't always go the way you want them to go. Learn how to read Angular's error messages.

Understanding Angular Error Messages
04:36

It can be incredibly useful to debug your app in the browser - learn more in this lecture.

Debugging Code in the Browser Using Sourcemaps
05:32

Augury is a nice plugin you can use to dive deeply into your app in the browser.

Using Augury to Dive into Angular Apps
02:01
+ Components & Databinding Deep Dive
19 lectures 01:24:16

We already learned some things about components but now it's time to dive deeper into them!

Module Introduction
00:36

This lecture explains how you may split an existing app into multiple new components.

Splitting Apps into Components
05:56

You already learned about property and event binding - but you didn't learn everything about it. Time to do so now.

Property & Event Binding Overview
01:44

You're not limited to binding to built-in properties. Indeed, binding to custom property is a key feature of Angular apps. Time to learn more about it.

Binding to Custom Properties
05:43

Sometimes, you want to use a different property name outside of a component than inside of it. This lecture explains how to do that.

Assigning an Alias to Custom Properties
01:59

As with property binding, you can also bind to custom events.

Binding to Custom Events
09:05

You may also assign an alias to your custom events.

Assigning an Alias to Custom Events
00:57

Let me summarize the things you learned about property and event binding.

Custom Property and Event Binding Summary
02:02

Angular allows you to apply different styles to different components - this lecture explains how that works.

Understanding View Encapsulation
04:59

Let's dive deeper into View Encapsulation.

More on View Encapsulation
02:43

Sometimes, you want to get access to some of your HTML elements. Local references allow you to do just that.

Using Local References in Templates
04:36

You got the local references in the templates, but you can also access your elements directly from the TypeScript file - this lecture explains how that works.

Getting Access to the Template & DOM with @ViewChild
05:02

Want to pass structured content (e.g. HTML code) into another component? Learn more about it in this lecture.

Projecting Content into Components with ng-content
03:22

Components follow a certain lifecycle - this lecture dives deeper into this topic.

Understanding the Component Lifecycle
04:54

Let's see those lifecycle hooks in action.

Seeing Lifecycle Hooks in Action
11:55

How can we access template elements in different lifecycle hooks? Let's find out ...

Lifecycle Hooks and Template Access
02:33

You may also get access to the content projected into a component - let's also see how that works in lifecycle hooks.

Getting Access to ng-content with @ContentChild
03:00

Let me wrap up this section about Components  & Databinding

Wrap Up
00:49
Time to practice the things you just learned! In this assignment, you're going to bind to your own events and properties and also use view encapsulation to style everything just the way it should look like.
Practicing Property & Event Binding and View Encapsulation
1 question
[OPTIONAL] Assignment Solution
12:21
+ Course Project - Components & Databinding
6 lectures 31:07

Now that we learned how to pass data to components, let's enhance our app.

Introduction
00:50

Let's use the new features to add a first version of our app navigation - using custom events and ngIf.

Adding Navigation with Event Binding and ngIf
07:31

We can not only listen to our own events, we can also pass data to components now, so let's do so.

Passing Recipe Data with Property Binding
04:43

Let's build a more complex chain of custom property and event binding to pass data around.

Passing Data with Event and Property Binding (Combined)
10:31
Make sure you have FormsModule added!
00:10

The user should also be able to add ingredients to the shopping list, so let's add such a feature.

Allowing the User to Add Ingredients to the Shopping List
07:22
+ Directives Deep Dive
12 lectures 47:02

Let me explain what this module is about!

Module Introduction
01:23

We already learned about them, let's quickly recap ngIf and ngFor.

ngFor and ngIf Recap
03:36

We already know ngStyle and ngClass but let me quickly refresh our knowledge on them.

ngClass and ngStyle Recap
02:57
Creating a Basic Attribute Directive
06:42

The directive we built is okay but can be enhanced. Let's do so now in this lecture.

Using the Renderer to build a Better Attribute Directive
07:04

This lecture allows you to dive deeper into the Renderer.

More about the Renderer
00:14

When using directives, you have an easy way of reacting to events on your hosting element. Learn more about it in this lecture.

Using HostListener to Listen to Host Events
03:00

You're not limited to reacting to events, you can also bind to properties of the hosting element. This lecture explains how that works.

Using HostBinding to Bind to Host Properties
03:17

Property binding is of course not limited to components - let's bind to some directive properties!

Binding to Directive Properties
06:43

We not only have attribute directives, we also use structural directives. What's that strange "*" all about though?

What Happens behind the Scenes on Structural Directives
03:04

Let's build our own structural directive!

Building a Structural Directive
06:13

There's another nice built-in structural directive: ngSwitch. Learn more about it in this lecture.

Understanding ngSwitch
02:49
+ Course Project - Directives
1 lecture 06:25

Time to add a custom directive to the course project - let's enable the dropdowns by building a DropdownDirective!

Building and Using a Dropdown Directive
06:25
+ Using Services & Dependency Injection
10 lectures 34:14

Services are a core concept of Angular - let me explain what you may expect from this section.

Module Introduction
01:39

Services are important - but why? This lecture explores this question.

Why would you Need Services?
02:04

Now that we understood what services are, let's create a Logging service.

Creating a Logging Service
03:32

We got a service but how can we use it now? Angular will help us - this lecture explains how.

Injecting the Logging Service into Components
06:21

We got the basics set now. Time to build another service and ramp up our game!

Creating a Data Service
06:41

We learned a lot about services - time to make the next step. Angular actually allows us to control how many instances of a service get created. Learn more about this in this lecture.

Understanding the Hierarchical Injector
02:40

How many services should it be?

How many Instances of Service Should It Be?
02:12

You're not limited to using Services in components or directives. This lecture explains how you may use services in services, too.

Injecting Services into Services
04:23

Besides the usecases already covered in this module, services can also be very useful when it comes to allowing cross component communication. This lecture dives deeper.

Using Services for Cross-Component Communication
04:06
Time to practice the usage of Services. You're going to build, inject and use your own Services. Make sure you get the instance management right!
Practicing Services
1 question

Are you using Angular 6? Don't miss this new way of providing services.

Services in Angular 6+
00:36
+ Course Project - Services & Dependency Injection
8 lectures 30:48

Time to practice services and add some to our project!

Introduction
01:23

Let's create some service files for the services we're actually going to use in this section.

Setting up the Services
01:15

A great candidate for a service is the management of our recipes - let's build a service for that!

Managing Recipes in a Recipe Service
04:07

We learned, that services may be used for cross component communication. Let's add this feature to our app.

Using a Service for Cross-Component Communication
05:07

Let's add the the shopping list service to our app!

Adding the Shopping List Service
05:04

Besides setting up services which may be queried by other "parts" of our app, we can also actively send out messages. Let's take a closer look in this lecture.

Using Services for Pushing Data from A to B
03:08

Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List. For that, we need Ingredients on Recipes - let's add them now.

Adding Ingredients to Recipes
03:41

Almost done! Let's finetune our app by allowing the addition of ingredients from a Recipe to the Shopping List.

Passing Ingredients from Recipes to the Shopping List (via a Service)
07:03
Requirements
  • NO Angular 1 or Angular 2 knowledge is required!
  • Basic HTML and CSS knowledge helps, but isn't a must-have
  • Prior TypeScript knowledge also helps but isn't necessary to benefit from this course
  • Basic JavaScript knowledge is required
Description

This course starts from scratch, you neither need to know Angular 1 nor Angular 2! (Angular 7 simply is the latest version of Angular 2)

Join the most comprehensive and popular Angular course on Udemy, because now is the time to get started! 

From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

Angular is one of the most modern, performance-efficient and powerful frontend frameworks you can learn as of today. It allows you to build great web apps which offer awesome user experiences! Learn all the fundamentals you need to know to get started developing Angular applications right away.

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular team and the language you'll mostly see in Angular tutorials. It's a superset to JavaScript and makes writing Angular apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular?

Angular is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 7 simply is the latest version of the Angular framework and simply an update to Angular 2.

Angular is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular (=Angular 7) you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular.

Get a very deep understanding of how to create Angular applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular offers and how to apply them correctly.

Specifically you will learn:

    • Which architecture Angular uses

    • How to use TypeScript to write Angular applications

    • All about directives and components, including the creation of custom directives/ components

    • How databinding works

    • All about routing and handling navigation

    • What Pipes are and how to use them

    • How to access the Web (e.g. RESTful servers)

    • What dependency injection is and how to use it

    • How to use Modules in Angular

    • How to optimize your (bigger) Angular Application

    • We will build a major project in this course

    • and much more!

Pay once, benefit a lifetime!

Don’t lose any time, gain an edge and start developing now!

Who this course is for:
  • Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
  • This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework
  • Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular