« Back
in angular javascript angularjs read.
Encuentra las 7 diferencias: Angular 1 vs Angular 2

Encuentra las 7 diferencias: Angular 1 vs Angular 2.

Como ya anticipé en un post anterior...

Angular 2 no se parece en nada a Angular 1

Aunque para expresarlo mejor, dejaré que hable mi querido Yoda...

yoda

Esta es la razón principal por la que en este post vamos a jugar a encuentra las 7 diferencias entre Angular 1 vs Angular 2.

1. Controladores a Componentes

Angular 1

<body ng-controller="StoryController as vm">  
  <h3>{{vm.story.name}}</h3>
  <h3 ng-bind="vm.story.name"></h3>
</body>  
<script type="text/javascript">  
(function (){
  angular
    .module('app')
    .controller('StoryController', StoryController);

  function StoryController() {
    var vm = this;
    vm.story = { id: 100, name: 'The Force Awakens' };
  }
})();
</script>  

Angular 2

import { Component } from 'angular2/core';

@Component({
  selector: 'my-story',
  template: '<h3>{{story.name}}</h3>'
})
export class StoryComponent {  
  public story = { id: 100, name: 'The Force Awakens' };
}

2. Bootstrapping Angular

Angular 1

<html ng-app="app">  

Angular 2

import { bootstrap } from 'angular2/platform/browser';  
import { AppComponent } from './app.component';

bootstrap(AppComponent);  

3. Directivas estructurales

Angular 1

<ul>  
  <li ng-repeat="v in vm.vehicles">
    {{v.name}}
  </li>
</ul>  
<div ng-if="vm.vehicles.length">  
  <h3>Tienes {{vm.vehicles.length}} vehículos</h3>
</div>  

Angular 2

<ul>  
  <li *ngFor="#v of vehicles">
    {{v.name}}
  </li>
</ul>  
<div *ngIf="vehicles.length">  
  <h3>Tienes {{vehicles.length}} vehículos</h3>
</div>  

4. Data Binding

Angular 1

<!-- interpolation -->  
<h3>{{vm.story.name}}</h3>

<!-- one way binding -->  
<h3 ng-bind="vm.story.name"></h3>

<!-- two way binding -->  
<input ng-model="vm.story.name">

<!-- event binding -->  
<button  
  ng-click="vm.log('click')"
  ng-blur="vm.log('blur')">OK</button>

Angular 2

<!-- interpolation -->  
<h3>{{story.name}}</h3>

<!-- one way binding -->  
<h3 [innerText]="story.name"></h3>

<!-- two way binding -->  
<input [(ngModel)]="story.name">

<!-- event binding -->  
<button  
  (click)="log('click')"
  (blur)="log('blur')">OK</button>

5. Eliminando directivas...

En Angular 2, se han suprimido muchas de las directivas estructurales integradas en el framework en favor de asociarse directamente a propiedades y eventos estándar del HTML.

De hecho, en Angular 2 se han eliminado +40 directivas estructurales procedentes de Angular 1

Angular 1

<div ng-style="vm.story ? {visibility: 'visible'} : {visibility: 'hidden'}">  
  <img ng-src="{{vm.imagePath}}">
  <br />
  <a ng-href="{{vm.link}}">
    {{vm.story}}
  </a>
</div>  

Angular 2

<div [style.visibility]="story ? 'visible' : 'hidden'">  
  <img [src]="imagePath">
  <br />
  <a [href]="link">{{story}}</a>
</div>  

6. Servicios

En Angular 1, había muchas maneras de crear servicios:
1. Factorías
2. Servicios
3. Proveedores
4. Constantes
5. Valores
En Angular 2, sólo hay una: definir una clase Injectable!

Angular 1

angular  
  .module('app')
  .service('VehicleService', VehicleService);

function VehicleService() {  
  this.getVehicles = function () {
    return [
      { id: 1, name: 'X-Wing Fighter' },
      { id: 2, name: 'Tie Fighter' },
      { id: 3, name: 'Y-Wing Fighter' }
    ];
  };
}

Angular 2

import { Injectable } from 'angular2/core';

@Injectable()
export class VehicleService {  
  public getVehicles = () => [
    { id: 1, name: 'X-Wing Fighter' },
    { id: 2, name: 'Tie Fighter' },
    { id: 3, name: 'Y-Wing Fighter' }
  ];
}

7. Inyección de dependencias

Angular 1

angular  
  .module('app')
  .controller('VehiclesController', VehiclesController);

VehiclesController.$inject = ['VehicleService'];

function VehiclesController(VehicleService) {  
  var vm = this;
  vm.title = 'Services';
  vm.vehicles = VehicleService.getVehicles();
}

Angular 2

import { VehicleService } from './vehicle.service';

@Component({
  selector: 'my-vehicles',
  templateUrl: 'app/vehicles.component.html',
  providers: [VehicleService]
})
export class VehiclesComponent {  
  constructor(private _vehicleService: VehicleService) {}
  public vehicles = this._vehicleService.getVehicles();
}

Conclusión

Espero que con este post le hayas perdido un poco el miedo a Angular 2 y que te haya resultado instructivo o, por lo menos, entretenido de leer ;)

comments powered by Disqus