Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Angular 2
Better or worse?
Vladimir Georgiev
Technical Trainer &
Software Developer @ SoftUni
http://VGeorgiev.org/
@VGeor...
Table of Contents
1.Who am I?
2.Where Angular 1 is going?
 v1.3
 v1.4
 v1.5
3.Angular 2
4.Demo
2
3
 Vladimir Georgiev
 Software Engineer and Technical Trainer @
Software University
 Top performing graduate from the T...
Have you ever written Angular?
Let's start with Angular 1
Angular 1 is not dead!
Angular 1 vs Angular 2 sites
angularjs.org angular.io
Angular 1.3
Patch releases
Bug fixes
Small features
Angular 1.4
New Router
Internationalization
ng-animate, ng-messages, ng-cookies
…
 You need to require ngNewRouter module
New Router
Angular 1.4 – Performance boost
~30% faster digest times vs 1.3
11
Upgrade to 1.4 is very easy
It has very few breaking changes
(well document)
Work will start after 1.4 is out
Planning will happen in public
Community involvement is the key
 Comment / vote on is...
Angular Team is working on
new features for Angular 1
New Router
Internationalization
Material Design
Migration plan to Angular 2
Support
Angular 1 New Features
Use new router
Use ES6 modules
Use ES6 in general
This will make the migration easier
Release Angular 1 until you are using it
18
Performance
The Changing Web
Mobile
Ease of Use
Why Angular 2.0?
Simpler
Flexible
Productive developers
Fast
Consistent
Angular 2 Themes
20
 Angular 1
 Angular 2
 Why?
 Problems with src, disabled:
Angular 2 – Data Binding
<component title="{{expression}}...
21
 Expression
 Driven by change detection
 Statement
 Driven by event
Angular 2 – Event Binding
<component [prop]="us...
22
Angular - Reference
<button (click)="input.focus()">
<input #input type="text" />
23
 Can you spot all the errors in here?
