Angular Fundamentals

Course Overview
Hey there, this is Jim Cooper. And this is Joe Eames. And welcome to our Pluralsight course, Angular 2 Fundamentals. Joe and I have been developers for a long time, and we've been building large scale Angular applications ever since Angular 1's official release, and we're excited to share with you what we've learned about Angular 2. This course will give you all the fundamental knowledge you need in order to start building your own Angular applications whether for small, fun, personal projects or for large enterprise applications. In this course you'll gain a high level understanding of the architecture of Angular applications in addition to a detailed understanding of building applications with Angular. Once we introduce you to the high level concepts we'll spend most of this course actually writing code for a demo application that models real world applications. This intermediate level course has been designed to help you learn Angular from the ground up. If you feel like things are moving a little too quickly, you can check out one of the beginner level courses, but we've tried to make this a course that will teach you the fundamentals even if you've had no prior experience with Angular. In this course you'll learn about the following, the architecture of an Angular application and how to Bootstrap a new application, Angular components and template syntax including pipes and directives, creating reusable services and how dependency injection works in Angular, working with forms and validation, making API calls with HTTP and observables, and how to unit test and end to end test your application, and, finally, how to package it all together for production. When you have finished this course you will know enough about Angular to start building real world applications using Angular best practices. The only real prerequisite for this course is that you have some knowledge of JavaScript and HTML, but you certainly don't need to be an expert. So join us as we explore the exciting world of Angular.

Creating and Communicating Between Angular Components
In this module, we're really going to get into the meat of components. This is where working with Angular really starts to get interesting. We'll start by creating a component with an inline template and data-binding. And then, we'll take a look at how to optionally move that template into an external HTML file. Next we'll explore the various ways to communicate between components. And then, we'll see how easy it is to apply CSS styling to our components. And finally, we'll explore how Angular provides built in encapsulation of CSS styles to prevent them from bleeding out to other components. So let's jump right in.

Exploring the Angular Template Syntax
In this module, we're going to explore all the fundamentals of template syntax in Angular. We'll start off by looking at interpolation and expressions, which allow us to bind to and display data in our templates. We'll explore what is and what is not allowed in expressions and the types of behaviors that are discouraged in expressions. We'll then take a look at the syntax for binding to DOM events and the statements that accompany them. Then we'll look at how we display repeating data with ngFor. To do this, we'll display a list of events on the event list page, instead of just a single event. In this module, we'll also take a look at how to optionally remove elements with ngif and how to do that in more complex cases with ngSwitch. We'll also look at how to hide DOM elements by binding to their hidden property and when you might want to do this versus removing them with ngif. And finally, we're going to take a look at various ways to programmatically add and remove CSS classes and styles to and from DOM elements. So let's go take a look.

Creating Reusable Angular Services
In this module, we'll take a look at how to create reusable services and how that helps us keep our components and our app clean. First, we'll explore why services are necessary in the first place. Then we'll talk briefly about what dependency injection is and what it means in an angular app. And then we'll dive into creating our first service with Angular, which will finally get all that ugly JSON out of our EventsListComponent. And then finally we'll talk about how to wrap third party libraries in Angular services so that they can be injected and used in your Angular apps just like any other service. Cool, let's go take a look.

Collecting Data with Angular Forms and Validation
In this module on collecting data with forms and validation, we'll cover everything you need to know about collecting and editing data in your applications. First we'll take a look at how to create data models that we can use to help ensure type safety for the data we're collecting. Then we'll take a look at creating and validating template based forms and then how to create and validate model driven form and the pros and cons of each approach. Next we'll take a look at using two-way data bindings to display and edit existing data and, finally, we'll take a look at how to create custom validators that use custom business logic to validate fields. Okay, let's get started.

Communicating Between Components
In this module we'll get some more practice passing data back and forth between components. Now that our app is built out a little more this will give some more real world examples to work with. There's not much to introduce here, so let's just jump right into code.

Reusing Components with Content Projection
In this module we're going to cover creating reusable components with content projection. Any component can be reusable, but what makes content projection so powerful is the ability to change the content inside of a component based on the needs of the application. We're going to start off by looking at content projection itself, and once we get a handle on that, we're going to look at how multiple slot content projection works where we can project content into more than one place. Content projection is a feature where you can have a component with some kind of visual wrapper, shown here in orange, but the content within the wrapper is decided by the developer. That lets you take a common wrapper like say a dialog box, and reuse it with different pieces of content. That way you don't have to re-implement common functionality. Again in the case of a dialog box, this would be like the cancel and save buttons, or the positioning logic. This is called transclusion and Angular 1. With multiple slot content projection things work exactly the same as with regular content projection, but this time we have more than one slot into which the variable content can go. Here I show these different slots side by side, but their arrangement can be anything. They can be side by side, on top of each other, or anything really. Also were not limited to two slots, I could be three or four or any number of slots. Although two is by far the most common after one. We'll see exactly how to do content projection, and even multiple slot content projection in the following sections.

