Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Angular is a robust, powerful framework for building applications at scale, but it can be really intimidating to beginners! This collection by [JavaScript teacher Sam Julien](http://www.samjulien.com/) is here to help you learn Angular in bite-sized chunks. 

*Note from Sam: these lessons are loosely related but are not meant to necessarily be followed in order from start to finish. I've provided embedded code and links to GitHub where applicable, though, so you can always have access to the finished code for the lesson.*

Angular is complete framework for building web applications at scale, so getting started can be a little intimidating. Let's use the Angular CLI to create our first Angular application.

Create Your First Angular App

By default, the Angular CLI generates components with separate CSS and template files. It doesn't have to be this way! Let's learn how to use the CLI to generate single file components.

Use Single File Components by Default in Angular

We can pass data between components in Angular using inputs. Let's learn how.

Pass Data to Components with Inputs

Let's create our first form in Angular! To do this, we're going to use something called reactive forms in Angular. These forms are model-driven, which means we start with the component code and then build the HTML form. The model will then keep track of the values and the form state (like validation). It's easy to get lost in jargon with reactive forms, so let's walk through it step by step. Feel free to also [refer to the docs](https://angular.io/guide/reactive-forms).

Create Your First Reactive Form in Angular

Sometimes we need to pass data from a child component to a parent component. We could pass the source down to the child as an input and modify it there, but that's not a good practice. In Angular, we can use Outputs and EventEmitters to accomplish this instead. The child component emits an event with the data that the parent listens for. The parent can then process the event data however it needs to. In this video, you'll learn how to do just that with a reactive form that needs to send its value up to its parent component.

Communicate Between Components with Outputs & EventEmitters

Right now, the collection of habits and the business logic for adding a habit are in the component. This works fine for how small our app is right now, but what if we need to access the collection of habits in another component? Or what if we need to add a habit somewhere else? We'd either have to duplicate code or come up with convoluted ways of passing data through inputs and outputs. This is what services are for in Angular. Services let us store data and logic in a class that we can reuse anywhere in our application.

Share Data and Business Logic Throughout an Angular Application with Services

Right now, our app is just using the generic `any` type for our habits. The `any` type basically tells TypeScript to leave us alone and not bother us. This gets our app to work, but it's kind of riding a bike with a deflated back wheel. Angular really shines when you can take advantage of the power of TypeScript. Let's add a custom type for habits using an interface. Then, we'll use it in the habit service and the list and item components.

Add Custom Data Types with TypeScript Interfaces in Angular

Interfaces let us add strong typing to data, but also give us flexibility in the shape of our data by allowing optional properties. This especially comes in handy when computing additional properties on the frontend. In this video, we'll walk through adding an optional property to the habit interface and then computing that property in the habit list component.

Add Optional Properties in Angular to TypeScript Interfaces

In other frameworks, CSS modules and CSS-in-JS are both quite popular. One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won't hear much about these options in the Angular community, and that's because Angular comes with a scoped CSS option right out of the box. In this lesson, I'll show you how this works.

Use Scoped Component Styles in Angular

Even though the default scoped styles in Angular components are really useful, sometimes we do want to apply styles across the whole app. We may also want to make classes available globally. Luckily, Angular provides a nice way to do this in the `styles.css` file.

Add Global Styles in Angular

When we first try to use a local server for our data in development, we get a rude error in the console and nothing works. What is that and why are we getting it? Well, even though both the server and the client will eventually be on the same domain in production, we're getting CORS (cross-origin resource sharing) errors in development. That's because we're running the server and the client on different ports. We can fix this by setting up the Angular CLI to proxy all requests to the API for us so they appear to be coming from the same origin.

Use a Proxy with the Angular CLI to Fix CORS Development Problems

One of the things that drove me crazy when I was first learning RxJS in Angular was how difficult it seemed to reload a collection of data after I added or deleted an item. With promises, I could just use `.then()` and be on my way. What do we do with observables? Should we just nest another subscription? Even if we do that, since we're using the async pipe, nothing will happen. There are better ways to handle this that are more reactive. In this lesson, I'm going to show you one way using Subjects. Subjects are kind of like event emitters that can have multiple listeners.

Refetching Data with Subjects in Angular

When we first create an Angular app with the Angular CLI using `ng new`, it gives us an option to add routing. Sometimes we don't know whether we want to add routing yet, so we say no. What do we do, though, if we decide to add routing later? There's no separate CLI command to set up the routing for you. In this lesson, I'll show you how to manually add routing to your Angular application.

Add Routing to an Existing Angular Project

Once routing is set up, we can add a new route by adding a new component and adding a path to our routes array in `app.module.ts`. But how do we navigate between the two routes? In this lesson, I'll show you how to use `routerLink` to switch between the routes without causing the page to refresh.

Navigate Between Routes in Angular with routerLink

We often need to pass a parameter like an ID to a route and then access that ID in order to call an API to get some data. In this lesson, we'll look at how to define a route with a parameter, how to use params with the `routerLink` directive, and how to use the route snapshot to use a param in a component.

Navigate to and Display Components with Route Parameters in Angular

There are two different ways to access route parameters in Angular components. One is through the route snapshot and the other is by subscribing to the route `paramMap`. When do you use each? In this lesson, we'll learn that trying to change and access a route parameter in the same component is the key to knowing when to subscribe to the `paramMap` instead of just using the snapshot.

Subscribing to Route Params in Angular

Sometimes as our app grows in complexity we need to set up some nested routes (also known as child routes). We often want to do this so users can link to a deeper part of the app, which can't be done by just nesting a child component. In this lesson, you'll learn how to set up child routes in Angular.

Create Nested Routes in Angular

When we use child routes (also called nested routes), we often need to access a parent route's parameter, such as an ID used to make an API call. In this lesson, we'll learn how to subscribe to the parent route's `paramMap` in order to get that ID and use it in our child route component.

Access Parent Route Parameters in Angular

Right now, we're getting the ID route parameter off the of the parent route. This is because we want the info and items components to use the ID of the chosen camping system without having to pass it a second time. There's another way we can do this, though, and that's by defining a `paramsInheritanceStrategy` when we create our router module. The `paramsInheritanceStrategy` defines how the router merges parameters, data, and resolved data from parent to child routes. The default is "emptyOnly," which inherits those only for path-less or component-less routes. We're going to set it to "always" to enable unconditional inheritance of parent parameters, data, and resolved data in child routes.

Angular Basics

Sam Julien

Free Community Resource

Free Community Resource

Course Content