Angular 1 - Typos
<div tytle="{{usor.name}}">
<button ngClick="ctl.click()">
{{u...
24
Angular 1 - Typos
<div tytle="{{usor.name}}">
<button ngClick="ctl.click()">
{{usor.name}}
</button>
</div>
Angular 2 immediately Typo Errors
25
26
 Still in Angular 2
 Dependency injection
 Data binding
 Directives
 Router
 Filters
 Animation
 Accessibility
...
27
Web Components
New template syntax
New languages
Ultra-fast change detection
and more…
New in Angular 2
28
Angular 1
 Service
 Directive
 Controller
Angular 2
 Component
Differences between components
app.factory('SoftUn...
29
Directives
<input name="title" autocomplete="movie-title">
module.directive('autocomplete', ["autocompleter", function(...
30
Microsyntax Templates
<ul>
<li template="foreach #item in items">
{{item}}
</li>
</ul>
<ul>
<li *foreach="#item in item...
31
 AtScript is a JavaScript base language extending TypeScript
 It states that plain JavaScript code is a valid AtScrip...
32
AtScript
AtScript is TypeScript
33
34
 Traceur is a transpiler (compiler) that takes features of future
standards
 Traceur transpiles them into today JavaS...
Angular 2 Loves Standards
When Angular 2 ships?
First migration – May
Angular 2 – Far in the future
Open Source
with Community Involvement
38
 Add a feature
 Contact us
 Minimal set of changes per PR
 Unit tests
 Follow conventions
 Work on issues
 Write...
Resources - What We Need Additionally?
 ng-conf
 http://www.ng-conf.org/
 New Router Concepts
 https://www.youtube.com...
Angular 2
Live Demo
40
?
Angular 2
Prochain SlideShare
Chargement dans…5
×

Angular 2 - Better or worse

What is the difference between Angular 1 and Angular 2.
Content:
Where Angular 1.x is going?
Angular 2 - motivations and themes
Open-source culture in Angular team

  • Identifiez-vous pour voir les commentaires

Angular 2 - Better or worse

  1. 1. Angular 2 Better or worse? Vladimir Georgiev Technical Trainer & Software Developer @ SoftUni http://VGeorgiev.org/ @VGeorgiew
  2. 2. Table of Contents 1.Who am I? 2.Where Angular 1 is going?  v1.3  v1.4  v1.5 3.Angular 2 4.Demo 2
  3. 3. 3  Vladimir Georgiev  Software Engineer and Technical Trainer @ Software University  Top performing graduate from the Telerik Software Academy (2013)  Student in Technical University  Computer and Software Engineering  Web site & blog: www.VGeorgiev.org  Twitter: @VGeorgiew Who am I?
  4. 4. Have you ever written Angular?
  5. 5. Let's start with Angular 1
  6. 6. Angular 1 is not dead!
  7. 7. Angular 1 vs Angular 2 sites angularjs.org angular.io
  8. 8. Angular 1.3 Patch releases Bug fixes Small features
  9. 9. Angular 1.4 New Router Internationalization ng-animate, ng-messages, ng-cookies …
  10. 10.  You need to require ngNewRouter module New Router
  11. 11. Angular 1.4 – Performance boost ~30% faster digest times vs 1.3 11
  12. 12. Upgrade to 1.4 is very easy It has very few breaking changes (well document)
  13. 13. Work will start after 1.4 is out Planning will happen in public Community involvement is the key  Comment / vote on issues you want to see fix  Send pull requests Angular 1.5
  14. 14. Angular Team is working on new features for Angular 1
  15. 15. New Router Internationalization Material Design Migration plan to Angular 2 Support Angular 1 New Features
  16. 16. Use new router Use ES6 modules Use ES6 in general This will make the migration easier
  17. 17. Release Angular 1 until you are using it
  18. 18. 18 Performance The Changing Web Mobile Ease of Use Why Angular 2.0?
  19. 19. Simpler Flexible Productive developers Fast Consistent Angular 2 Themes
  20. 20. 20  Angular 1  Angular 2  Why?  Problems with src, disabled: Angular 2 – Data Binding <component title="{{expression}}"> <component [title]="expression"> <component disabled="{{exp}}"> <component ng-disabled="exp"> <component src="{{exp}}"> <component ng-src="{{exp}}">
  21. 21. 21  Expression  Driven by change detection  Statement  Driven by event Angular 2 – Event Binding <component [prop]="user.name(current)"> <component (event)="user.name(current)">
  22. 22. 22 Angular - Reference <button (click)="input.focus()"> <input #input type="text" />
  23. 23. 23  Can you spot all the errors in here? Angular 1 - Typos <div tytle="{{usor.name}}"> <button ngClick="ctl.click()"> {{usor.name}} </button> </div>
  24. 24. 24 Angular 1 - Typos <div tytle="{{usor.name}}"> <button ngClick="ctl.click()"> {{usor.name}} </button> </div>
  25. 25. Angular 2 immediately Typo Errors 25
  26. 26. 26  Still in Angular 2  Dependency injection  Data binding  Directives  Router  Filters  Animation  Accessibility Angular 1 ?= Angular 2  Still in Angular 2  i18n  Forms  Expressions  Material Design  Protractor  Karma  Mocks
  27. 27. 27 Web Components New template syntax New languages Ultra-fast change detection and more… New in Angular 2
  28. 28. 28 Angular 1  Service  Directive  Controller Angular 2  Component Differences between components app.factory('SoftUniStore', function () { … }); app.directive('autocomplete', function () { … }); app.controller('softUniController', function () { … }); @Component({ selector: 'my-app' }) @Template({ url: 'templates/softuni' }) class SoftUniComponent { … }
  29. 29. 29 Directives <input name="title" autocomplete="movie-title"> module.directive('autocomplete', ["autocompleter", function(autocompleter) { return { restrict: 'A', link: function (scope, element, attrs) { } } }]); @Decorator({ selector: '[autocomplete]' }) class Autocomplete { constructor(autocompleter:Autocompleter, el:NgElement, attrs:NgAttributes){ } } Angular 1 Angular 2
  30. 30. 30 Microsyntax Templates <ul> <li template="foreach #item in items"> {{item}} </li> </ul> <ul> <li *foreach="#item in items"> {{item}} </li> </ul>
  31. 31. 31  AtScript is a JavaScript base language extending TypeScript  It states that plain JavaScript code is a valid AtScript code  Builds on ECMAScript 6 with types  Extends it by annotations and type introspection  Superset of ES6  Uses TypeScript Syntax  Optional Runtime Type Verification  Type and Metadata Annotations AtScript
  32. 32. 32 AtScript
  33. 33. AtScript is TypeScript 33
  34. 34. 34  Traceur is a transpiler (compiler) that takes features of future standards  Traceur transpiles them into today JavaScript Traceur
  35. 35. Angular 2 Loves Standards
  36. 36. When Angular 2 ships? First migration – May Angular 2 – Far in the future
  37. 37. Open Source with Community Involvement
  38. 38. 38  Add a feature  Contact us  Minimal set of changes per PR  Unit tests  Follow conventions  Work on issues  Write a Plunker or a failing test  Broen at master?  Help closing issues How you can help
  39. 39. Resources - What We Need Additionally?  ng-conf  http://www.ng-conf.org/  New Router Concepts  https://www.youtube.com/watch?v=h1P_Vh4gSQY  TODO App  https://github.com/davideast/ng2do  Victor Savkin Blog  http://victorsavkin.com/
  40. 40. Angular 2 Live Demo 40
  41. 41. ? Angular 2

×