Rapid Angular Training

This course is designed to quickly teach you all of Angular's key features. It uses an interactive question and answer format which is challenging and fun, but gets right to the point of what you need to know about Angular.
Course info
Rating
(50)
Level
Intermediate
Updated
Oct 6, 2017
Duration
3h 11m
Table of contents
Course Overview
Introduction
Components
Programming Components
Services and Providers
Data Access with HTTP and RxJS
Forms
Routing and Navigation
Modules, AOT Compilation, and Lazy Loading
Additional Angular Features
Description
Course info
Rating
(50)
Level
Intermediate
Updated
Oct 6, 2017
Duration
3h 11m
Description

This course is aimed at professional developers who are getting into Angular need a quick way to learn its features. Instead of long explanations, this course, Rapid Angular Training, cuts to the chase by quickly exposing you to the Angular features you need to know. You can expect to understand how to use Angular Components to create the visual aspect of your applications, learn about the various services built into Angular, such as routing and HTTP services, and learn how to structure your application into Angular Modules to best organize your code. Newer developers can also use this course to review features learned in the beginner Angular courses here on Pluralsight. By the end of this course, you'll have a better grasp on Angular, plus this course acts as a great reference course for when you need help in a specific aspect of Angular.

About the author
About the author

Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.

More from the author
Angular Forms
Beginner
2h 3m
Apr 2, 2019
JavaScript Fundamentals
Intermediate
3h 0m
Jul 26, 2018
JavaScript: Getting Started
Beginner
2h 46m
Jan 19, 2018
More courses by Mark Zamoyta
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone. My name is Mark Zamoyta, and welcome to my course, Rapid Angular Training. I am a software consultant and developer in the Portland, Oregon area. This course is designed to quickly teach you everything you need to know to work with Angular. It offers a fast question and answer style of teaching, which is great if you want to get straight to the point of what you need to know. Experienced developers will benefit from this course because of it's fast pace, and any Angular developer can use this course as a reference to quickly review or learn a specific feature within Angular. Some of the major Angular features I'll cover are components, directives, and pipes, services and providers, modules, lazy loading, and ahead-of-time compilation, and all other major features an Angular developer needs to know. By the end of this course you'll have a good understanding of all aspects of developing with Angular. Before beginning this course you should be familiar with the fundamentals of Angular 2 and up. Two great Pluralsight courses for this are Angular 2: Getting Started, and Angular 2: First Look. I hope you'll join me in the journey in quickly learning Angular with my Pluralsight course, Rapid Angular Training.

Components
Hi. This is Mark Zamoyta. Let's start off by looking at components. We'll mostly look at the metadata and we'll cover programming components later in the course, but for this module we'll start off by looking at the component layout, how the different pieces fit together. Then we'll look at interpolation to show properties of our component. We'll take a look at property bindings where we'll bind to the properties of HTML elements, and we'll take a look at event bindings where we handle regular DOM events. Finally, we'll take a look at how we can work with CSS classes and CSS styles, along with HTML attributes in our templates.

Programming Components
Hi. This is Mark Zamoyta, and welcome to this module titled, Programming Components. We're going to take a deeper look into templates and how we can program with them, as well as programming within classes. We'll start off this module by looking at template reference variables. These are variables that exist within templates. A template has its own context, so we can declare and access variables there. We'll look at built-in directives called ngIf, ngFor, and ngSwitch. There is some new syntax available for Angular 4, so we'll go into that for these directives. We'll look at two-way data binding in Angular, and we'll look at component communication. This is how we pass information to a child component, and also have a child component pass information back up to its parent. We'll take a look at content projection. This used to be called transclusion, but it's a way of passing markup into a child component, and we'll look at field decorators. Our component class might have many properties, and those properties can be decorated, so that they have special features controlled by Angular. We'll take a look at those, and finally, we'll look at component lifecycle hooks. These are methods that get called in the life of a component. They let us know when things are initialized or when change detection is going to occur, and that kind of thing. So let's get started and take a look at template reference variables.

Services and Providers
This module is titled, Services and Providers. My name is Mark Zamoyta. Normally when we're working on a project in Angular you want to keep application logic out of our visual components, so we should be putting that in services, and a service is simply a TypeScript class. It could even be a simple value or a simple object, and we need to tell angular, specifically Angular's Dependency Injection system, that the services exist, so that Angular can provide them where they're needed. So we'll start off this module by looking at creating and providing services. And again, in most cases a service will simply be a TypeScript class. We'll look at Angular's Dependency Injection system in a little bit more detail. It's a hierarchical system, so we need to view things as a visual tree, specifically a component tree. That'll help make sense of how providers work. Then we'll look at the main mechanism we use in Angular to inject an instance of a service into a visual component. It's done through the constructor, and it doesn't necessarily need to be a visual component. We can have Angular inject any value into any class. And we'll wrap up this module by looking at some of the advanced features that are used with providers. So let's get started and look at creating a service and providing it.

Data Access with HTTP and RxJS
Hi. My name is Mark Zamoyta. This module is titled, Observables and Data Access. In this module we'll take a look at using Http with Angular. You may have used promises in the past, but with Angular now we're using observables for asynchronous access. We'll start off the module by setting up HttpModule, which is part of the Angular framework. The main service we need to use is Http, and we'll see how to start working with that. The HTTP service works mainly with observables, so we'll see how to subscribe to observables and use them in our applications. Next, we'll look at Async Pipe. This is a special pipe built by Angular letting us work with async data, and we can go ahead and use this pipe directly in our templates, so there's less coding involved and more scripting within our template. We'll take a look at other Http actions. Up to this point, we'll have worked mainly with Get, but we'll do a Post, and take a look at other actions, and we'll see how to change Http headers and specify other options on an Http call. Finally, we'll take a look at some more observable operators. There are lots of operators for observables, and we'll take a look at the key ones that you see most often. So let's get started, and start working with HttpModule.

Forms
Hi. This is Mark Zamoyta, and this module is about Forms in Angular. Forms are all about collecting information from users or displaying information for an object that user can later edit, so in this module we'll take a look at template driven forms, which is the main form technology in Angular. We'll start off by setting up template driven forms. We'll have to import the Angular forms module, and start working with ngModel. We'll use ngModel on fields, and we'll work with two-way data binding. We'll see how to move the data from the form control back to the Angular component and vice versa. Each field in a form has a state that can be things like pristine or dirty, and many fields also have validation. Common validation rules are for the length of the field or perhaps whether the field is required or not, so we'll take a look at how to set that up. Next, we'll look at submitting forms. Angular has a directive for this called ngSubmit, so we'll see how to use that, and finally, I'll show you some information on Reactive forms, which is a more complex form technology that could be used for testing without using a DOM, and dynamic forms, which is a way of having forms generate themselves from data. So let's get started and set up our template driven forms.

Routing and Navigation
Hi. Welcome to this module titled, Routing and Navigation. My name is Mark Zamoyta. When we talk about routing in Angular we're talking about client-side routing. We're not talking about going back to the server and refreshing our whole web page, and as far as navigation goes, we want to make sure we stay on the client-side of things when we navigate because most likely we have a SPA, a single page application. We'll start off this module by seeing how to configure the router, and then we'll go ahead and set up some routes. We'll see various settings to set these up. Next, we'll look at child routes, we'll take a look at the router service and make sure that we have access to any routing information we need. There are many properties we can look at and observables we can subscribe to to keep track of routing information. And finally, we'll look at route guards. Route guards make sure that only authorized users can access a certain route or they can also make sure that you don't leave a route if you have any changes that need saving, and there are several other routes that we can take a look at. So let's get started and look at router configuration.

Modules, AOT Compilation, and Lazy Loading
The basic unit of organization in an Angular application is a module, and the directive we use for modules is NgModule. Let's take a look at what we'll be covering. We'll start off by looking at the NgModule and its key properties when we set up our metadata. Every application is going to need at least one NgModule. Next, we'll look at importing and exporting, and I'm not talking about the ES6 import statement or export statement. These are the key properties of NgModule. We can import other modules, and export modules and other items as well. Next, we'll take a look at NgModule and routing. We'll set up our main routing in our app module, but for any imported modules we'll be working with child routes, and we'll see how to set that up and work with it, and lastly, we'll cover module organization. All you really need in Angular is one single NgModule, but some best practices have been developing. You can read about them in the style guide or in some other Pluralsight courses, and we'll just take a look at the various types of modules that make sense to have in an Angular application, so let's get started and look at NgModule.

Additional Angular Features
Hi. This is Mark Zamoyta for Pluralsight. In the final module of this course we'll be taking a look at additional Angular features, and we'll just catch up on some of the Angular technologies that we haven't covered yet. We'll be looking at directives, which are mainly used as attributes on components or their DOM elements, we'll take a look at pipes for formatting data to view, and we'll take a look at some of Angular's animation capabilities. I'll talk about lazy loading and how we can make sure that a module gets lazy loaded, and I have some notes on AOT compilation. By the time this course gets released most likely Angular 5 will be out, and AOT will be the default. And finally, we'll take a look at unit testing. Unit testing in Angular is a huge topic, but we'll look at the fundamentals, so that you can get started. So let's get started by looking at directives in the next video.