Angular 2+ with Typescript - Essential Training
4.3 (859 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.
30,768 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2+ with Typescript - Essential Training to your Wishlist.

Add to Wishlist

Angular 2+ with Typescript - Essential Training

Learn Angular 2 (or 4) from the ground up | This course combines a Project, Slides and Quizzes | Perfect for beginners
4.3 (859 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.
30,768 students enrolled
Created by Patrick Schroeder
Last updated 6/2017
English
English
Current price: $10 Original price: $195 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 27 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the Fundamental Concepts of Angular 2
  • Develop Angular 2+ Applications using Best Practices
  • Learn and Use TypeScript
  • Understand Modules, Components, Routing and Services
  • Understand HTTP and Observables
  • Know how to pass Data between components using Input and Output
View Curriculum
Requirements
  • Basics of Javascript
Description

*** Updated for latest version of Angular 2. Project works with Angular 4. ***

Learn all the essentials of building Angular 2+ applications right here. 

This is a beginner level course aimed at those new to Angular 2 and Typescript.  No previous knowledge of either is required before starting this course.

This course combines slides, projects and quizzes in a clear, concise and engaging way to guide you through the core concepts of Angular 2 and Typescript.

...

⭐⭐⭐⭐⭐ 

This is the best explain course on Angular 2 I've seen so far, keep up the good work!

-- Adrian T.

⭐⭐⭐⭐⭐ 

Excellent course, in a very short time span I come to know all the important information about Angular 2, this course really cover all the aspects of Angular 2 for beginners as well as for experience. Thank you very much for making such amazing course.

-- Subhobroto Roy

⭐⭐⭐⭐⭐ 

Great course! Perfect for beginners. It is exactly what I was looking for - building a real life project from scratch with a lot of explanations and examples. I highly recommend it for beginners!

-- Ivan Atanasov

...

Each section will contain an introduction to a new concept. Followed by a slide-based presentation to get you familiar with the concept, and then an example inside of our application to cement your understanding. 

You will gain a solid foundation for building real-world applications following best practices and the Angular 2 style guide. This includes how to build components, create shared services, navigate between views, manage data using observables, and bind data using expressions inside your HTML templates.

By the end of this course, you will have a clear understanding of how to to build Angular applications with many real-world features. As a result, you will feel empowered to go out into the wild and start creating your own Angular 2 applications!

What you'll learn:

  • Typescript
  • Components
  • Pipes
  • Data Binding
  • NgModules
  • Routing
  • Input/Output
  • HTTP
  • Observables 
  • Interfaces
  • Directives
  • Lifecycle Hooks

...

Course updated regularly with new content to stay relevant & up-to-date!

...

⭐⭐⭐⭐⭐ 

This course is accessible and gives information that are factual and easy to to understand (even to a newbie like me). The content of the technical part is easy to understand and straightforward making the course a great way to learn : first a part that explains the nature of the "code", then an example of application of the "code" ("code" is for all the different types : modals, interfaces, and so on). I highly recommend this course.

-- Geslin JB

Who is the target audience?
  • Beginners to Angular 2
Students Who Viewed This Course Also Viewed
Curriculum For This Course
66 Lectures
03:00:10
+
Introduction
1 Lecture 01:45

What you should know and what to expect.

Repo is located here: https://github.com/jakblak/learn-angular2

Download the slides here: https://www.slideshare.net/PatrickSchroeder1/angular-2-essential-training

Preview 01:45
+
Getting Started
5 Lectures 11:19

Hello and welcome to the getting started section of this course.

Repo is located here: https://github.com/jakblak/learn-angular2

Download the slides here: https://www.slideshare.net/PatrickSchroeder1/angular-2-essential-training


Intro to Getting Started
00:33

So what exactly is Angular? AngularJS is a leading framework for building javascript heavy single-page web applications.

Repo for this course: https://github.com/jakblak/learn-angular2

Preview 03:26

Angular 2 was conceived as a complete rewrite to Angular 1 in order to fulfill the expectations of modern developers who demand blazing speed and responsiveness from their web applications.

Preview 01:56

Which language to use? Angular 2 provides a variety of options when choosing a language to code in. We can use ES5 which is the current version of javascript, Dart, CoffeeScript, either of the newer versions of javascript known as ES2015 and a future version of javascript known as ES7 or Typescript, which is the preferred language.

Language Options
01:29

Now that we’ve made the decision to code using the Typescript language, lets take a brief look at some of the core language characteristics as it relates to Angular 2.

Preview 03:55

Section 2 Quiz
5 questions
+
Angular 2 Setup
4 Lectures 07:39

In this section, we’ll look at the different developer environment options and set up our first Angular app.

Intro to Setup
00:41

In this lecture, we discuss operating systems, installing Node.js and choosing an editor.

Developer Environment
02:26

Getting setup with our starting code. 

Starter Files Setup
02:31

Understand the concept of modules.

Hint: Module = File

Understanding Modules
02:01

Section 3 Quiz
4 questions
+
NgModules
3 Lectures 06:11

Introduction to section.

NgModules Introduction
00:47

The Angular docs tell us that NgModules are used in order to help us organize our application into cohesive blocks of functionality. So lets explore exactly what they mean by that.

NgModules Explained
02:51

In this video you’ll learn how we bootstrap our application which is the process of putting together the minimal pieces needed to run an Angular application.

Bootstrapping Our App
02:33

Section 4 Quiz
2 questions
+
Components
7 Lectures 19:28

Components are at the heart of Angular 2. In this section we’ll discuss how to create and use components to encapsulate functionality.

Components Intro
00:29

Components are the foundation of modular development and are brand new in Angular 2.

Preview 01:35

To get you familiar using components, lets reconstruct our AppComponent making a few changes.

App Component Explored
03:13

In this video we discuss what comprises a component and how we should be structuring our components.

Preview 03:05

Lets now go through the process of creating a new nested component to act as a directive as well as walk through how to use a templateUrl and styles within our component.

Components as Directives
05:08

Discussion of how to hide our Javascript files from appearing in the editor.

Hiding Our Javascript Files
01:22

In this video we’re going to update our app so that it starts to look more like our sample application.

Preview 04:36
+
Data Binding
7 Lectures 14:41

Data binding is the mechanism we use for communicating between the template and the component class.

Data Binding Intro
01:06

The fist type of data binding we’ll discuss is that of 1-way binding. One way binding is handled using either interpolation or property binding.

One-Way Data Binding
01:20

In this video we’re going to make our books-list component the main page of our application. Then we’ll add in some new data in order to demonstrate data-binding.

One-Way Binding in Our App
04:59

The next type of binding we need to talk about is that of 2-way binding. When using 2-way binding our view is bound to our model.

2-Way Data Binding
01:19

Add 2-way binding to our search field.

2-Way Binding in Our App
02:01

Event binding is used to respond to user actions.

Event Binding
01:35

Back in our app we’re going to create event binding to toggle between showing or hiding one of our images.

Event Binding in Our App
02:21
+
Directives
5 Lectures 13:58

You can think of a Directive in Angular as an HTML element or attribute that is used to extend and enhance our HTML.

Directives Intro
01:27

This video will cover component and attribute directives.

Attributes Directive
02:53

We use the NgIf directive when we want to add, remove or update view elements.

NgIf
02:37

The NgFor directive instantiates a template once per item from an iterable.

NgFor
03:42

The ngClass directive adds and removes CSS classes on an HTML element.

NgClass
03:19
+
Pipes
3 Lectures 09:34

Pipes allow us to transform or format our data. In this way we can take data given to us by an API or database and make it more appropriate for our needs inside of our application.

Pipes Intro
00:48

Angular provides us with some built-in pipes that we can easily use inside of our templates. These include: uppercase, lowercase, decimal, currency, date and JSON.

Built-in Pipes
03:24

In this video we’re going to see how you can go about creating your own custom pipe. We'll first walk through the process in our slides and then build a Truncate Pipe to limit the amount of characters displayed in a description.

Custom Pipes
05:22
+
Interface
4 Lectures 08:11

In this section we’re going to be talking about Interfaces in Typescript. We’ll start off with a definition of what interfaces are and explore why they are used.

Interface Intro
00:27

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Interface Explained
02:03

Interfaces are used within typescript in order to define the data types for a grouping of properties and methods.

Using Interfaces
03:19

Lets now create and export a Book interface.

Interface Example in Our App
02:22
+
Lifecycle Hooks
3 Lectures 06:38

In this section we’re going to be discussing how to use component lifecycle hooks.

Lifecycle Hooks Intro
00:35

Angular defines lifecycle hooks as a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Lifecycle Hooks Explained
02:58

Lets now see how to add a new lifecycle hook to our application.

Lifecycle Hooks Example
03:05
6 More Sections
About the Instructor
Patrick Schroeder
4.2 Average rating
6,470 Reviews
98,404 Students
9 Courses
Software Developer

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.