Angular: First Look

Course Overview
Hi everyone, my name is John Papa. Welcome to my course, Angular 2: First Look. I'm a web architect, Angular developer expert, and the author of the official Angular style guide. I'm very excited to share this course with you. This course is a gentle introduction to the evolution of Angular 2. It provides an over-arching view of Angular 2 and how the core concepts fit together to help us build applications. We'll learn how our Angular 1 skills translate and have prepared us to build Angular 2 apps. I've updated and extended this course, including its code samples, to reflect the final release of Angular 2. You'll find over an hour of new material, including two entirely new chapters on routing and Angular modules. The major topics that we'll cover are components and their templates, template syntax including data binding, services including dependency injection, routing, HTTP and data, observability with RxJS and how Angular modules help us organize our code and set us up for optimizations like lazy loading in our applications. By the end of this course we'll have learned these concepts and more and we'll be well on our way to building Angular 2 apps. Before beginning this course, you should be familiar with JavaScript, but you don't have to be an expert by any means. Please join me on this journey to learn Angular 2 with the Angular 2: First Look course on Pluralsight. We hope you enjoy it.

Angular 2 Architecture, What's New and What's Different
Let's get started with some Angular 2 Architecture. We'll cover what's new and what's different. This module we're going to show you how the concepts we know from Angular 1 are still fundamental in Angular 2, and more importantly how our Angular 1 skills can translate to Angular 2. We'll discuss the different language options we have and then we'll take a brief look at the impact of Angular 1 on the modern JavaScript landscape. This is going to help us understand why a good migration of Angular 1 skills to Angular 2 skills is really important. Of course we're going to highlight some of the most compelling features and walk through some examples step by step of Angular 1 side by side with Angular 2. And then finally we're going to cover some resources that may be worth exploring afterwards. Let's get started.

Angular 2 Essentials: Components, Templates, Modules, and Metadata
Every framework has a short list of critical players, players that the framework cannot exist without. In Angular those are components, modules, and templates. In this module we're going to introduce the essential aspects of Angular 2 applications. We're going to see how ngModules or Angular modules help organize an app. We'll also see how a component contains the application logic, the template represents the interaction with the user, and a series of component and template combinations are organized in modules. We assemble our application for modules, which exports something of value, such as a component. When we import and expert, we're using ES Modules for ECMAScript. We organize our application using Angular Modules, also known as ngModules. And a component contains the application logic that controls a region of the user interface through a template, which tells Angular how to render the component on the screen. Then we use metadata to tell Angular 2 about the objects we build, such as where to find a component's template, what directives a component will use, and what services and inputs are required by the component. We'll learn how to use these players in an Angular 2 application using good separation patterns to create reusable components and modules.

Displaying Data: Data Binding, Directives, and Pipes
One of the most appreciated features of Angular 1 is data binding. We'll all glad to hear that these concepts are still present in Angular 2, albeit in a new syntax. We've already seen a few examples of data binding and built in directives, so in this chapter we'll learn more about how to take advantage of these features. We'll learn how to use one and two way data binding to help coordinate communication between a component and its template. When Angular renders templates, it transforms a DOM according to instructions from directives. We'll discuss the built in directives in Angular 2 and show how to format data in templates using pipes.

Services, Dependency Injection, and Lifecycle Hooks
Our demo application, the storyline tracker, retrieves data about the characters and stories and it does this from several components, so it makes sense that we don't duplicate that kind of code. In this module we'll see how to isolate data management in reusable services and use dependency injection with Angular 2 to make the services available when and where they're needed. Our storyline tracker also needs to load character data as the character list component is loaded and its template is rendered. This will be accomplished using lifecycle hooks, specifically the ngOnInit hook. This module is going to introduce how to share logic across the story tracker application using a service. A service provides anything our application needs, such as access to character and vehicle data. We used good separation patterns in Angular 1 that we're pretty familiar with, and we're going to see that again here in Angular 2, specifically separating features such as components and services into their own modules using dependency injection to provide an instance of a class to another Angular feature. And we're going to explore how to answer questions such as how do we load data before a component starts or how do we run code whenever a change is made to a data binding? The answer to these lies with a component lifecycle hook, which is going to allow us to tap into specific moments in the application lifecycle to perform logic. All three of these features play an important role in the storyline tracker demo app, so let's learn how to use them.

Routing and HTTP
While building components and services are central to Angular applications, the app wouldn't be very useful without data and we often get data from remote sources through asynchronous communication. In this module we'll learn how to connect with the server to get data using http. We'll see how to do this with promises and with observables using reactive extensions. We'll kick things off by taking a look at how we use http now in Angular 2 and see how it differed from Angular 1. Then we'll explore observables and subscriptions and how we use those with reactive extensions, and you may remember we covered pipes earlier, there's a special one though called async, and we're going to take advantage of this one here with the new things that we learn and how to get data from http. And if you used Angular 1, you definitely took advantage of promises, so we'll take a look at how you can use promises in Angular 2 as well. Our storyline tracker app needs data and in this module we'll learn how to use http to do that.

Routing
The storyline tracker has a dashboard, vehicles, characters, and a series of detail views. We need a way to get from one view to another. Routing is that vehicle. This module is going to show how to configure routing, which is going to enable us to navigate between our vehicle and character components. So we'll define our routes and we're going to use a concept called routing modules to hold those routes. Sometimes we need to be able to pass parameters from one place to the other, we'll learn how we can do that through routing. And sometimes we want to stop certain routes from happening, those things are called guards inside of Angular. We can inspect the route at a key moment in time, right before it's about to transition, to either get some data to inject inside of its destination or to check a certain value, maybe if you're authorized or not, and then prevent the route or let it continue onward. We'll learn about all these concepts and much more in this chapter on routing.