Búsqueda de sitios web

javascript - Pensando en Angular 2 viniendo de un fondo de Angular 1

Digamos que me he vuelto cómodo desarrollando SPA del lado del cliente con Angular 1, pero ahora quiero hacer el cambio a Angular 2.

¿Cuáles serían algunos de los paradigmas importantes a tener en cuenta al hacer el cambio?

Aquí hay algunas preguntas que pueden ayudar a enmarcar tus respuestas:

  • ¿Cuál es la principal diferencia en el diseño arquitectónico de Angular 2 comparado con el 1?
  • ¿Qué debería dejar de hacer/empezar a hacer?

Respuesta #1

La principal diferencia en el diseño arquitectónico probablemente sea el flujo de datos unidireccional y el enfoque en los componentes.

Comienza a usar controllerAs con clases de Typescript como tus controladores si quieres una transición más fácil. Empieza a aprender los conceptos básicos de RxJS, Ng2 está construido sobre él.

Respuesta #2

La principal diferencia en la arquitectura es el flujo de datos unidireccional, como se dijo arriba. También me gustaría agregar algunos puntos:

Interfaz de usuario basada en componentes

Angular está adoptando una interfaz de usuario basada en componentes, un concepto que podría resultar familiar para los desarrolladores de React. En cierto sentido, los controladores y directivas de Angular 1.x se fusionan en el nuevo Componente de Angular 2.

Esto significa que en Angular 2 no hay controladores ni directivas. En su lugar, un componente tiene un selector que corresponde a la etiqueta HTML que el componente representará y una @View para especificar una plantilla HTML que el componente llenará.

Los siguientes ejemplos utilizan TypeScript, un superconjunto de los estándares de JavaScript ES6. Angular 2 se está desarrollando actualmente en TypeScript, pero será compatible con los estándares de JavaScript ES5 y ES6.

Angular 1.x:

angular.module(‘example’)
.controller(‘ExampleCtrl’, function() {
});

Angular 2.0:

import {Component} from 'angular2/core';
@Component({
  selector: 'example',
  templateUrl: './components/example/example.html'
})   
export class App {}

Entrada del Usuario con la Sintaxis de Eventos

Las aplicaciones de Angular ahora responden a la entrada del usuario utilizando la sintaxis de eventos. La sintaxis de eventos se denota por una acción rodeada de paréntesis (evento).

También puedes hacer que las referencias a elementos estén disponibles para otras partes de la plantilla como una variable local usando la sintaxis #var.

Angular 1.x:

<input ng-model=”thing.item” type=”text”>
<button ng-click=”thing.submit(item)” type=”submit”>

Angular 2.0:

<input #item type=”text”>
<button (click)=”submit(item)” type=”submit”>

Adiós $scope

Aunque ‘$scope’ ha sido reemplazado por “controller as” como una mejor práctica desde Angular 1.2, todavía persiste en muchos tutoriales. Angular 2 finalmente lo elimina, ya que las propiedades están vinculadas a los componentes.

Angular 1.x:

angular.module(‘example’)
.controller(‘ExampleCtrl’, function($scope) {
        $scope.name = “John Smith”;
});

Angular 2.0:

@Component({
selector: 'example',
templateUrl: './components/example/example.html'
})
export class App{
    constructor() {
    this.name = “John Smith”;
    }
}

Mejor Rendimiento

Con detección de cambios ultra rápida y estructuras de datos inmutables, Angular 2 promete ser tanto más rápido como más eficiente en el uso de memoria. Además, la introducción del flujo de datos unidireccional, popularizado por Flux, ayuda a aliviar algunas de las preocupaciones al depurar problemas de rendimiento en una aplicación Angular.

Esto también significa que ya no habrá enlace de datos bidireccional, que era una característica popular en Angular 1.x. No te preocupes, aunque ng-model ya no exista, el mismo concepto se puede resolver de manera similar con Angular 2.

Artículos relacionados