Download to read offline
![some code...
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name"
placeholder="name">
</div>
`})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}](https://image.slidesharecdn.com/gdgasturiasdevfestelviajedeangular1aangular2-161104115120/75/El-viaje-de-Angular1-a-Angular2-51-2048.jpg)
![some code...
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },...];
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span>
{{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name"
placeholder="name"/>
</div>
</div>
`,
styles: [`...`]
})
export class AppComponent {
title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}](https://image.slidesharecdn.com/gdgasturiasdevfestelviajedeangular1aangular2-161104115120/75/El-viaje-de-Angular1-a-Angular2-52-2048.jpg)
Uploaded byAntonio de la Torre Fernández
El viaje de Angular1 a Angular2
The document discusses the transition from AngularJS (Angular 1) to Angular 2, highlighting the differences in architecture, features, and the evolution towards component-based development. It emphasizes the benefits of Angular 2, such as improved architecture, TypeScript support, and the importance of style guides for maintaining code quality. Additionally, it touches upon JavaScript fatigue and the broader context of modern web development trends, along with migration resources and community support.
More Related Content
Similar to El viaje de Angular1 a Angular2
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
El viaje de Angular1 a Angular2
- 1. El viaje deAngular1 a Angular2 Antonio de la Torre #DevFestAsturias 03/11/2016 @adelatorrefoss
- 2. Angular “AngularJS is astructural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. Angular teaches the browser new syntax through a construct we call directives.“ https://docs.angularjs.org/guide/introduction
- 3. Oyendo hablar de Angular2desde el verano pasado (2015) y que Angular 1 está muerto.
- 4. Antonio de laTorre Software Developer
- 5. Me mudé enJulio tras 12 años en Madrid
- 6.
- 7. ¿Qué aporta Angular? ● Completo. ●Te ahorra la fontanería. ● Bien documentado. ● Mucha comunidad. ● Patrón reconocido MVC. ● ES6. ● Opinionado (pero si no te gusta tengo otra)
- 8.
- 12.
- 13. from angular.module('directives') .directive('pony', function(){ return { scope:{ name: '=' }, controllerAs: 'vm', controller: function($scope){ var vm = this; vm.name = $scope.name; // we have to add a watcher on $scope.name to make this work $scope.$watch('name', function(newName){ vm.name = newName; }); }, template: '<p>{{vm.name}}</p>' } });
- 14. to angular.module('directives') .directive('pony', function(){ return { bindToController:{ name: '=' }, controllerAs: 'vm', scope: true, controller: function(){}, template: '<p>{{vm.name}}</p>' } });
- 15.
- 16. React es loque está de moda
- 17. Los COMPONENTES estánde moda
- 19.
- 20.
- 21.
- 22. Three Principles ofRedux Single source of truth The state of your whole application is stored in an object tree within a single store. State is read-only The only way to change the state is to emit an action, an object describing what happened. Changes are made with pure functions To specify how the state tree is transformed by actions, you write pure reducers.http://redux.js.org/docs/introduction/ThreePrinciples.html
- 23.
- 24.
- 25.
- 26. “The Javascript pendulumhas swung from restrictive, monolithic frameworks to modular, boilerplate-hindered libraries.” EricClemmons https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.nzcp66xkh
- 27.
- 28. Don’t try toknow everything – it’s impossible in modern web development. I find it important to remain human. Don’t overdo discipline, don’t become a life improvement machine. Periods of boredom and doing nothing are important for recuperating and inspiration. AxelRauschmayer http://www.2ality.com/2016/02/js-fatigue-fatigue.html
- 29. Guías de estilo vienenen nuestra ayuda
- 30. Guías de estilode John Papa y Todd Motto para Angular 1.4 mejoró la situación https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md https://github.com/toddmotto/angular-styleguide
- 32.
- 33. Aparece Angular 1.5(febrero 2016) última release 1.x => 2.0
- 34. Angular 1 Changelog 1.3.0superluminal-nudge (2014-10-13) 1.4.0 jaracimrman-existence (2015-05-26) 1.3.20 shallow-translucence (2015-09-29) 1.5.0 ennoblement-facilitation (2016-02-05) 1.2.30 patronal-resurrection (2016-07-21) only version branch that supports IE8 1.5.8 arbitrary-fallbacks (2016-07-22) 1.4.13 croaking-elderweed (2016-10-10) 1.6.0-rc.0 bracing-vortex (2016-10-26)https://github.com/angular/angular.js/blob/master/CHANGELOG.md
- 35. Angular 2 Changelog 2.0.0-alpha.27(2015-06-17) 2.0.0-alpha.55 (2015-12-15) 2.0.0-beta.17 (2016-04-28) 2.0.0-rc.0 (2016-05-02) 2.0.0-rc.7 (2016-09-13) 2.0.0 proprioception-reinforcement (2016-09-14) https://github.com/angular/angular/blob/master/CHANGELOG.md 2.1.0 incremental-metamorphosis (2016-10-12) 2.2.0-beta.1 (2016-10-27) 2.1.2 (2016-10-27)
- 36. La arquitectura de componentesen Angular 1.5
- 37. La arquitectura decomponentes ● Solo controlan su propia vista y datos ● Tienen una API bien definida ● Una aplicación es un árbol de componentes ● Eliminó la magia negra de las directivas ● No hace falta conocer el ciclo de compilación a fondo ● No es necesario acceder al $scope
- 38. ES6 Clases Módulos Arrow function Array (ynuevos tipos) ...
- 39. Migrating from 1.4to 1.5 https://docs.angularjs.org/guide/migration Angular 1.5 takes a big step towards preparing developers for a smoother transition to Angular 2 in the future. Architecting your applications using components, multi-slot transclusion, one-way bindings in isolate scopes, using lifecycle hooks in directive controllers and relying on native ES6 features (such as classes and arrow functions) are now all possible with Angular 1.5.
- 40.
- 41. Guía de estiloAngular 1.5 de Todd Motto Scope - Stateful components - Stateless components Directives - Directives should be used solely for decorating the DOM. Eventos - Comunicación con el padre por eventos. $event
- 42. Pasar datos decomponentes hacia arriba: About events https://toddmotto.com/angular-1-5-lifecycle-hooks Okay, bear with me, we’re in the final phase. This is where things get… interesting. Instead of just passig back this.user into the function, we’re going to fake an $event Object, which complies with how Angular 2 does this (using EventEmitter), and also provides global consistency between your templates to fetch data back through the
- 44. El lío delrouter ● ngRoute para v1.4 ● ngComponentRouter para v1.5 ● RouterModule para v2 ● ui-router (estándar de facto en todas)
- 45.
- 46. Ventajas ● Componentes ● Independientede la plataforma ● Web workers ● Server side rendering ● Typescript ● Rx http://slides.com/gruizdevilla/angular-2-workshop#/ https://www.youtube.com/watch?v=7vSPfmHWIjA
- 47.
- 48.
- 49. Ventajas ● ES6 (Módulosy clases) ● No ng-class, no ng-click, all are DOM native attributes. An Angular 2 Force Awakens - John Papa Ng Conf 2016 4 May
- 50. some code... <html> <head> <title>Angular 2</title></head> <!-- ... --> <body> <my-app>Loading...</my-app> </body> </html> https://angular.io/docs/ts/latest/tutorial/toh-pt1.html
- 51. some code... import {Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="hero.name" placeholder="name"> </div> `}) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: 1, name: 'Windstorm' }; }
- 52. some code... import {Component } from '@angular/core'; export class Hero { id: number; name: string; } const HEROES: Hero[] = [ { id: 11, name: 'Mr. Nice' },...]; @Component({ selector: 'my-app', template: ` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul> <div *ngIf="selectedHero"> <h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div> </div> `, styles: [`...`] }) export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero: Hero; onSelect(hero: Hero): void { this.selectedHero = hero; } }
- 54. Guías de estilo(otra vez)
- 55. Angular 2 StyleGuide by John Papa The Angular 2 Style Guide https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md “The Angular 2 Style Guide has been moved to the Official Angular 2 docs.”
- 56. Angular 2 migrationguide by Todd Motto “Convert your Angular 1 knowledge into Angular 2. Select a topic and start learning!” http://ngmigrate.telerik.com/
- 57.
- 58. Cursos Egghead https://egghead.io/technologies/angular2 John Papa https://www.pluralsight.com/blog/software-development/john-papa-angular2 John's newestPluralsight course: Angular 2: First Look
- 59. Conferencias https://github.com/mikedice/ngconf2016-slides/blob/master/ngconf-slides.md Publicado el 4may. 2016 http://angularconnect.com/2016/sessions/ Publicado el 27 sept. 2016
- 60.
- 61. Angular + Redux Managingstate with Redux and Angular 1 http://blog.rangle.io/managing-state-redux-angular/ Angular 1.x Redux: Introduction https://egghead.io/courses/getting-started-with-redux Build Redux Style Applications with Angular2, RxJS, and ngrx/store https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs
- 62. ¿Qué tal elviaje? ¿Tiene sentido? gracias @adelatorrefoss