Angular Crash Course

Course Overview
Hi there. I'm Joe Eames, and welcome to the Angular Crash Course. I'm a Google Developer Expert and front-end web developer, and I'm excited to present this course to you. Angular is an amazing, fully featured framework used by many companies big and small across the world, and learning it can be great for your career, but you may need to learn it quick. So, in less than 1 hour, we're going to learn all the basics of Angular with a minimum of fuss and ceremony. We'll get straight to each point. We won't see every possibility, we'll just see the typical stuff that you'll need to build an Angular app, including components, services, forms, routing, and server communication. By the time we're through, you'll have seen all the basics of Angular and will be ready to step into building your own application. Before starting the course, you should be familiar with JavaScript, Node, HTTP and the web, and npm. I hope you'll join me on this journey to learn Angular quickly with the Angular Crash Course, at Pluralsight.

Introduction to Angular
Welcome to Pluralsight's Angular Crash Course. This is a course I've been particularly excited to build. Angular's a great framework and it has a lot of depth to it, but sometimes you just want to get straight to the meat. This simple, fast-paced, 1-hour introduction to Angular will teach you the essentials of Angular in a very short amount of time. Let's look at our agenda. We're going to start off with this introductory module, then we'll take a look at the basic building blocks of Angular, then we'll dive deeper into components, then we'll look at how we use forms with Angular. After that, we'll go over HTTP, then we'll head into routing, and finally we'll finish up with how we take Angular to production. The demo application that we're going to build is a very simple application that lets you track your weight. We start off with a home page that shows a bunch of weight entries, and at the bottom it has a way for you to add a new entry to your weight log. It allows you to delete entries or look at the details of a given entry. There's a very simple community page, and finally there's some simple login and logout functionality. I built a GitHub repository for this course, you're going to want to clone this repository down to your local machine and run an npm install. I cloned it into a folder called Healthy Me, and that's what we'll be working out of for this course, but you can clone it into any directory that you want.

Components in Depth
In this module, we're going to take a deeper look at components. We're going to start off by looking at pipes. Pipes are ways for us to format the data that is displayed by our components. We're then going to look at template syntax. Then we'll check out using child components, and within that we'll see how to send data into a component using the input decorator, and how to get data out of a component through an event using an output decorator. So let's start by looking at pipes. So our data looks bad, we want to fix that, that's where pipes come to the rescue. We'll head over to our code, and the way we create a pipe is by actually using the pipe character. Let's do bodyfat first, we use the pipe character after the data, and then we specify the name of the pipe. Angular has a bunch of built-in pipes, this is a percentage, so we're going to use the percent pipe. Save that, we look at the data, notice the bodyfat is now a percent. We'll do the same thing for date, we're going to put in a pipe and make this a date. And pipes can take in parameters in the case of a date pipe, it can take in a parameter like a format. So, for example, we could do MM/dd/yyyy, you do need to know how that format works, but we're just going to accept the default format, and let's put lbs after our weight, and now our data's looking a lot sharper.