Angular Crash Course

Angular is an amazing and fully-featured framework, but it has so many features. In this course we cut right to the core pieces. In less than an hour, you'll learn everything you need to build your own Angular applications.
Course info
Rating
(41)
Level
Intermediate
Updated
Nov 1, 2018
Duration
58m
Table of contents
Description
Course info
Rating
(41)
Level
Intermediate
Updated
Nov 1, 2018
Duration
58m
Description

Angular is one of the most popular front end frameworks out there. Learning to use it is great for your career, but you may not need an in-depth approach. In this course, Angular Crash Course, in less than 60 minutes, you will learn all of the foundational pieces of Angular. First, you will learn the basic building blocks: components, modules, and services. Then, you will see how to handle forms, routing, and templates. Finally, you will learn how to build your application to put it into production. When you are finished with this course, you will feel confident in your ability to develop applications in Angular.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Angular Fundamentals
Intermediate
9h 35m
Feb 1, 2019
Unit Testing in Angular
Beginner
3h 20m
Sep 6, 2018
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

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.