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!
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!
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.
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.
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.
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.
Let's dig into a few of the primary pieces that go into making an Angular 2+ app.
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.
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.
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.
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.
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.
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.
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.
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.
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!
When he's not coding, Ryan is hanging out with his wife, playing guitar, or nerding out about outer space.
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.