This course is a gentle introduction to the changes that Angular 2 brings, how they compare to Angular 1, and provides an understanding of the architecture and how the core concepts work together to build applications.
Hello, and welcome to Angular: First Look, part of the AngularJS Learning Path here at Pluralsight. My name is John Papa, and I’m looking forward to helping you understand the changes that Angular 2 brings, how they compare to Angular 1, and provide an understanding of the architecture and how the core concepts work together to build applications.
So if you’re ready to get started, Angular: First Look is waiting for you. Thanks again for visiting me here at Pluralsight!
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.