Displaying Data with Pipes
In this module we're going to learn all about how to display our data. The focus will be on using pipes to do this, but we'll also see that for some tasks, we won't use pipes at all. We'll start out by looking at some of the built-in pipes available in Angular to format our data the way we want it. We won't look at all the pipes, instead just a few of the more common ones, with a focus on how to use them. It'll be up to you to look at what pipes are available in Angular. After that, we'll look at how to create a custom pipe to get data formatting functionality that isn't already built in Angular. Then, we'll look at how to filter data and how to sort data. In Angular 1 we used to do this with filters. In Angular 2, things are different. For those who are familiar with Angular 1, they'll be used to using filters for three different purposes, formatting data, sorting lists of data, and filtering lists of data. The filters in Angular 1 did this job beautifully. Unfortunately there was a problem with two of these three jobs: sorting and filtering. There were potential performance problems. Not everyone saw these issues, but they were lurking, and would show up in the right instances. As a result, pipes in Angular 2, don't have all the same functionality as in Angular 1. They still handle formatting, but aren't used for sorting or filtering lists of data. We use a different mechanism. We'll still cover how to sort and filter data in this section of the course, though, and we'll see how to do that in just a little bit here. But first, we'll look at pipes. They are powerful, useful, and generally very simple.

Understanding Angular's Dependency Injection
In this module we are going to take a look under the hood of the dependency injection system, and learn how to take more finely grained control of how it works. We are going to focus on some more advanced pieces of dependency injection. We'll start with a look at dependency injection, and how we tell Angular that we want a specific service. Then, we'll look at how we can deal with things that aren't simple services. We can do this using two pieces of Angular, the InjectionToken and the Inject decorator. We'll see how these pieces allow us to register services with the dependency injection system in various ways. While we're looking at that, we'll look at some alternate provider methods, so that we can really take control of the dependency injection system, for those rare situations where we need fine-grained control.

Creating Directives and Advanced Components in Angular
In this module, we're going to learn how to create directives and deal with advanced components. Our focus will be on learning more about components, and how to deal with other scenarios that we haven't seen before. And also how to create directives, which we don't create a lot of, but are useful to be able to do. You should feel comfortable with components by now, so we'll push that knowledge, seeing some new scenarios. We're going to create a modal component. While we do that, we're going to learn some new things. For example, we'll learn about routing to the same component. In Angular, there are a few things to be aware of when routing from a component to itself, and we'll see how to handle this. We'll learn about DOM manipulation and how to reach down and interact with the raw DOM when necessary. We'll also learn about using the @ViewChild Decorator, and some similar decorators in order to get a handle on the underlying DOM node. We'll also be creating a directive in conjunction with our modal component. We don't often need to create directives, but it does happen often enough that we want to know how to do it. Through this module, we'll really get a handle on components and their counterparts, directives.

More Components and Custom Validators
In this module, we are going to continue our work with components and also learn how to create custom validators. We'll start by creating a voting component. This component will have a lot of interesting functionality and teach us several things about input properties and also how to deal to with a component that has different functionality whether you're logged in or not. After that, we'll create a custom validator. Custom validators are a special kind of directive, this will be applying what we learned in the last section about creating directives in order to create this validator. When we're done we'll have seen a couple more typical scenarios for custom components and directives.

Taking an Angular App to Production
In this module we are going to learn how to take our Angular app to production. This is a critical, final piece of this course. To take everything that we've done and be able to put it some place that our users can actually get to the application and benefit from it. The topic of going to production covers quite a few different things. First we're going to look at linting. Linting is a common task we'll want to do to our code as we're building our code and certainly before we take it to production. We're going to look at how to use linting with Visual Studio code, which is by far the most popular editor for Angular and how to do it just from the command line so it works no matter what editor we're using. After that we're going to talk about how to actually create a build using the CLI. We're going to look at build flags and the ahead-of-time compiler. Then we'll look at actually deploying the build we created to a production environment. Finally we're going to talk about optimistic module downloading, which is an important part of tuning our applications for production use.