This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 1 (Introduction): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-1-introduction Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

1. DIVE INTO ANGULAR,
PART 4: ANGULAR 2.0
_by Oleksii Prohonnyi

2. AGENDA
 What’s new
 Build Angular 2 app in 6 steps
 ES6 vs TypeScript
 Architecture
 Module
 Component
 Template
 Data binding
 Service
 1.x vs 2.0 comparison
 References

3. WHAT’S NEW

4. WHAT’S NEW
 Component-based
 Simplified directives
 Dependency injection
 TypeScript (ES6 + Types + Annotations)
 Generics
 Lambdas with TypeScript
 Forms and Validations
 See more: dzone.com

5. BUILD ANGULAR 2 APP
IN 6 STEPS

6. BUILD ANGULAR 2 APP
0. Install Node.js and npm.
1. Create and configure the project.
2. Create your application.
3. Create a component and add it to your application.
4. Start up your application.
5. Define the web page that hosts the application.
6. Build and run the application.
 Download example: github.com
 See more: angular.io

7. ES6 VS TYPESCRIPT

8. ES6 VS TYPESCRIPT

9. ES6 VS TYPESCRIPT
See more:
 EcmaScript 6/2015
 TypeScript

10. ARCHITECTURE

11. ARCHITECTURE
 The framework consists of several cooperating libraries, some of
them core and some optional.
 The eight main building blocks of an Angular 2 application:
– Modules
– Components
– Templates
– Metadata
– Data binding
– Directives
– Services
– Dependency injection
 See more: angular.io

12. ARCHITECTURE

13. MODULE

14. MODULE
 Every Angular app has at least one module, the root module,
conventionally named AppModule.
 An Angular module, whether a root or feature, is a class with an
@NgModule decorator.
 NgModule is a decorator function that takes a single metadata
object whose properties describe the module (declarations,
exports, imports, providers, bootstrap).

15. MODULE

16. COMPONENT

17. COMPONENT
 A component controls a patch of screen real estate that we could
call a view.
 We define a component's application logic — what it does to
support the view — inside a class.
 The class interacts with the view through an API of properties
and methods.

18. COMPONENT

19. COMPONENT
 In TypeScript, we attach metadata by using a decorator:

20. TEMPLATE

21. TEMPLATE
 We define a component's view with its companion template.
 A template is a form of HTML that tells Angular how to render the
component.

22. DATA BINDING

23. DATA BINDING
 Angular supports data binding, a mechanism for coordinating
parts of a template with parts of a component.
 There are four forms of data binding syntax. Each form has a
direction — to the DOM, from the DOM, or in both directions:

24. DATA BINDING
 Two-way data binding is an important fourth form that combines
property and event binding in a single notation, using the
ngModel directive.

25. SERVICE

26. SERVICE
 Service is a broad category encompassing any value, function, or
feature that our application needs.
 Almost anything can be a service. A service is typically a class
with a narrow, well-defined purpose. It should do something
specific and do it well.

27. 1.X VS 2.0 COMPARISON

28. 1.X VS 2.0: Data binding

29. 1.X VS 2.0: Filters

30. 1.X VS 2.0: Local variables

31. 1.X VS 2.0: Ng-App

32. 1.X VS 2.0: Ng-Class

33. 1.X VS 2.0: Ng-Click

34. 1.X VS 2.0: Ng-Controller

35. 1.X VS 2.0: Ng-Href

36. 1.X VS 2.0: Ng-If

37. 1.X VS 2.0: Ng-Model

38. 1.X VS 2.0: Ng-Repeat

39. 1.X VS 2.0: Ng-Show

40. 1.X VS 2.0: Ng-Src

41. 1.X VS 2.0: Ng-Style

42. 1.X VS 2.0: Ng-Switch

43. 1.X VS 2.0: Controllers

44. 1.X VS 2.0: Dependency injection

45. SEE MORE

46. SEE MORE
 Directive
 Dependency injection
 Wrapping
 Filters
 Input & output
 Forms
 Style guide

47. REFERENCES

48. REFERENCES
 https://angular.io/
 http://www.angular2.com/
 https://angular.io/docs/ts/latest/tutorial/
 http://eisenbergeffect.bluespire.com/all-about-angular-2-0/
 https://www.lynda.com/AngularJS-tutorials/Learn-AngularJS-2-
Basics/428058-2.html
 https://egghead.io/courses/angular-2-fundamentals
 http://learnangular2.com/

50. HOME TASK

51. HOME TASK
 Main idea: migrate existing application on a new version of
Angular.js framework.
 Technical details:
– Component structure
– Component router
– TypeScript/EcmaScript 6
– Readme with installation instructions

52. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi