Angular2 Observable Data Services

We will define and discuss the Observer Design Pattern. Observables are implemented in RxJS and are under consideration for standardization in ES2016. We will compare Observables, Promises, Events and callbacks. We will also discuss how Promises, Events and callbacks can be bridged into Observables.Finally we will discuss how RxJS is used to implement Angular 2. We will explore how Observables are used in change detection and ngZone, Http, Async Facade and Forms. We will also discuss how to make use of RxJS and Observables in our Angular 2 applications.

Transcript

2. Smit Thakkar Lead Software Developer LendCypher
3. Flask-NSFW https://github.com/smitthakkar96
4. Agenda • Getting started with Angular2 • Angular2 setup • Demo#1 Typeahead ◦ Typeahead Classical Style - Response Order ◦ Inefficiency with Classical Style ◦ Typeahead : now with streams ▪ Forms Control ▪ Throttling ▪ SwitchMap ▪ View Binding and async pipe • Demo#2 ◦ Diving deep into RxJx
5. Environment used • VS Code • TypeScript • NodeJs and NPM • Angular CLI
6. What’s new in Angular2 • Performance Improvements • Mobile Support • TypeScript • No $Scope • Component based programming • Reactive Programming
7. Building Blocks of Angular2
8. Angular2 Components import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; } AngularJs Controllers var myApp = angular.module('myApp',[]); myApp.controller('DoubleController', ['$scope', function($scope) { $scope.double = function(value) { return value * 2; }; }]); Components
9. Providers Angular2 Provider import {Injectable} from 'angular2/core'; @Injectable() export class CarService { getCars = () => [ { id: 1, name: 'BMW' }, { id: 2, name: 'Suzuki' }, { id: 3, name: 'Volkswagen' } ]; } AngularJs Factory / Services var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; });
10. Pipes import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'capitalize'}) export class CapitalizePipe implements PipeTransform { transform(value: string, args: string[]): any { if (!value) return value; return value.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); } }
11. Observables
12. What is RsJx? A Powerful implementation of observable. Hundreds of contributors Largely developed and maintained by Microsoft and Netflix It has all sets of combinators which you need.
13. An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more. With Observable it doesn't matter if you want to handle 0, 1, or multiple events. You can utilize the same API in each case. Observable also has the advantage over Promise to be cancelable. If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore, the Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore. Observable provides operators like map, forEach, reduce, ... similar to an array There are also powerful operators like retry(), or replay(), ... that are often quite handy. What are Observables?
14. Typeahead Classical Style
15. Typeahead Classical Style - Throttle
16. Typeahead Classical Style - Response Order
17. Out-of-Band and Side Effects
18. Inefficiency
19. Typeahead: now with streams
20. Angular2 Forms
21. Angular2 Forms Control
22. Angular2 Forms: Control Value Changes
23. Event Flow Step One: Throttling
24. Angular2 Http
25. Event Flow Step 2: Ticker Loader
26. Event Flow Step 3: SwitchMap
27. Event Flow 4: View Binding
28. Async Pipe
29. Event Flow 4: View Binding with Pipes
30. Q&A Queries and Issues are heartily welcome
31. Thank You!
32. smitthakkar96@gmail.com github.com/smitthakkar96 facebook.com/geekysmit