Learn your way! Get started

Angular 2, Part 2 of 3: Tools

with expert Gregor Dzierzon


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 10/20/2016
Level Intermediate
Runtime 2h 39m
Closed captioning Included
Transcript Included
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

Learn all about Angular 2's robust tool set for applications with this course. First, you will explore routing and MVC frameworks. By watching this course, you will gain an understanding of directives and displaying html from both a structural and attribute perspective and you will learn how services can make code reuse easier. Finally, you'll dive into HTTP services for data retrieval and the formatting of data using pipes. After completing this course, you'll have a better understanding of the tools Angular 2 offers.

Prerequisites

This course assumes that you have some HTML and JavaScript programming experience. As with any such course, the more experience you bring to the course, the more you’ll get out of it. This course moves quickly through a broad range of Angular2 topics, but it does not require any prior AngularJS skills since Angular2 has been completely rewritten and is not simply an upgrade to AngularJS 1.x. This course also assumes that you are familiar with how to use the operating system that you are running. For example, the course might say simply “Open Notepad” without explaining how to do that. You should also be able to navigate the folder hierarchy using Windows Explorer (Windows) or Finder (Mac) and with Command-Prompt (Windows) or Terminal (Mac).

Learning Paths

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

Gregor Dzierzon, MCSD, MCDBA has over 15 years of experience architecting and developing solutions using C#, VB.NET, SQL Server, Reporting Services, and Analysis Services, but most of his work has been with web development using ASP.NET, C#, JQuery, and AngularJS. He is a Senior Software Engineer and Software Architect who has owned a Software Consulting Company. He has 12 years of training experience and travels nationally as well as internationally to Canada and the UK to deliver training.

Course outline



Routing, Directives, and Services

Routing (35:26)
  • Introduction (00:27)
  • Introduction to Routing (00:20)
  • How to Enable Routing (00:16)
  • Configuring Routing (00:25)
  • Import Routing Objects (00:40)
  • Configure Routes (01:07)
  • Add Router-Outlet Placeholder (00:14)
  • Create Links (00:21)
  • Navigating Programmatically (00:41)
  • Passing Parameters (00:16)
  • Defining Parameters (00:19)
  • Creating Link with Parameters (00:28)
  • Optional Parameters (00:43)
  • Accessing Parameters (00:22)
  • Reading Parameter Values (00:27)
  • Demo: Introducing the Components (03:25)
  • Demo: Defining the Routes (04:15)
  • Demo: Accessing and Using the Routes (04:44)
  • Demo: Adding the Links (03:19)
  • Demo: Linking Programmatically (05:27)
  • Demo: Pulling Data from the URL Path (04:54)
  • Demo: Form Anomaly (01:42)
  • Summary (00:22)
Directives (38:04)
  • Introduction (00:27)
  • What Are Directives? (00:16)
  • Types of Directives (00:42)
  • Attribute Directives (00:56)
  • Structural Directives (00:30)
  • ngFor (00:16)
  • Using ngFor (01:46)
  • ngIf (00:18)
  • ngSwitch (00:51)
  • Demo: Setup (05:07)
  • Demo: ngFor (02:25)
  • Demo: ngIf (02:11)
  • Demo: Get Info from ContactList (04:59)
  • Demo: ngSwitch (04:37)
  • Demo: Default (01:49)
  • Custom Directives (01:05)
  • Setting Values (01:19)
  • Using the Directive (00:37)
  • Demo: Custom Directive (04:14)
  • Demo: Custom Directive Cont. (02:59)
  • Summary (00:29)
Services (22:16)
  • Introduction (00:24)
  • What Are Services? (00:22)
  • How to Create a Service (00:26)
  • What Is Dependency Injection? (00:52)
  • How to Inject the Service (00:44)
  • Sharing Data in Components (00:33)
  • Implementing a Singleton (01:06)
  • Demo: Setup (04:30)
  • Demo: Add a Service (05:07)
  • Demo: Add Contact (04:42)
  • Demo: Global Service (03:04)
  • Summary (00:20)

HTTP and Pipes

HTTP (10:37)
  • Introduction (00:20)
  • HTTP Service Calls (00:35)
  • What are RESTful Services (00:31)
  • Demo: Installing the MongoDB (04:52)
  • Demo: Testing with Postman (04:02)
  • Summary (00:16)
HTTP Part2 (25:41)
  • Introduction (00:25)
  • Angular2 Support for REST (00:11)
  • Import Libraries (00:13)
  • HTTP REST Functions (00:20)
  • Bind Data to Form (00:14)
  • Get Function (00:23)
  • Insert Function (00:29)
  • Delete Function (00:19)
  • Update Function (00:27)
  • Demo: Updating the Contact Object (04:20)
  • Demo: Updating the Contacts Service (05:46)
  • Demo: Updating the Contacts Service Components (05:07)
  • Demo: Final Update and Testing/Debugging (04:04)
  • Demo: Update and; Delete Services (02:58)
  • Summary (00:17)
Pipes (27:39)
  • Introduction (00:32)
  • Angular2 Pipes (00:33)
  • What is Missing in Angular2? (00:56)
  • Built-In Pipes (00:18)
  • Using Pipes (00:25)
  • Pipes with Parameters (00:33)
  • Creating Custom Pipes (00:49)
  • Demo: Built-In Pipes (03:47)
  • Demo: Date Pipes (02:49)
  • Demo: Custom Filters - Sort (05:24)
  • Demo: Custom Filters - Filter (04:59)
  • Demo: Add a Text Box and Review (03:54)
  • Last Word on Pipes (00:13)
  • Pure Pipes (00:36)
  • Impure Pipes (01:30)
  • Summary (00:12)