Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Modern Web Applications
with Angular2
By Sergi Almar
@sergialmar
2
3
https://stackoverflow.com/research/developer-survey-2016#technology
Angular2
4
ES5 ES6
TypesNo Types
Why Angular2?
• Simplicity
• Productivity
• Separation of concerns
• Use of TypeScript
• DI
• Reactive programming style
•...
TypeScript
• Superset of JavaScript
• With optional typing and class-based OOP
• Errors at compile time
• Better tooling (...
TypeScript
7
TypeScript
ES7
ES6
ES
5
- Classes
- Modules
- Arrow expressions
- Decorators
- Async / await
TypeScript Playground
8
Angular2 Architecture
9
Component
Template
Metadata
Event
Binding
Property
BindingInjector
Service
Service
Service
DI
Dire...
Angular2 Components
10
• One of Angular’s building blocks
• Enables having reusable UI
• Tree structure
Angular2 Components
11
Header
Footer
Nav
Search Input
Result List
Components
12
@Component({
selector: 'springone-app',
template: `<h1>Welcome to SpringOne Platform 2016</h1>`
})
export cl...
Templates
13
• Describes the view
• defines how the component needs to be rendered
• Inlined in the component
• template=`...
Styles
14
• Bundle component styles with our components
• Shadow DOM
• Inlined
• styles: ['h1 { font-weight: normal; }’]
•...
DEMO
15
Template binding (one-way)
16
@Component({
selector: 'springone-app',
template: `<h1>{{title}}</h1>`
})
export class Welco...
Event binding
17
DOM Component
(event)=expression
<button (click)=“connect()”>
Connect
</button>
chat.component.html
@Comp...
Two-way data binding
18
@Component({ … })
export class LoginComponent {
username:string = ‘Anonymous’;
}
Component DOM
[(v...
Directives
19
• Structural directives to change the DOM
• Built-in directives
• *ngIf,
• *ngFor
• *ngSwitch
• ngClass
<div...
DEMO
20
Interaction between components
21
• Data to child, events to parent
• @Input()
• Fetch data from the parent component
• @O...
DEMO
22
Services
23
• A class with a well-defined purpose
• Can be shared across components
• Use @Injectable() in all your servic...
Dependency Injection in Angular2
24
• Angular2 ships with its own dependency injection framework
• Only constructor inject...
Hierarchical Injectors
25
• Dependencies are singletons within the scope of an injector
DEMO
26
Routing
27
import { provideRouter, RouterConfig } from
'@angular/router';
const routes: RouterConfig = [
{ path: 'login', ...
Routing links
28
<a
routerLink="/greet">Greet</
a>
DEMO
29
HTTP Service
30
• Async REST client
• All methods return an Observable
http.get(‘/url’)
.map(res => res.json())
.subscribe...
DEMO
31
32
Package Manager?
Build Tool?
Module Loader?
Transpiler?
Angular CLI
33
SEO?
34
Crawler http://my.angular.site
<h1>{{title}}</h
1>
Angular Universal
35
Should we care about
server side rendering?
• Perceived load time
• Actual load time
• SEO
• Link pre...
36
Angular Style Guide
37
Angular Augury
38
Angular2 Final
39
Thanks
Q&A
@sergialmar
Upcoming SlideShare
Loading in …5
×

Building Modern Web Applications with Angular2

4,625 views

Published on

SpringOne Platform 2016
Speaker: Sergi Almar; Spring Certified Instructor

Web development has become more complex in the last few years with a plethora of frameworks to choose from and no clear direction. Join Sergi Almar in this presentation to learn why Angular2 is a good fit for Spring developers. We'll review the Angular2 architecture and see how TypeScript allows us to build more maintable and clean applications having the benefits of a typed language. We'll look at the Angular2 component based model, dependency injection, data binding, routing, templates...to build modern web applications.

No prior AngularJS knowledge is required.

Published in: Technology
  • Be the first to comment

Building Modern Web Applications with Angular2

  1. 1. Building Modern Web Applications with Angular2 By Sergi Almar @sergialmar
  2. 2. 2
  3. 3. 3 https://stackoverflow.com/research/developer-survey-2016#technology
  4. 4. Angular2 4 ES5 ES6 TypesNo Types
  5. 5. Why Angular2? • Simplicity • Productivity • Separation of concerns • Use of TypeScript • DI • Reactive programming style • Open Source • Community 5
  6. 6. TypeScript • Superset of JavaScript • With optional typing and class-based OOP • Errors at compile time • Better tooling (autocomplete, refactoring…) • Explicitly express intent • Provides features from future JS to current JS engines • Typescript transpiles to pure JavaScript 6
  7. 7. TypeScript 7 TypeScript ES7 ES6 ES 5 - Classes - Modules - Arrow expressions - Decorators - Async / await
  8. 8. TypeScript Playground 8
  9. 9. Angular2 Architecture 9 Component Template Metadata Event Binding Property BindingInjector Service Service Service DI Directives
  10. 10. Angular2 Components 10 • One of Angular’s building blocks • Enables having reusable UI • Tree structure
  11. 11. Angular2 Components 11 Header Footer Nav Search Input Result List
  12. 12. Components 12 @Component({ selector: 'springone-app', template: `<h1>Welcome to SpringOne Platform 2016</h1>` }) export class WelcomeComponent { } <springone-app></springone-app>
  13. 13. Templates 13 • Describes the view • defines how the component needs to be rendered • Inlined in the component • template=`<h1>Hi SpringOne Platform 2016</h1>` • Or in an external HTML file • templateUrl=‘template.html’
  14. 14. Styles 14 • Bundle component styles with our components • Shadow DOM • Inlined • styles: ['h1 { font-weight: normal; }’] • Or external • styleUrls: ['my-component.css']
  15. 15. DEMO 15
  16. 16. Template binding (one-way) 16 @Component({ selector: 'springone-app', template: `<h1>{{title}}</h1>` }) export class WelcomeComponent { title:string = ‘Welcome to SpringOne Platform 2016’; } Component DOM{{value}} [property]=“value”
  17. 17. Event binding 17 DOM Component (event)=expression <button (click)=“connect()”> Connect </button> chat.component.html @Component({…}) export class ChatComponent { connect():any{ … } } chat.component.ts
  18. 18. Two-way data binding 18 @Component({ … }) export class LoginComponent { username:string = ‘Anonymous’; } Component DOM [(value)]* = “expression” *[()] banana in a box <input type=“text” [(ngModel)] =“username”> login.component.html
  19. 19. Directives 19 • Structural directives to change the DOM • Built-in directives • *ngIf, • *ngFor • *ngSwitch • ngClass <div *ngFor="let name of names"> ... </div>
  20. 20. DEMO 20
  21. 21. Interaction between components 21 • Data to child, events to parent • @Input() • Fetch data from the parent component • @Output() • Send custom events to outside components
  22. 22. DEMO 22
  23. 23. Services 23 • A class with a well-defined purpose • Can be shared across components • Use @Injectable() in all your services @Injectable() export class GreetingService { constructor() { } }
  24. 24. Dependency Injection in Angular2 24 • Angular2 ships with its own dependency injection framework • Only constructor injection @Component({ selector: 'springone-app', template: ‘app.html’ }) export class WelcomeComponent { constructor(private greetingService:GreetingService){} }
  25. 25. Hierarchical Injectors 25 • Dependencies are singletons within the scope of an injector
  26. 26. DEMO 26
  27. 27. Routing 27 import { provideRouter, RouterConfig } from '@angular/router'; const routes: RouterConfig = [ { path: 'login', component: LoginComponent }, { path: 'chat', component: ChatComponent } ]; export const appRouterProviders = [provideRouter(routes)]; app.routes.ts <router-outlet></router-outlet> app.component.html
  28. 28. Routing links 28 <a routerLink="/greet">Greet</ a>
  29. 29. DEMO 29
  30. 30. HTTP Service 30 • Async REST client • All methods return an Observable http.get(‘/url’) .map(res => res.json()) .subscribe(data=> { //logic }); class Http { request(url: string | Request, options?: RequestOptionsArgs) : Observable<Response> get(url: string, options?: RequestOptionsArgs) : Observable<Response> post(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response> put(url: string, body: string, options?: RequestOptionsArgs) : Observable<Response> ... }
  31. 31. DEMO 31
  32. 32. 32 Package Manager? Build Tool? Module Loader? Transpiler?
  33. 33. Angular CLI 33
  34. 34. SEO? 34 Crawler http://my.angular.site <h1>{{title}}</h 1>
  35. 35. Angular Universal 35 Should we care about server side rendering? • Perceived load time • Actual load time • SEO • Link preview • Client side performance
  36. 36. 36
  37. 37. Angular Style Guide 37
  38. 38. Angular Augury 38
  39. 39. Angular2 Final 39
  40. 40. Thanks Q&A @sergialmar

×