Angular 2: Getting Started

An update to this course has been published and is found at https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents. For the most updated version please visit the link above.
Course info
Rating
(1042)
Level
Beginner
Updated
Apr 1, 2016
Duration
4h 4m
Table of contents
Course Overview
Introduction
First Things First
Introduction to Components
Templates, Interpolation, and Directives
Data Binding & Pipes
More on Components
Building Nested Components
Services and Dependency Injection
Retrieving Data Using Http
Navigation and Routing
Angular 2 Setup Revisited
Final Words
Description
Course info
Rating
(1042)
Level
Beginner
Updated
Apr 1, 2016
Duration
4h 4m
Description

An update to this course has been published and is found at https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents. For the most updated version please visit the link above.

About the author
About the author

Deborah Kurata is a software developer, consultant, Pluralsight author, Google Developer Expert (GDE) and Microsoft Most Valuable Professional (MVP). Follow her on twitter: @deborahkurata

More from the author
Angular NgRx: Getting Started
Beginner
4h 4m
25 Jun 2018
Angular Component Communication
Intermediate
3h 39m
30 Jan 2018
Angular Routing
Intermediate
4h 47m
30 Mar 2017
More courses by Deborah Kurata
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, my name is Deborah Kurata and I'd like to welcome you to my course, "Angular 2: Getting Started", from Pluralsight. This beginner-level course takes you on a journey through the basic features of Angular 2. It guides you down the right path, making your own journey with Angular 2 more pleasant and productive. Along the way, we build a sample application so you can code along or use it as a reference for your own development. You'll see how Angular provides a consistent set of patterns for building components, templates, and services helping you come up to speed quickly. This course covers how to build components, how to create the user interface for your application in a template, and power it up with data binding and directives. You'll discover how to build services for logic needed across components and inject those services where they are needed. You'll learn how to send requests to a web server using Http and Observables and you'll see how to set up routing to navigate between the views of your application. By the end of this course, you will know the basics you need to get started building an Angular 2 application. I hope you'll join me on this journey through "Angular 2: Getting Started" from Pluralsight.

First Things First
First Things First. Before we can start coding with Angular 2, there are some preparatory steps. Welcome back to Angular 2: Getting Started from Pluralsight. My name is Deborah Kurata, and in this module we set up what we need to work with Angular 2. A little preparation goes a long way toward a successful adventure. Before we take that first step on our journey with Angular 2, we need to make some decisions, gather our tools, and get everything ready. In this module, we evaluate several languages we could use to build an Angular 2 application and select one. Once we've picked a language, we select an editor that fully supports development in that language. Then we set up the boilerplate code for an Angular 2 application. And we'll talk about modules and what they mean in Angular 2. Let's get started.

Introduction to Components
In the last module, we set up the infrastructure for our Angular application. Now we are ready to build our first component. Welcome back to Angular 2 Getting Started, from Pluralsight. My name is Deborah Kurata, and in this module, we walk through building a very basic component with a focus on clearly defining the components' parts, their meaning, and their purpose. We can think of our Angular application as a set of components. We create each component, then arrange them to form our application. If all goes well, those components work together in harmony to provide the user with a great experience. In this module, we take a closer look at what an Angular component is and examine the code we need to build one. We walk through how to create the component's class and how and why we need to define metadata. We look at how to import what we need from external modules and we discover how to bootstrap the component we've built to bring our application to life. At this point, we'll have the world's simplest working Angular application. We'll continue to add to this application throughout this course. Looking again at the application architecture that we defined in the first module, we currently have the index. html file in place. In this module, we'll build the app component. Let's get started.

Data Binding & Pipes
There's more to data binding than just displaying component properties. Welcome back to Angular 2 Getting Started from Pluralsight. My name is Deborah Kurata, and in this module, we explore more data binding features and transform bound data with pipes. To provide a great interactive user experience, we want to bind down elements to component properties so the component can change the look and feel as needed. We can use bindings to change element colors or styles based on data values, update font size based on user preferences or set an image source from a database field. And we want notification of user actions and other events from the DOM so the component can respond accordingly. For example, we respond to a click on a button to hide or show images. And sometimes, we want the best of both worlds, using two-way binding to set an element property and receive event notifications of user changes to that property. In this module, we'll use angular's property binding to set HTML element properties in the DOM. We walk through how to handle user events such as a button click, with event binding and how to handle a user input with two-way binding. Lastly, we'll discover how to transform bound data with pipes. And here, once again, is our application architecture. We have the first cut of our product list component, but it doesn't have any interactivity. In this module, we'll use data binding features to add interactivity to the product list component. Let's get started.

Services and Dependency Injection
Components are great and all, but what do we do with data or logic that is not associated with a specific view or that we want to share across components? We build services. Welcome back to Angular 2 Getting Started from Pluralsight. Deborah Kurata here, at your service, and in this module we create a service and use dependency injection to inject that service into any component that needs it. Applications often require services such as a product data service or a logging service. Our components depend on these services to do the heavy lifting. Wouldn't it be nice if Angular could serve us up those services on a platter? Well, yes it can. But what are services exactly? A service is a class with a focused purpose. We often create a service to implement functionality that is independent from any particular component, to share data or logic across components, or encapsulate external interactions such as data access. By shifting these responsibilities from the component to a service, the code is easier to test, debug, and reuse. In this module, we start with an overview of how services and dependency injection work in Angular. Then we'll build a service, we'll register that service, and we'll examine how to use the service in a component. We currently have several pieces of our application in place but we hardcoded our data directly in the product list component. In this module, we'll shift the responsibility for providing the product data to a product data service. Let's get started.

Retrieving Data Using Http
The data for our application is on a server somewhere, in the cloud, at the office, under our desk. How do we get that data into our view? Welcome back to Angular 2: Getting Started from Pluralsight. My name is Deborah Kurata, and in this module, we learn how to use Http with Observables to retrieve data. Most Angular applications obtain data using Http. The application issues an Http GET request to a web service. That web service retrieves the data, often using a database, and returns it to the application in an Http response. The application, then, processes that data. In this module, we begin with an introduction to Observables and the Reactive Extensions. We then set up to use Http in Observables. Next, we examine how to send an Http request and map the result to an array. And we look at how to subscribe to Observables to get the data for our view. We finish the first cut of a product data service in the last module, but it still has hard-coded data. Now, we'll replace that hard-coded data with Http calls. Let's get started.

Angular 2 Setup Revisited
The Angular application setup process may have seemed a bit like wizardry. Packages and libraries magically installed, and the TypeScript compiler psychically knowing what to do. Welcome back to "Angular 2: Getting Started" from Pluralsight. My name is Deborah Kurata, and in this module we revisit the basic files we need to set up an Angular application. What look like installation wizardry was instead a set of carefully defined setup files. Let's peek behind the curtain and see what those files are, what information they contain and how to use them. In this module, we'll take a closer look at the TypeScript configuration file, npm package file, TypeScript definitions file and the libraries defined in index. html. Let's get started.

Final Words
As you have seen throughout this course, Angular provides a consistent set of patterns for building components, templates and services helping us to come up to speed quickly. Welcome back to Angular 2, getting started from Pluralsight. My name is Deborah Kurata, and the final words in this course include: a recap of our journey, a few pointers to additional information, and a look at a broader description of Angular. Let's jump right in to this short module.