El viaje de Angular1 a Angular2
-
Upload
antonio-de-la-torre-fernandez -
Category
Technology
-
view
82 -
download
0
Transcript of El viaje de Angular1 a Angular2
![Page 1: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/1.jpg)
El viaje de Angular1 a Angular2
Antonio de la Torre
#DevFestAsturias 03/11/2016
@adelatorrefoss
![Page 2: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/2.jpg)
Angular
“AngularJS is a structural 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
![Page 3: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/3.jpg)
Oyendo hablar de Angular2 desde el verano pasado (2015)y que Angular 1 está muerto.
![Page 4: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/4.jpg)
Antonio de la TorreSoftware Developer
![Page 5: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/5.jpg)
Me mudé en Julio tras 12 años en Madrid
![Page 6: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/6.jpg)
#Movembermobro.co/tonodelatorre
![Page 7: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/7.jpg)
¿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)
![Page 8: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/8.jpg)
Mundo viejuno
aka Angular < 1.5
![Page 9: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/9.jpg)
![Page 10: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/10.jpg)
![Page 11: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/11.jpg)
![Page 12: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/12.jpg)
Ejemplo de código: https://angularjs.org/#create-components
![Page 13: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/13.jpg)
fromangular.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>'
}
});
![Page 14: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/14.jpg)
toangular.module('directives')
.directive('pony', function(){
return {
bindToController: {
name: '='
},
controllerAs: 'vm',
scope: true,
controller: function(){},
template: '<p>{{vm.name}}</p>'
}
});
![Page 15: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/15.jpg)
Componentes
![Page 16: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/16.jpg)
React es lo que está de moda
![Page 17: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/17.jpg)
Los COMPONENTES están de moda
![Page 18: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/18.jpg)
![Page 19: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/19.jpg)
ReduxFlux
![Page 20: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/20.jpg)
https://facebook.github.io/flux/docs/overview.html#structure-and-data-flowFlux
![Page 21: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/21.jpg)
https://egghead.io/series/getting-started-with-reduxRedux
![Page 22: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/22.jpg)
Three Principles of ReduxSingle 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
![Page 23: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/23.jpg)
https://css-tricks.com/learning-react-redux/
![Page 24: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/24.jpg)
https://css-tricks.com/learning-react-redux/
![Page 25: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/25.jpg)
Javascript Fatigue
![Page 26: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/26.jpg)
“The Javascript pendulum has swung from restrictive, monolithic frameworks to
modular, boilerplate-hindered libraries.”
Eric Clemmons
https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.nzcp66xkh
![Page 27: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/27.jpg)
Javascript Fatigue Fatigue
![Page 28: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/28.jpg)
Don’t try to know 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.
Axel Rauschmayerhttp://www.2ality.com/2016/02/js-fatigue-fatigue.html
![Page 29: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/29.jpg)
Guías de estilovienen en nuestra ayuda
![Page 30: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/30.jpg)
Guías de estilo de 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
![Page 31: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/31.jpg)
![Page 32: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/32.jpg)
Y Angular crea
.component()
![Page 33: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/33.jpg)
Aparece Angular 1.5 (febrero 2016)
última release 1.x => 2.0
![Page 34: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/34.jpg)
Angular 1 Changelog1.3.0 superluminal-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
![Page 35: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/35.jpg)
Angular 2 Changelog2.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)
![Page 36: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/36.jpg)
La arquitectura de componentes en Angular 1.5
![Page 37: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/37.jpg)
La arquitectura de componentes
● 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
![Page 38: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/38.jpg)
ES6
Clases
Módulos
Arrow function
Array (y nuevos tipos)
...
![Page 39: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/39.jpg)
Migrating from 1.4 to 1.5https://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.
![Page 40: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/40.jpg)
Ejemplo de código: https://docs.angularjs.org/guide/component
![Page 41: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/41.jpg)
Guía de estilo Angular 1.5 de Todd MottoScope
- Stateful components
- Stateless components
Directives
- Directives should be used solely for decorating the DOM.
Eventos
- Comunicación con el padre por eventos. $event
![Page 42: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/42.jpg)
Pasar datos de componentes 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
$ctrl.updateUser($event); call we delegate down into the child component. The $event
argument is a real thing in Angular, you can use it with ng-submit and so on. If you
remember this function:
![Page 43: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/43.jpg)
![Page 44: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/44.jpg)
El lío del router
● ngRoute para v1.4● ngComponentRouter para v1.5● RouterModule para v2● ui-router (estándar de facto en todas)
![Page 45: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/45.jpg)
Angular 2
![Page 46: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/46.jpg)
Ventajas● Componentes● Independiente de la plataforma● Web workers● Server side rendering● Typescript ● Rx
http://slides.com/gruizdevilla/angular-2-workshop#/https://www.youtube.com/watch?v=7vSPfmHWIjA
![Page 47: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/47.jpg)
tipos
anotaciones
![Page 48: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/48.jpg)
RxJS
eventos
Event SourcingMartin Fowler (2005)
![Page 49: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/49.jpg)
Ventajas● ES6 (Módulos y clases)● No ng-class, no ng-click, all are DOM native
attributes.
An Angular 2 Force Awakens - John PapaNg Conf 2016 4 May
![Page 50: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/50.jpg)
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
![Page 51: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/51.jpg)
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'
};
}
![Page 52: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/52.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;
}
}
![Page 53: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/53.jpg)
![Page 54: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/54.jpg)
Guías de estilo (otra vez)
![Page 55: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/55.jpg)
Angular 2 Style Guide 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.”
![Page 56: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/56.jpg)
Angular 2 migration guide by Todd Motto
“Convert your Angular 1 knowledge into Angular 2.
Select a topic and start learning!”
http://ngmigrate.telerik.com/
![Page 57: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/57.jpg)
Formación!
![Page 58: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/58.jpg)
CursosEgghead
https://egghead.io/technologies/angular2
John Papa
https://www.pluralsight.com/blog/software-development/john-papa-angular2
John's newest Pluralsight course: Angular 2: First Look
![Page 59: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/59.jpg)
Conferenciashttps://github.com/mikedice/ngconf2016-slides/blob/master/ngconf-slides.md
Publicado el 4 may. 2016
http://angularconnect.com/2016/sessions/
Publicado el 27 sept. 2016
![Page 60: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/60.jpg)
Combo!
![Page 61: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/61.jpg)
Angular + ReduxManaging state 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
![Page 62: El viaje de Angular1 a Angular2](https://reader034.fdocumento.com/reader034/viewer/2022042611/5870276a1a28ab81258b4ae5/html5/thumbnails/62.jpg)
¿Qué tal el viaje?
¿Tiene sentido?
gracias
@adelatorrefoss