The Complete Angular 2 With Typescript Course: Final Release

Covers Angular 2 Final, Constantly Updated | Instructor Support
4.2 (297 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3,745 students enrolled
$19
$60
68% off
Take This Course
  • Lectures 97
  • Length 6.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 English

Course Description

The code of this course is fully up to date with the Angular 2 Final release - meaning that the videos cover the Final release API and the support code is updated to Final - last updated on 19th October 2016.

Important: By enrolling you also get very fast and friendly student assistance. If you have questions please post a question and i'll get back to you ASAP. Remember I'm here (every day) to help you and can answer you also in French and Spanish if you prefer.

Student Reviews

> Evgeni Rovinsky 5 stars - Amazing lecturer ! Amazing material explanation. I enjoy every lesson and study with pleasure. Recommended for everyone who wants to dive into Angular 2. Thank you for this course !

> Dave Loeb 5 stars - "Compared to other courses I have taken in the past, this just seems to be more comprehensive while remaining easy to follow. Considering the material and the changes over time, quite an accomplishment."

> James Barlow 5 stars - "Very impressed  Great run through of all the little fiddly bits needed to get up and running, and doesn't assume any prior knowledge of Angular 2. A bit of prior experience of ES6 or Typescript will help."

 > Venkateswara 5 stars - "This is really a jump start with minimal tools to become an expert. I was a fan of Angular now a die hard fan of Angular 2."


Why Learn Angular 2 ?      

Angular 2 is clearly the next big thing in the software development landscape ! Angular 2 brings frontend development to a new level of simplicity, and will enable companies to work in the way they always wanted : with teams of Full Stack Developers. Its just not practical to divide functional requests across technological borders.

The familiarity of Angular 2 and Typescript to backend developers typically used to object oriented languages like Java or C# will be the killer feature that will enable its adoption: these are new technologies full of powerful features, but still they look so familiar.

If you are a professional software developer working on an enterprise setting, but also in a consumer-driven organization: You simply must learn Angular 2.

What is in this Course?

This is an introduction to Angular 2 and its surrounding Ecosystem - including Typescript and SystemJs. 

The course contains an Introduction To Typescript, Components and Directives, Pipes, Services, building the service layer with Observables and RxJs, how to setup a development project and more. As mentioned it will contain as well Forms, Routing and cover the Angular CLI.

How is the course structured?

The goal is to introduce Angular 2 concepts step by step in a sequential way, each concept building on the previous. At the end of each major section is a practical exercise to apply all the concepts learned in the section.


Why should you take the course?

This condensed course will spare you what can easily amount from weeks to months of research, and will give you insights only possible by having used Angular 2 in practice. 

The goal of the course is to cover the fundamental aspects of Angular 2 development, establishing some solid ground for getting started using the framework. 

Who should take this course ?

The course is designed for beginners, although intermediate and advanced students without prior knowledge of the framework would still learn Angular 2 a lot faster by taking this course.

Show me the Code

All code examples are available under the form of a small, isolated node module (as a zip file installable with npm install).

*Reminder: Like for all Udemy courses, a full 30 day money back guarantee is provided if the training material does not meet your expectations - and that means FULL refund, no questions asked.


What are the requirements?

  • Some understanding of Javascript is essential
  • Not mandatory, but to install the lessons code you need node and npm installed

What am I going to get from this course?

  • Know how to Build Custom Components
  • Know How to Build Custom Directives
  • Be Able to Build Single Page Applications
  • Know How to Build Complex Forms in Angular 2
  • Understand Observables, RxJs and Functional Reactive Programming
  • Know how to build the Service Layer of an Application
  • Know How to Implement in Angular 2 Common UI Patterns: creation forms, master detail, search, pagination
  • Be able to troubleshoot Angular 2 Applications using the console or Augury
  • Be able to build simple Angular 2 components and applications
  • Know how to setup the Typescript compiler and the SystemJs Module Loader
  • know how to setup an Angular 2 Project from scratch
  • Understand in-depth the template syntax, namely: Properties, Events, Attributes and References
  • Know how to use the Angular 2 core directives: ngFor, ngClass, ngStyle, ngIf and ngSwitch
  • Know how to build Directives, and when to use it in place of components

What is the target audience?

  • This course is aimed at Beginners, no previous experience in AngularJs is required
  • No Previous experience in Typescript is required
  • Some previous knowledge of HTML, CSS and plain Javascript is needed
  • Previous professional frontend development experience is advised
  • Knowledge of Typescript is not essential, but some experience with an object-oriented language like Ruby, C# or Java is advised

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Setting Up an Angular 2 Development Environment
Introduction and Course Structure
Preview
02:12
Development Environment Setup - Install Node and a Minimal Starting Point
Preview
04:00
Development Environment Setup - Setup The Lessons Code
Preview
02:13
Article

This contains the lessons code, instructions on how to install it come on the next lesson

Section 2: Hello World - Build Your First Angular 2 App Step By Step
05:58

This is step by step guide to create your first Angular 2 application. Its aimed at beginners just starting out with the framework

This lesson will show how to create a component, and how to link the component to a given custom HTML tag. It will show how to give the component a given template.

03:01

In this lesson we are going to see how to include a component inside another component. We are going to create a simple search box component and include it in our main application.

Quiz For the Introduction Section
3 questions
Section 3: Introduction to Angular 2 Components
04:37

In this lesson we are going to learn how to use the Angular 2 template syntax for properties, and learn how we can use it to pass input data to a component. We are going to see also a simplified input syntax for passing constant strings as component inputs.

04:08

In this lesson we are going to see how components can emit custom events via EventEmitter and the @Output decorator. We are going to see how we can subscribe to standard browser events, and how the syntax for that is exactly the same as in the case of custom component events. We will also learn how Typescript literals can be used to output variables inside template strings.

02:32

In this lesson we are going to learn how a component template can be defined both inline and in an external file. We are going to learn how to configure the component so that Angular can find the template at the correct location, using the module commonjs variable. We are going to learn also some best practices for component naming, from the official Angular 2 Style Guide.

03:51

In this lesson we are going to learn how components can be styled using both inline styles and an external css file. We will learn some more best practices on file naming. We will learn how the mechanism for style isolation works in Angular 2.

09:23

In this lesson we are going to put together all that we have learned so far about components to create a more complex example. We are going to create two components: a color picker and a color previewer and see how they can interact.

01:07

In this video we are going to present an exercise for putting in practice the several concepts that we have learned so far about components.

02:10

This video contains the solution for the introduction to components exercise.

Introduction to Components Quiz
3 questions
Section 4: Introduction To Angular 2 Directives
Introduction to Angular 2 Directives - Write Your First Custom Directive
Preview
04:31
04:00

Angular 2 Components are actually simply just Directives. All the functionality that we have learned so far about Components also applies to Directives. In this lesson we are going to learn how to Directives can also have inputs and outputs, and how the use of the decorators @Input and @Output also applies to directives.

We are also learn a new functionality for exporting a template reference for the directive itself into the template on which the directive is being used.

03:49

This is an overview on the ngFor core directive, how it works and some common use cases on how it should be used to build templates. It demonstrates how ngFor can be used with any iterable and not only arrays, and how to use together with other mechanisms of the framework like @ContentChildren.

03:00

This lesson is an overview on how to use the ngClass and ngStyle Directives, when to use which, and alternative syntax in case we only to modify one property/style.

04:01

This lesson covers the use of the core directive ngIf, as well as two other alternative way of showing or hiding elements from the DOM: the hidden property and the visibility CSS property.

08:01

This lesson is an extended tour on Angular 2 directives. This is an extremely powerful feature of Angular 2 that often remains underused. Its super powerful and and if used correctly can be used to create functionality that is much more reusable than components themselves.

01:30

In this video we are going to present the exercise for the Introduction To Directives section. The goal of the exercise is to take the learned functionality about how to build a custom directive and how to use the standard Angular 2 Core directives to build an improved version of the collapse-on-click directive.

02:39

In this video we are going to present the exercise solution for the Introduction To Directives section.

Section 5: Template Syntax In Detail
03:53

This lesson is a deep dive into Angular 2 template syntax properties. It explains not only the syntax, but also what it actually does under the hood. It explains the take of Angular 2 on Properties vs Attributes, and how the property mechanism is really much more generic than it looks - at its heart its simply a mechanism for reading and writing into the DOM.

02:39

This is an overview of what is possible with the Angular 2 template syntax for interpolation, common use cases and error scenarios.

05:13

This is a deep dive on how Angular 2 handles events, and in general how the framework works under the hood, namely how Zones or Zone.js works, and how its used by Angular to handle events. It covers the template syntax for events and its internal implementation.

Section 6: Introduction To Angular 2 Pipes
05:04

This is an introduction to the Angular 2 Standard Pipes. A major pitfall of using them will be presented: they don't work out of the box for certain browsers. We will cover the following pipes: Uppercase, Lowercase, Slice, Replace, Date format, Number format, Percent format and Currency format. We will also learn how to build a custom pipe.

Section 7: Introduction To Angular 2 Services
03:58

In this lesson we are going to learn how to write a simple Angular 2 injectable service, and see how to inject it anywhere in the app using constructor injection. We are going to see how the service can be configured for injection by passing it to the bootstrap dependencies list.

03:45

In this lesson we are going to use the Angular 2 HTTP service for the first time, and we are going to do an HTTP call to a mock backend HTTP server built using ExpressJs. We are going to parse the result of the GET call by mapping it with the Rxjs map operator, and pass the data to a list component.

05:32

In this lesson we are going to learn how to use the Angular 2 standard HTTP service to do a POST HTTP request to our development server. We are going to learn a couple of features of Typescript along the way: the object shorthand notation and the use of the private keyword in constructors.

We are going to learn about strategies on how to save data on the backend: we are going to present a simple strategy where the data gets saved first on the frontend and the results immediately presented to the user in an optimistic way. The data is saved in the background and we only present something else to the user if there was an error on the server, which is usually not the case.

02:17

In this lesson we are going to learn how to handle HTTP errors in the case when the server throws an error. We are going to learn how to pass an errors handling function to the HTTP service at subscription time, and we are going to learn the important difference between console.log and console.error.

02:45

In this lesson we are going to learn how to use the ts-node and express node.js modules to setup a very simple HTTP server, meant for development purposes only. We are going to learn how to serve mock data from the server via a small RESTful by configuring a couple of simple HTTP routes: including a GET, a POST and a DELETE.

00:53

In this lesson we are going to present the exercise for the Introduction to Services section, and provide some tips to help solve it.The goal of the exercise is to add a delete button to each entry of out lessons list, and then on button click do an Ajax HTTP DELETE request to the server and apply the modification operation there.

Introduction to Angular 2 Services - Exercise Solution - Do an HTTP DELETE
03:54
Section 8: Angular 2 Modules - @NgModule and Feature Modules
04:47

Introduction to Angular 2 NGModule and Feature modules

Section 9: Debugging Angular 2 Applications
03:03

In this lesson we will learn several ways to debug an Angular 2 application, including by using Augury and the console.

Section 10: Angular 2 Forms - Why Do We a Need A Whole Framework Module For Forms ?
05:01
In this tutorial we are going to learn exactly why Angular 2 provides us with a complete framework module to help
us build forms. Forms seem deceivingly simple, but the reality is that large forms that span multiple tabs
and have complex business validation logic can be some of the most challenging user interfaces to implement.

We are going to get an overview of what the Angular 2 Forms module provides us out of the box as developers:
what are the features available for data binding and validation. We are going to start this Angular 2 Forms
course by introducing the newest version of NgModel, which will be especially familiar to AngularJs developers.
03:44

In this tutorial we are going to go deeper into the NgModel Angular 2 Form Driven functionality. We will start by clarifying that ngModel is not only about bi-directional binding. We will show how we can turn that feature off and see how NgModel can still be useful for both form validation and form initialization.

Also in this lesson we are going to see how we can bi-directionally bind a Typescript enum instance into an HTML radio button form field, by using a couple of Typescript features: getters and setters.

04:02

In this tutorial we are going to learn how the Angular 2 Forms validation functionality helps us keep track of the current state of each form field. We are going to learn about the 3 separate states that Angular 2 tracks in form fields: is the form field touched or untouched ? is it pristine or dirty ? Valid or Invalid ?

We are also going to introduce the first standard form validator that allows us to mark a form field as mandatory: the required attribute directive. We are going to see exactly how these CSS form field state classes can be used to inform the user when a form field is in error, while ensuring that the user still has a good user experience while filling the form.

03:32

In this tutorial we are going to learn how Angular 2 Template Driven Forms really work under the hood. It might seem like a a lot of magic is going on, but in fact we will that its all just a set of form directives that get applied for us transparently. We are going to explain what those directives are and how they interact with each other.

We are also going to learn what the form field validators are already available to us out of the box: we will cover the minlength, maxlength and pattern form field validators and show them in action.

03:14

In this Angular 2 tutorial we are going to learn why template driven forms have that name: we are going to learn the available template exports that both the form and the control field directive make available to us. We will cover both the ngForm template variable export and the ngModel export.

We are also going to see the first example of how the form validity information can be used to add dynamic behaviour to a form: we are going to track the validity state of a whole form (and not only an individual field), and use that information to enable or disable a form submit button.

03:27

In this tutorial we are going to learn how the Angular 2 NgModel form field template export can be used to help dispay individual form field error messages to the user. We are going to cover common pitfalls that can occur when using the ngModel template export: when to add guards against undefined values using the Elvis operator.

We are also going to learn some best practices for using the NgModel template export to display the error messages in a way that ensures a good user experience. Its important to only display the form field error messages only if the user tried to change something in the form, and not show them initially when the form is first loaded.

03:03

In this tutorial we are going to learn how we can use the Angular 2 ngModelGroup template directive to group several controls of a form into a control group that has its own binding and validation status. We are going to give an example on how in a form with multiple sections (for example multiple tabs or fieldsets) we can display to the user that a whole section is in error.

We are going to give a concrete example of a control group: we are going to mark the legend of a fieldset in red if any of the fields inside the fieldset is still in error. This will demonstrate that the form control group has its own separate validity status, which can be different than that of the main form.

04:05

In this tutorial we are going to learn what are are model driven or reactive Angular Forms and how can we use them, we will cover the reactive form directives formGroup and formControlName in detail. We are going to learn some of the main differences towards template driven forms, and learn how to create forms and form controls programatically instead of declaratively via the form template.

We are going to cover the FormGroup and FormControl Angular 2 classes, and how can use them to declare a form and its controls, and how to define a form control initial value and validation rules. We are going to see how to bind a control created programatically with a form field by using the reactive form directives formGroup and formControlName.

02:29

In this tutorial we are going to learn how to configure form validation programmatically in Angular 2 model driven forms. we are are going to see how we use the standard Angular 2 Validators import to configure the several validators that we previously saw in action: marking mandatory fields with required, minimum field length with minLength, maximum field length with maxLength, and validating against a regular expression using the pattern validator.

02:12

In this tutorial we are going to learn how to we can configure model driven forms in a less verbose way by using a standard Angular 2 injectable, the FormBuilder.

We will see how the form builder provides a simplified builder API for configuring forms a bit more easilly than by calling the FormGroup and FormControl constructors.

06:23

In this tutorial we are going to learn why Angular 2 model driven forms are also sometimes called reactive forms. We are going to learn why these type of forms are more powerful than template driven forms, and we are going to give a couple of examples of common use cases where certain form functionality can be easily implemented using RxJs and a reactive approach, while doing it in another way would be more complex.

We are going to show how forms and their controls can be represented as streams of values, and we will tap into the valueChanges observable available via the Forms API to filter the form value but ony react to valid form values.

02:08

In this tutorial we are going to learn how we mark form fields in error and display error messages to the user in the case of Angular 2 model driven forms. We will see that the approach is similar than what we did while using template driven forms, but in this case we don't have template exports available.

We are going to see how the FormControl api exposes a list of controls each with a separate status and its own list of errors, and how that can be used to display messages to the user.

01:46

In this tutorial we are going to learn how we can define a form control using the reactive formControl directive in an Angular 2 model driven form in a programmatic way and how we don't even have to pass it to the FormBuilder or to the FormGroup. We can define the control in a separate variable and then bind it via the the template to the Form by using the formControl reactive form directive.

This functionality is very useful in cases where we would like to configure the form in a more flexible way, for example by dynamically adding a set of validators depending on the data of the form.

03:04

In this tutorial we are going to learn how simple it is to create custom form field driven validators while using Angular 2 model driven forms. These type of validators are really just plain functions that follow a set of conventions.

We are going to learn how to write a custom form validator and what the validating function needs to return in order to respect the Angular 2 form field validation contract.

05:44

In this tutorial we are going to learn how we can also implement custom form field validation in Angular 2 template driven forms, by creating our own custom validation directive. We are going to see how to write such directive and how its a best practive to extract the validation function to a separate function, so that it can also be used for model driven validation.

We are going to learn how we can configure the template driven custom validator directive into the Angular 2 Forms mechanism, by plugging the directive into the dependency injection system using NG_VALIDATORS and forwardRef.

How to set Form Values in a Model Driven Form, Resetting a Form
04:48
04:40

In this tutorial we are going to learn when to use template driven vs model driven Angular 2 Forms. We are going to learn how template driven and model driven are just simplifications of two ways of thinking about forms that can actually be combined in many cases, and we are going to see exacly how.

01:34

Congratulations, you have reached the end of our Angular 2 Forms course. Its now exercise time ! We are going to present in this lesson a simple problem that will give us a chance to practice most of what we have learned to far.

We are going to create a signup form, where the user needs to enter its credentials namelly the password twice in order to sign up. The goal is to build the form using NgModel and template driven forms first. Then use Ngcontrol and model driven forms to implement the mult field validation that ensures that both the password and the confirmation field have the same value.

06:09

In this tutorial we are going to learn how we can implement a sign up form using Angular 2 template driven forms and NgModel. Then we are going to use model driven forms to implement a multiple field form validation: the password that the user types and the confirmation field need to be identical.

We are going to throw in some functional programming and see how we can pass extra arguments to the model driven validation function by making it a partially applied function using Object.bind.

Section 11: Angular 2 Router -Build Single Page Applications and Learn Their Benefits
04:00

In this lessons we will talk about what is a Single Page Application, and why we would want to build our application that way. We are going talk about the advantages of single page apps, how they work under the hood and why the might become much more frequent in the future.

05:41

In this tutorial we are going to learn about how to setup the Angular 2 Router for an optimal development experience. We are going to configure a couple of basic routes, and setup the HTML5 base path, also we are going to configure the router to output some routing debug information.

But most of all we are going to setup our development server to avoid 404 not found errors whenever the user changes something directly in the browser address bar and presses Enter. This is maybe one the greatest pitfalls of routing especially for someone just starting to try the router for the first time.

02:55

In this tutorial we are going to learn how to configure the Angular 2 router to cover some commonly used routing scenarios: what if the user goes to the root of the application manually ? Probably you would want some sort of home page to be displayed. Also another very common scenario is: what should be the behaviour of the application when an unknown url is accessed? We are already know that in the server everything is getting redirected to the index.html file, so how do we handle this on the client?

We are going to answer those questions by learning how to configure the angular 2 router to have both an index or home route, and a fallback route. We are also going to learn an essential concept about routing configuration.

03:17

In this tutorial we are going to see how we can navigate between applications routes by using the routerLink directive and a declarative template-based approach. We are going to learn several ways of using the routerLink directive: either by passing it a hard-coded string or by passing in a template expression. We are going to use the routerLink directive to build the top navigation menu of our application.

02:00

In this tutorial we are going to go over on how we style the routing elements on the page depending on which route is active, by using the routerLinkActive and routerLinkActiveOptions directives. We are going to learn how routerLinkActive can be used to highlight the top menu entry that corresponds to the currently selected route, but we are also going to see how in many cases we want to combine that with routerLinkActiveOptions, to make sure that only entry gets highlighted.

04:10

In this tutorial we are going to setup child routes in the Angular 2 Router. Most of all we are going to learn the most important concept about child routes: only one can be active at a given time. We are going to learn that the top level routing configuration behaves like if those where child routes of an implicit root route. We are going to setup multiple child routes, and we are going to learn what are componentless routes.

Also we are going to learn a best practice on routing configuration: how to split the routing configuration into multiples files and how to include it in the main file using the spread operator

03:59

In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to learn how to trigger route navigation by using the navigate API method, which takes an array or arguments and a parameters object.

We are going to learn how to do both absolute and relative route navigation using the navigate API, and we are going to introduce the notion of activated route.

06:02

In this tutorial we are going to learn how to configure the Angular 2 Router to pass parameters from a master route to a detail route. We are going to learn the notion of currently activated route and of route snapshot. We are going to learn the difference between the parameters available in the route snapshot and the content of the params observable.

We are also going to learn how to navigate between two details in a master detail route setup, and learn an important concept about how the router instantiates components: the router performs certain optimizations in some cases that have impact on the way we code our top-level components.

03:02

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in the navigate API call, or we can use the queryParams directive.

On the receiving side, and especially in the case of detail child routes where we want to navigate from one detail into the other, we are going to see how to use the queryParams observable to receive the navigation query parameters.

04:48

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing it and how we can fix it.

This is an issue that might become visible in very large applications which load a lot of data from the backend, and might cause errors that can be very hard to troubleshoot.

04:58

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example save data that was not yet persisted.

03:32

In this tutorial we are going to learn how we can to configure an can activate route guard in the Angular 2 router. We are going to implement the concrete example where a user can only enter a certain route if its authorized to do so. We are also going to give in this tutorial an example of how a route guard can also make asynchronous calls, by returning an observable that will eventually resolve to true or false.

05:15

In this tutorial we are going to introduce another major Angular 2 Router concept: auxiliare routes. We are going to learn what are some commonly used use cases that can benefit from the use of auxiliary routes. We are going to learn that auxiliary routes are really just plain routes with a different router outlet, and that other than that all the same concepts apply, but there is a different URL syntax that we need to be aware.

02:54

In this tutorial we are going to learn how we can pass routing parameters to an Angular 2 Auxiliary route. We are going to see that the logic is very similar to what we would do in the case of a primary route, except that we need to use a slightly different syntax.

02:59

In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different between path matching in prefix mode vs full mode, and we are going to learn why redirects should be in general configured using full path matching.

03:17

In this tutorial we are going to learn how we can configure the Angular 2 router to use a different location strategy than the standard HTML5 location strategy which is based on the browser history API. We are going to learn how we can configure angular 2 to use instead a Hash location strategy which is compatible with legacy browsers.

We are also going to learn in which cases we might need the hash location strategy: a typical scenario is migration of Angular 2 applications.

Router Lazy Loading and Shared Modules
08:45
Lazy Loading and Service Configuration - Avoid Duplicate Services
06:41
02:50

In this tutorial we are going to present an exercise to practise a lot of what we have learned in the Angular 2 Router course. We are going to present the problem: we have a dashboard with multiple widgets, and we are going to make the dashboard configurable by using auxiliary routes.

Each auxiliary route will correspond to a given widget, and we are going to display each widget depending if the user clicks a certain checkbox. The url can then be bookmarked and accessed later, and the same widgets that the user selected will be displayed.

04:41

In this tutorial we are going to present the solution for the Angular 2 router exercise. We are going to show how we can build a widget dashboard by using auxiliary routes. We are going to go through the router configuration and the implementation of the navigation method.

Section 12: Introduction to Functional Reactive Programming - Service Layers with RxJs
05:32

In this lesson we are going to present a couple of baseline concepts that are essential for being able to build service layers in Angular 2: we will introduce the notions of stream and Observable. We are going to understand that these are two different concepts: an Observable is not a stream.

During the lesson we will write our first Observable and we will learn one of the main properties of Observables: that they are inherently inert, and that we need to subscribe to them in order for them to work. We are also going to introduce our first RxJs operator: the do operator which should only be used for debugging purposes as it introduces side effects.

05:28

In this lesson we are going to present two other foundation concepts of Observables: error handling and completion. We are going to initially call our backend server using the browser Fetch API, which is promises based.

We will then learn how to create an Observable from a promise, and see how and why an observable is a good way to model a network call. We will learn about some advantages of Observables vs Promises.

03:04

In this lesson we are going to learn one of the key concepts about Observables: we can easily derive new Observables from existing Observables using the many RxJs operators available to us. In this lesson we are going to create an Observable from another Observable by using the RxJs map operator.

05:58

In this lesson we are going to learn that Observables can be combined with other Observables. In this case we are going to create an Observable of mouse moves that only emits if the mouse is bellow a certain region of the page.

We are also going to create an Observable of mouse clicks, that emits if the user clicks anywhere on the page - both of these Observables will be created using fromEvent. We will then combine these two Observables to create third Observable using the RxJs combineLatests operator.

03:51

In this lesson we are going to learn the relation between the Angular 2 HTTP module and Observables, and how its essential to understand Observables in order to do even the most common backend-communication tasks using the HTTP module.

We are going to learn how Angular 2 HTTP models network responses using Observables, and how completion is handled.

04:31

In this lesson we are going to learn how to use Angular 2 HTTP to build the service layer of our application.

We are going to learn how to build strongly typed services and we are going to learn how the service layer can be designed around the notion of Observables.

04:36

In this lesson we are going to do an introduction to Functional Reactive Programming, and we are going to see how an application can be built around the notion of Observables. We are going to see how programs can be build with very little state variables, and how data can be passed on from Observables directly to templates by using the Async Pipe.

We are going to learn also why in some cases its not a good idea to call the service layer directly from a template expression - this is a pitfall to avoid.

05:09

In this lesson we are going to use the HTTP module to implement a modification operation: we are going to add a lesson to a lessons list via an HTTP POST call, and then reload the data from the server.

While implementing this simple use case, we are going to come across something that might be surprising at first: its really simple to do duplicate network calls accidentally while using Angular 2 HTTP.

We are going to learn the reason why that is the case, and learn how we can avoid that using the RxJs Cache Operator.

04:18

In this lesson we are going to learn how we make multiple sequential requests to the server by using the RxJs Concat operator. This is another example of how from the point of view of the Angular 2 HTTP module network requests are really just Observables that can be easily combined using the many RxJs operators available.

We are going to implement the following concrete example: do a delete on the server, then a second delete and finally reload the new list from the server and display it on the screen.

03:58

In this lesson we are going to learn how to do two HTTP requests in parallel, wait for each to return and produce a result that contains the combination of the two HTTP calls.

For that we are going to use an operator that we presented before, the combineLatest Operator which will in this time be used in a completely different context. This is a good example of the power of the approach that the Angular 2 HTTP module gives us, by modeling network calls as Observables; any RxJs operator can potentially by used to process network calls.

04:32


In this lesson we are going to learn how we can build a chain of HTTP requests, but now we will be able to take the result of one request and then use it to build the next request.

For this we are going to introduce a new RxJs Operator for combining Observables, the switchMap Operator. This lesson will give us a first contact with the more general Switch strategy of combining Observables.

03:41

In this lesson we are going to learn how RxJs and Observables make it very simple to deal with certain uses cases that before might be challenging. For example, we are going to learn how to retry a network call in case of error.

This is very useful in situations when the backend occasionally returns errors that are of an intermittent nature. In those scenarios a good strategy is to try to send the network call again a second time, usually after a certain delay has elapsed.

In this lesson we are going to learn how we can use the RxJs Operators retry and retryWhen to implement service layers that are resilient to temporary errors.

02:56

In this lesson we are going to learn how to implement a use case using RxJs and Observables that was very hard to do previously: the cancellation of an ongoing HTTP request. We are going to learn about the RxJs subscription object and how to use it to implement cancellation.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Angular University, Learn and Keep Up with the Angular 2 Ecosystem

About the Angular University:

The Angular University aims to be the one place that you  go in order to learn and keep up with the Angular 2 ecosystem. We provide premium quality video tutorials, screencast style.

About the course instructor:

Hello, my name is Vasco  and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.   

I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations.

I also love to teach, write and talk about technology.  I am looking forward to be your Angular 2 instructor,

Kind Regards,

Vasco

Ready to start learning?
Take This Course