The evolution of Angular 2 @ AngularJS Munich Meetup #5
4 likes1,902 views
The document provides an overview of Angular 2, detailing its history, features, and architectural changes from Angular 1.x. Key highlights include Angular 2's support for modern browsers, TypeScript development, modular design, improved performance, and a shift from services and factories to ES6 classes. It also addresses migration challenges and available resources for learning Angular 2.
![Components
<angular-js-munich-app></angular-js-munich-app>
@Component({
selector: 'angular-js-munich-app',
})
@View({
url: 'angular-js-munich.html'
})
class AngularJSMunichApp {
todos: [string];
constructor() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
}](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-17-320.jpg)
![Annotations in ES5
// Constructor function
function AngularJSMunichApp() { }
// Annotations attached to function
AngularJSMunichApp.annotations = [
new Component({ selector: 'angular-js-munich-app' }),
new View({ url: 'angular-js-munich.html' })
];
customize the components](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-19-320.jpg)
![Controllers
class AngularJSMunichApp {
todos: [string];
constructor() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
addTodo(title: string) {
this.todos.push(title);
}
}
Holds the components JS logic](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-20-320.jpg)
![Controllers in ES5
function AngularJSMunichApp() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
AngularJSMunichApp.prototype.addTodo = function(title) {
this.todos.push(title);
};
Holds the components code](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-21-320.jpg)
![@Component({
selector: 'angular-js-munich-app',
})
@View({
url: 'angular-js-munich.html'
})
class AngularJSMunichApp {
todos: [string];
constructor() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
}
<angular-js-munich-app></angular-js-munich-app>
Components](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-22-320.jpg)
![Template Syntax
Consists of 3 main features
#localVar - Local Variables
[innerText] - Property Binding
(click) - Event Handler](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-23-320.jpg)
![Template Syntax
Consists of 3 main features
<!-- # creates a local variable inside the template -->
<input #textbox>
<!-- (event) registers an event handler -->
<button (click)="addTodo(textbox.value)"> Add </button>
<!-- [property] binds a value to a property of a DOM element or
component -->
<div [innertext]="textbox.value"></div>](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-24-320.jpg)
![Template Syntax
Nofity about errors immediately
<!-- # creates a local variable inside the template -->
<input #textbox>
<!-- (event) registers an event handler -->
<button (clikc)="addtodo(textbox.value)"> Add </button>
<!-- [property] binds a value to a property of a DOM element or
component -->
<div [innertext]="textBox.value"></div>](https://image.slidesharecdn.com/theevolutionofangular2-angularjsmunichmeetup5public-150522130130-lva1-app6892/85/The-evolution-of-Angular-2-AngularJS-Munich-Meetup-5-25-320.jpg)
The evolution of Angular 2 @ AngularJS Munich Meetup #5
- 2. @jowe Johannes Weber JS Craftsman & Angular Styler
- 3. Disclaimer Angular 2 is still on a developer preview! Things will/might change!
- 4. 1. History of Angular 2. Get an overview of Angular 2.0 3. Angualr 2 Features 4. Bridging the gap Between 1.x and 2 Outline
- 5. 3 weeks with Angular 1,500 LOC 6 months x 3 devs Before 17,000 LOC feedback
- 7. Jan 2010
- 8. “We’re designing Angular 2 for the way the world will look when we believe folks will use it. In particular, this means targeting modern browsers and using ECMAScript 6.” from the official Angular announcement
- 10. Angular 2 • For “evergreen” Browsers • Chrome, Firefox, Opera, Safari and IE11 • Chrome on Android, iOS6+, Windows Phone 8+, FF mobile • Instrumented • Angular-wide logging service • diary.js
- 11. Angular 2 • Modular • Every piece of Angular 2 is optional & replacable • Mobile first, Offline support • Simplify • Directives • Templating • IDE can validate and analyze • Performance • Improve first load time with prerendering • Superfast change detection
- 15. Angular 2 Angular 2.0 is written in TypeScript You can write your code either in TS, ES6 or ES5
- 17. Components <angular-js-munich-app></angular-js-munich-app> @Component({ selector: 'angular-js-munich-app', }) @View({ url: 'angular-js-munich.html' }) class AngularJSMunichApp { todos: [string]; constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; } }
- 18. Annotations @Component({ selector: 'angular-js-munich-app', }) @View({ url: 'angular-js-munich.html' }) customize the components
- 19. Annotations in ES5 // Constructor function function AngularJSMunichApp() { } // Annotations attached to function AngularJSMunichApp.annotations = [ new Component({ selector: 'angular-js-munich-app' }), new View({ url: 'angular-js-munich.html' }) ]; customize the components
- 20. Controllers class AngularJSMunichApp { todos: [string]; constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; } addTodo(title: string) { this.todos.push(title); } } Holds the components JS logic
- 21. Controllers in ES5 function AngularJSMunichApp() { this.todos = ['this', 'usergroup', 'is', 'awesome']; } AngularJSMunichApp.prototype.addTodo = function(title) { this.todos.push(title); }; Holds the components code
- 22. @Component({ selector: 'angular-js-munich-app', }) @View({ url: 'angular-js-munich.html' }) class AngularJSMunichApp { todos: [string]; constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; } } <angular-js-munich-app></angular-js-munich-app> Components
- 23. Template Syntax Consists of 3 main features #localVar - Local Variables [innerText] - Property Binding (click) - Event Handler
- 24. Template Syntax Consists of 3 main features <!-- # creates a local variable inside the template --> <input #textbox> <!-- (event) registers an event handler --> <button (click)="addTodo(textbox.value)"> Add </button> <!-- [property] binds a value to a property of a DOM element or component --> <div [innertext]="textbox.value"></div>
- 25. Template Syntax Nofity about errors immediately <!-- # creates a local variable inside the template --> <input #textbox> <!-- (event) registers an event handler --> <button (clikc)="addtodo(textbox.value)"> Add </button> <!-- [property] binds a value to a property of a DOM element or component --> <div [innertext]="textBox.value"></div>
- 26. Template Syntax Nofity about errors immediately
- 27. Features
- 29. Features... ● HTTP ○ retry ○ danymic Error handling ○ short polling, etc. ● WebSockets ● Broswer Storage ○ IndexedDB ○ LocalStorage ○ Session Storage ● Service Workers ● Angular 2 Data handling ● Observables ● Change Detection ○ Immutable, Mutable & Observable ● Promises vs. Observables ● Forms ● Formatters
- 30. There is no migration path to 2.0
- 32. There is no migration path to 2.0 are some
- 33. Migration path
- 34. Apply Angular 2 concepts in Angular 1
- 35. Step 1 - Alignment 1. x 1. x myApp A CB ED myApp
- 36. Step 1 - Alignment 1. x 1. x myApp A CB ED myApp Component Router ng2-now
- 37. Step 2 - Migration 1. x 2. 0 myAppmyApp A CB ED A CB ED
- 38. ES6 Migrating your code to ES6 is easier than you think.
- 39. ES5 Angular 1 Service
- 40. It’s better with ES6!
- 43. 1. Do 5 min quickstart at angular.io 2. Try sample code at learnangular2.com 3. Ask questions at gitter. im/angular/angular
- 44. BTW: Services, Factories, … ? • They are all gone! • Replaced by (ES6) Classes • simpler definition • DI still available
- 45. Upgrade to the latest stable Version
- 46. Future of Angular 1.x
- 48. Thank you! Further Questions? Tweet me: @jowe
- 49. Links Performance ● Gleb’s Angular 1.x performance guide bit.ly/ng- gleb ● Is Angular Fast Enough? whlp.ly/ng-fast- enough ● React + Angular = Speed bit.ly/ng-react-speed Learning ● A1 Link Collection https://goo.gl/86V7k ● A2 Link Collection bit.ly/ng2-links ● Angular 2 mental model bit.ly/ng2-mental- model ● Igor’s ng-conf keynote bit.ly/ngconf-igor ● Misko’s ng-conf keynote bit.ly/ngconf-misko ● Simple examples learnangular2.com ● Core concept behind A2 http://goo.gl/GTfKii ● Exploring ES6 Classes in A1 http://goo. gl/znSSs1 Ability to Reason ● Component-Driven Angular https://goo. gl/EoCcfL Talks ● ng-conf 2015 Talks https://goo.gl/nx8YR3 ● ng-vegas 2015 Talks https://goo.gl/RR6rCU Rendering ● Isomorphic Angular whlp.ly/isomorphic- angular ● NG2 Rendering Architecture https://goo. gl/mcFjSe ● NG2 Server Rendering whlp.ly/ng2-server- rendering ● NG2 Native Script https://goo.gl/BVADyc Migration ● Angular 1.3 meets 2.0 bit.ly/ngconf-migration ● NG2 Now bit.ly/ng2-now Angular 2 Change Detection ● Change Detection in A2 http://goo.gl/j3H8bV ● Change Deteciton Draft https://goo.gl/80tmGF ● Untra Fast CD https://goo.gl/ndfulh ● CD reinvented https://goo.gl/ffomFS Typescript ● Difference between Annotations and Decorators http://goo.gl/KJE4cx ● Learn TypeScript http://goo.gl/HSBT1Q