Angular 2 is a JavaScript framework for building client applications. It uses TypeScript for static typing and supports mobile and desktop applications. The key aspects covered are components, which encapsulate templates and logic, bindings for data flow, services for reusable logic, routers for navigation, and directives for extending DOM elements. The document recommends using the Angular CLI for building applications and compares Angular 2 to other frameworks, noting its emphasis on simplicity, functionality, and convenience.

3. Angular 2
Sami Suo-Heikki
19.5.2016

4. What is Angular 2?

5. What is Angular 2?
JavaScript Framework
Cross platform
Fully component based
Built from the ground up with TypeScript
Native ES6 modules
Supports server-side prerendering

6. One framework.
Mobile and Desktop.

8. Agenda for today
Architecture of Angular 2 app
Build your application with Angular CLI
Comparison to other JS frameworks
Useful tools

9. Architecture of Angular 2 app
Component
Binding
Service
Router
Directive

10. Component
Encapsulate the template,
data and the behaviour of a
view.

11. Component
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: 'Hello {{name}}!'
})
export class HelloWorldComponent {
constructor() {
this.name = 'World!';
}
}

12. Component
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: 'Hello {{name}}!'
})
export class HelloWorldComponent {
constructor() {
this.name = 'World!';
}
}

13. Component
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: 'Hello {{name}}!'
})
export class HelloWorldComponent {
constructor() {
this.name = 'World!';
}
}

14. Component
import { Component } from '@angular/core';
@Component({
selector: 'hello-world',
template: 'Hello {{name}}!'
})
export class HelloWorldComponent {
constructor() {
this.name = 'World!';
}
}

15. Component
Component Dom

16. Binding
Component Dom
name = “World” <h1> {{name}} </h1>

17. Binding
Component Dom
onClick() {
...
}
<input (click)=”onClick()”>

18. Two-way data binding
<input [(value)]="todo.text">

19. Service
Reusable data service in your
application.

20. Service
Data Access
Logging
Business Logic
Configuration

21. Router
Responsible for navigation.

22. Router
@Routes([
{path: '/my-route', component: MyRouteComponent},
{path: '/my-other-route', component: MyOtherComponent},
])

23. Router
@Routes([
{path: '/my-route', component: MyRouteComponent},
{path: '/my-other-route', component: MyOtherComponent},
])

24. Router
@Routes([
{path: '/my-route', component: MyRouteComponent},
{path: '/my-other-route', component: MyOtherComponent},
])

25. Directive
Modify DOM elements and/or
extend their behaviour.

26. @Component({
selector: 'my-app',
template: `
<vaadin-pie-chart>
…
</vaadin-pie-chart>
`
})

27. @Component({
selector: 'my-app',
template: `
<vaadin-pie-chart>
…
</vaadin-pie-chart>
`,
directives: [VaadinCharts,
DataSeries]
})

28. @Component({
selector: 'my-app',
template: `
<vaadin-pie-chart>
…
</vaadin-pie-chart>
`,
directives: [VaadinCharts,
DataSeries]
})

29. Build your app
with Angular CLI
cli.angular.io

30. Angular CLI
1. npm install -g angular-cli
2. ng new PROJECT_NAME
3. ng serve
4. ng generate route my-hero
5. ng build

31. (Demo with Angular CLI)

32. Comparison to other frameworks

33. vs

34. Simplicity

35. Simplicity

36. Simplicity

37. Simplicity
Functionality

38. Simplicity
Functionality

39. Simplicity
Functionality

40. Simplicity
Functionality
Convenience

41. Simplicity
Functionality
Convenience

42. Simplicity
Functionality
Convenience

43. vs

44. Simplicity
Functionality
Convenience

45. Simplicity
Functionality
Convenience

46. Simplicity
Functionality
Convenience

47. Simplicity
Functionality
Convenience

48. Useful tools

49. augury.angular.io

50. angular.io/styleguide

51. cli.angular.io

52. mobile.angular.io

53. May the
be with you