javascript - Att tänka i Angular 2 när man kommer från en Angular 1-bakgrund

Låt oss säga att jag har blivit bekväm med att utveckla klient-sidiga SPA:er med Angular 1 men nu vill jag göra övergången till Angular 2.

Vilka skulle vara några av de viktiga paradigmerna att ta i beaktande när man gör förändringen?

Här är några frågor som kan hjälpa dig att formulera dina svar:

  • Vad är den största skillnaden i den arkitektoniska designen mellan Angular 2 och 1?
  • Vad ska jag sluta/börja göra?

Svar #1

Den största skillnaden i arkitektonisk design är förmodligen den enriktningsdatatrafiken och fokuset på komponenter.

Börja använda controllerAs med Typescript-klasser som dina kontroller om du vill ha en enklare övergång. Börja lära dig grunderna i RxJS, Ng2 är byggt på det.

Svar #2

Huvudskillnaden i arkitektur är den enkelriktade dataflödet som nämnts ovan, jag skulle också vilja lägga till några punkter:

Komponentbaserad UI

Angular antar ett komponentbaserat användargränssnitt, ett koncept som kan vara bekant för React-utvecklare. På ett sätt flyter Angular 1.x-kontroller och direktiv ihop med den nya Angular 2-komponenten.

Detta betyder att det i Angular 2 inte finns några controllers och inga direktiv. Istället har en komponent en selektor som motsvarar HTML-taggen som komponenten kommer att representera och en @View för att specificera en HTML-mall som komponenten ska fylla i.

Följande exempel använder TypeScript, en övermängd av ES6 JavaScript-standarderna. Angular 2 utvecklas för närvarande i TypeScript, men kommer att vara kompatibel med både ES5- och ES6 JavaScript-standarderna.

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 {}

Användarinmatning med händelsesyntax

Angular-applikationer svarar nu på användarinmatning genom att använda eventsyntaxen. Eventsyntaxen betecknas av en åtgärd omsluten av parenteser (event).

Du kan också göra elementreferenser tillgängliga för andra delar av mallen som en lokal variabel med hjälp av #var-syntaxen.

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”>

Adjö $scope

Även om ‘$scope’ har ersatts av "controller as" som en bästa praxis sedan Angular 1.2, finns det fortfarande kvar i många handledningar. Angular 2 gör slutligen slut på det, eftersom egenskaper är bundna till komponenter.

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”;
    }
}

Bättre prestanda

Med ultrasnabb förändringsdetektion och oföränderliga datastrukturer lovar Angular 2 att vara både snabbare och mer minneseffektiv. Dessutom hjälper införandet av en envägs datatillflöde, som populariserats av Flux, till att lindra vissa bekymmer vid felsökning av prestandaproblem med en Angular-app.

Detta innebär också att det inte blir någon mer tvåvägsdatabindning, vilket var en populär funktion i Angular 1.x. Oroa dig inte, även om ng-model inte längre finns, kan samma koncept lösas på ett liknande sätt med Angular 2.

Relaterade artiklar