Getting Started with Angular 2+
4.4 (892 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,976 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Getting Started with Angular 2+ to your Wishlist.

Add to Wishlist

Getting Started with Angular 2+

Learn how to build your first Angular 2+ app!
4.4 (892 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,976 students enrolled
Last updated 5/2017
English
English [Auto-generated]
Price: Free
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • You will learn the basics of how to build a simple but real-world application with Angular.
  • You will learn how to use some of the most common features of Angular, including components, directives, forms, HTTP, and more!
  • You will learn about the structure of an Angular applications and how components fit together with one another.
  • You will learn how to use injectable services and how to make XHR requests from them using Angular's Http module.
View Curriculum
Requirements
  • You should have a working knowledge of JavaScript, HTML, and CSS, but by no means do you need to be an expert.
Description

Want to learn how to build apps with Angular 2? Let's build one together!

Angular is arguably the most popular framework in the world for building single page applications. You may have heard that Angular version 2 is completely different from the original AngularJS, and this is indeed the case. While this can cause frustration for developers who are upgrading their apps, it is ultimately for the best because Angular 2 is so much nicer to work with!

Part of the challenge when it comes to learning Angular 2 is that we need to adopt several new peripheral skills in addition to learning features of the framework itself. For example, most Angular 2 applications are written in a newer language called TypeScript. TypeScript is a superset of JavaScript (meaning that it's just like JavaScript, but with additional features,) but learning it can initially be a challenge.

In this course we'll get down to basics with Angular 2. We'll get a really good sense of how to use it by building out ng2-cribs, a real estate listing application that allows users to view listings, search and filter them, and add new ones in.

By the end of this course you'll have a great idea of how to build an Angular 2+ app and you'll have a great knowledge base from which you can go deeper.

See you in the course!

Who is the target audience?
  • Anyone who is completely new to building single page apps
  • Anyone who wants to upgrade from AngularJS to Angular2+
  • Anyone who has started building an app with Angular 2+ but needs more guidance
Students Who Viewed This Course Also Viewed
Curriculum For This Course
14 Lectures
02:03:57
+
Getting Started
2 Lectures 06:12

Hey there! I'm Ryan and I'm really excited that you're taking my Getting Started with Angular 2+ course here on Udemy :) I'd like to tell you a bit more about myself, what you'll get out of the course, and also a bit about the recent history of Angular.

History of Angular / Meet the Author
04:05

You likely want to know how to build a full out app in Angular 2+. To get you there, we'll build a simple real estate listing app together.

What We'll Build
02:07
+
Angular 2+ Principles
3 Lectures 29:24

Angular 2+ is built with TypeScript and even though it isn't required, we're encouraged to use it when building our own apps. Let's take a brief look at what TypeScript is and why it's useful.

Just Enough TypeScript
06:57

The Angular CLI makes it stupid easy to scaffold out an Angular 2+ project and to generate components, services, and many other pieces of our apps.

Using the Angular CLI
11:22

Let's dig into a few of the primary pieces that go into making an Angular 2+ app.

The Anatomy of an Angular 2+ App
11:05
+
Building Out the App
8 Lectures 01:25:38

When it comes down to it, web apps are mostly just a mechanism for listing out data on a screen. To do this effectively, most single page app frameworks provide a mechanism to repeat over a collection of data within a single template. In this video we'll use Angular's NgFor directive to loop over our list of Cribs and then interpolate values in the dataset out to the screen.

Repeating Over Data with ngFor
09:30

We've got the cribs data on the screen, but so far it's just being listed out without much of a user interface. In this video, we'll display the data in card format and use some Angular features like structural directives and event bindings to make the template dynamic.

Improving the Display with Bootstrap
10:12

Right now we're rendering the crib cards in just one location, the main view of the app. But what happens if we wanted to reuse them in other spots later on? As it stands, we'd need to copy the HTML and any logic over to a new location, but this isn't ideal. Instead we should make a reusable display component so that we have an easier time with maintainability in the future.

Reusable Components
07:36

If we don't know how our objects should be shaped, we can easily run into problems if we try to use a property that doesn't exist. We can make things easier for ourselves by implementing TypeScript interfaces. Interfaces allow us to say exactly which properties should be on an object which means we can be warned ahead of time if we try to do something that doesn't make sense.

Implementing an Interface
05:08

For real world applications, getting data from a static TypeScript file just doesn't cut it. Most web applications need to get their data from a server of some kind, and for many scenarios, the best way to do that is to use Angular's Http class. In this video we'll introduce Http and make a request for our data from a local JSON file. We'll also move the Http call into a service so that it's reusable across the application.

Switching to Http
14:37

Angular 2 provides a really powerful forms API which allows us to easily get values out of the form and to do things like validation. The first step in setting up the form is to build a template for it. Let's build a form template to let users submit new crib listings.

Setting Up the Form Template
10:21

When we want to communicate between sister components via a service, we can make use of RxJS. One of the easiest ways to implement a communication bus is to use an RxJS Subject, which acts as both an observable and an observer.

Communicating Between Components
10:43

We'll often want to be able to transform data on the fly. Perhaps the user wants to narrow their search results based on some criteria, or they want to rearrange the ordering of the data as it appears on the screen. For this, Angular gives us the concept of a 'Pipe'. Let's provide users a way to reorder their data by implementing a custom 'sortBy' pipe.

Adding a Pipe
17:31
+
Wrapping Up
1 Lecture 02:43

The application we built here gave us just a small taste of how to use Angular 2+. Let's talk about where to go from here!

Bonus Lecture: Further Learning at Angularcasts.io
02:43
About the Instructor
Ryan Chenkie
4.4 Average rating
2,563 Reviews
35,021 Students
3 Courses
Full-Stack Developer

Ryan is a full-stack JavaScript developer and works mostly with Angular and Node. He's a Google Developer Expert, Product Owner at Auth0, and also runs Angularcasts.io, a screencast site offering end-to-end Angular and JavaScript training.

When he's not coding, Ryan is hanging out with his wife, playing guitar, or nerding out about outer space.

Angularcasts: End-to-end Angular Screencasts
4.4 Average rating
887 Reviews
11,976 Students
1 Course
​Learning Angular can be tricky. At Angularcasts, it's easy.

I'll guide you through how to build real-world apps with Angular from start to finish. At Angularcasts you'll learn how to use the framework itself with topics ranging from beginner to advanced levels.

You'll also learn how to integrate backends and databases, how to create mobile apps with Ionic, how to secure your applications with JSON Web Tokens, and much more.