Myślenie Kątowymi 2, jadąc z kątowym 1 tle

Question

Powiedzmy stałem się komfortowo z rozwijającego stronie klienta Spa z kątową 1, ale teraz chcę dokonać zmiany kątowym 2.

kto byłby niektóre ważne paradygmaty, które należy uwzględnić przy dokonywaniu zmiany?

Oto kilka pytań, które mogą pomóc oprawić swoje odpowiedzi:

• Jaka jest główna różnica w projektowaniu architektonicznym Kątowymi 2 w porównaniu do 1?
• Co powinienem zatrzymać/zacząć robić?

Answer 1

Główna różnica w projektowaniu architektonicznym to prawdopodobnie jednokierunkowy przepływ danych i koncentracja na komponentach.

Zacznij używać controllerAs z klasami maszynopisu jako kontrolerami, jeśli chcesz łatwiejsze przejście. Rozpocznij naukę podstaw RxJS, Ng2 jest na nim zbudowany.

Answer 2

Główna różnica w architekturze jest jednokierunkowy przepływ danych, jak wspomniano powyżej Chciałbym również dodać kilka punktów:

oparte na komponentach UI

kątowa jest przyjęcie UI komponentów opartych na koncepcji to może być znane programistom React. W pewnym sensie kontrolery i dyrektywy Angular 1.x zacierają się w nowym składniku Angular 2.

Oznacza to, że w Angular 2 nie ma sterowników ani dyrektyw. Zamiast tego składnik ma selektor odpowiadający znacznikowi html, który będzie reprezentował komponent, oraz @View, aby określić szablon HTML komponentu do wypełnienia.

W poniższych przykładach wykorzystano TypeScript - nadzbiór standardów javascript ES6. Angular 2 jest obecnie rozwijany w TypeScript, ale będzie kompatybilny ze standardami javascript zarówno ES5, jak i ES6.

kątowa 1.x:

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

kątowe 2.0:

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

wejściowe użytkownika ze zdarzeniem Składnia

kątowe aplikacji teraz reagować na działania użytkownika za pomocą składni zdarzeń . Składnia zdarzenia jest oznaczona przez akcję otoczoną nawiasem (zdarzenie).

Można również udostępnić odniesienia do elementów innym częściom szablonu jako zmiennej lokalnej, używając składni #var.

kątowe 1.x:

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

kątowa 2.0:

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

Żegnaj $ zakres

Nawet „$ zakres” został zastąpiony przez „kontrolera jako” jako najlepszą praktyką od Kątowymi 1,2, to nadal utrzymuje się w wielu tutoriali. Angular 2 ostatecznie ją zabija, ponieważ właściwości są powiązane z komponentami.

kątowa 1.x:

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

kątowe 2.0:

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

Lepsza wydajność

z ultra szybkim wykrywaniu zmian i niezmiennych struktur danych, kątowe 2 zapowiada się zarówno szybsza i bardziej wydajna pamięć. Wprowadzenie jednokierunkowego przepływu danych, spopularyzowanego przez Flux, pomaga złagodzić niektóre obawy dotyczące debugowania problemów z wydajnością w aplikacji Angular.

Oznacza to również brak dwukierunkowego powiązania danych, który był popularną funkcją w Angular 1.x. Nie martw się, mimo że model ng już nie istnieje, tę samą koncepcję można rozwiązać w podobny sposób, jak w przypadku Angular 2.