![www.luxoft.co
m
Angular 2 HTTP call
private http: Http;
…
this.http.get('http://swapi.co/api/films')
.map((response: Response) => response.json() as FilmModel[])
.do(data => console.log(JSON.stringify(data)))
.catch(this.handleError);](https://image.slidesharecdn.com/dmytrokocherginangular2andnewjavascripttechnologies-171130141901/85/Dmytro-Kochergin-Angular-2-and-New-Java-Script-Technologies-40-320.jpg)
Dmytro Kochergin Angular 2 and New Java Script Technologies
- 1. www.luxoft.co m Angular 2 + new JavaScript technologies Dmitriy Kochergin 21 November 2017 partially used slides from Luxoft Training Center training Angular2
- 3. www.luxoft.co m Contents • Angular 2 • MEAN stack • Node.js • NPM • Express • JavaScript, EcmaScript, TypeScript • RXJS
- 12. www.luxoft.co m Angular 2 features: Two-way data binding
- 13. www.luxoft.co m Angular 2 features: Dependency injection
- 14. www.luxoft.co m Angular 2 features: Directives
- 15. www.luxoft.co m Angular 2 features: Modules
- 17. www.luxoft.co m
- 18. www.luxoft.co m Angular 2 development environment
- 20. www.luxoft.co m What is Node.JS • v8 JavaScript engine • More performant than Java Rhino and Nashorn • Event driven • Non-blocking standard libraries • Most APIs speak streams • Provides a package manager and module system • JavaScript on client and server • Code reuse
- 21. www.luxoft.co m Old school JS programming • For example we need jquery in frontend • Go to jquery site • Download *.js or *.min.js • Put it to js folder • Add it to index.html head section • Repeat steps for upgrade
- 22. www.luxoft.co m NPM – Node Package Manager • Handles and resolves dependencies • More than 475,000 modules available • package.json – dependencies definition • npm install • node_modules
- 23. www.luxoft.co m Angular CLI • ng create (component, html, scss) • ng serve - localhost:4200
- 24. www.luxoft.co m Routes with Express • Respond to HTTP requests with a callback • Supports variable placement in routes • Easy to serve JSON • Example app.get("/greeting", function(req,res) { res.send("Hello, "+req.query.name+"!"); });
- 25. www.luxoft.co m Express routing examples app.get(’/users/:id?’, function(req,res) { var id = req.params.id; res.send( id ? 'user'+id : 'users’); }); app.post(’/users/:id.:format’, function(req,res) { var id = req.params.id; var format = req.params.format; res.send( 'user '+id+ ’ format : ’+format); });
- 29. www.luxoft.co m EcmaScript • ECMAScript: A language standardized by ECMA International and overseen by the TC39 committee • JavaScript: The commonly used name for implementations of the ECMAScript standard. • ECMAScript 5 (ES5): The 5th edition of ECMAScript (2009). Current standard in modern browsers. • ECMAScript 2015 (ES6): Partially implemented in most modern browsers. See compatibility at kangax.github.io/compat-table/es6/ • ECMAScript 2016 (ES7): Very small release. • ECMAScript 2017 (ES8): On the edge. • ECMAScript 2018 (ES9): Future is near. • Babel can transpile ES2015+ scripts to older versions of JS.
- 30. www.luxoft.co m ES 2015 new features • let • const • Arrow function • Computed Property Names • Array matching, Object matching • Array: new functions • Object.assign • String searching • Set, Map, WeakSet/WeakMap • String Interpolation • New number functions • Default Parameter Values • Rest Parameters • Spread Operator • Classes • Inheritance • Static members • Getters/setters • Modules import/export • Promises (built in), Generators
- 31. www.luxoft.co m TypeScript • TypeScript is a free and open-source programming language developed and maintained by Microsoft. Anders Hejlsberg, lead architect of C# creator of Delphi and Turbo Pascal, author of TypeScript
- 32. www.luxoft.co m TypeScript • TypeScript is a strict superset of JavaScript, and adds optional static typing, any existing JavaScript programs are also valid TypeScript programs.
- 33. www.luxoft.co m
- 34. www.luxoft.co m
- 35. www.luxoft.co m Typescript features • Data types: Boolean, Number, String, Array, Enum, Any, Void • Interfaces (optional properties, function types, array types, class types, extending) • Annotations • Classes, Abstract classes • Private/Public/Protected: Public by default • Accessors • Static properties • Functions (Optional parameters, Default parameters, Rest parameters) • Overloading • Generics • Decorators, Tuples, Type assertions, Async/await
- 36. www.luxoft.co m Interfaces interface LabelledValue { label: string; } function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); } var myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj);
- 37. www.luxoft.co m Classes class Animal { private name: string; constructor(theName: string) { this.name = theName; } move(meters: number) { alert(this.name + " moved " + meters + "m."); } }
- 40. www.luxoft.co m Angular 2 HTTP call private http: Http; … this.http.get('http://swapi.co/api/films') .map((response: Response) => response.json() as FilmModel[]) .do(data => console.log(JSON.stringify(data))) .catch(this.handleError);
- 41. www.luxoft.co m Observable Register/Unregister (wants to watch TV or not) can cause backpressure 1 2 Push events (stream of pictures) Observable Observable Observer Observer
- 42. www.luxoft.co m RXJS • Think how data should flow instead of what you do to make it flow
- 43. www.luxoft.co m RXJS Example productsStream .filter(product => product.price > 30) .map(product => product.price) .forEach(price => console.log(`Prices higher than $30: ${price}`); for (Product product: productsList) { if (product.price > 30) { console.log(`Prices higher than $30: ` + product.price; } }
- 44. www.luxoft.co m Reactive approach • Clean and understandable • Focusing on result, not on algorithm • Complex operations natively from the box (debounce and throttle) • Backpressure handling • Skip or get every “n” element (e.g. trading data) • Abort processing of not needed data (user disconnected) • Complex debug • Learning curve
- 46. www.luxoft.co m