Kilka miesięcy temu zdecydowałem się studiować Angular. Kiedy robiłem pewne postępy i tworzyłem aplikację za jej pomocą, zdaję sobie sprawę, że Angular 2 jest w podglądzie programisty, więc to kwestia czasu, zanim zostanie wydany. Ponieważ Angular 2 nie będzie kompatybilny z Angular 1 i jest wiele zmian, pytanie brzmi, czy lepiej jest kontynuować rozwój z Angular 1.x, czy też zacząć tworzyć Angular 2?

Faktem jest, że nie zawsze musimy korzystać z najnowszej wersji ani najnowszego języka na rynku, ale w tym przypadku aplikacja jest wciąż mała, więc mogłem bez problemu zmienić.

Pozwólcie, że przedmówię, mówiąc: Zakładam, że ty i wszyscy, którzy będą to czytać, już wygodnie znają Angular 1 ( teraz określane jako AngularJS , w przeciwieństwie do po prostu Angular dla nowszych wersji). Biorąc to pod uwagę, przejdźmy do niektórych dodatków i kluczowych różnic w Angular 2+.

1. Dodali kanciasty cli.

Możesz rozpocząć nowy projekt, uruchamiając ng new [app name]. Możesz obsłużyć swój projekt, uruchamiając ng serve dowiedz się więcej tutaj: https://github.com/angular/angular-cli

2. Twój kątowy kod jest napisany w ES6 Typescript i kompiluje się w czasie wykonywania do Javascript w przeglądarce.

Aby w pełni to zrozumieć, polecam przejrzenie listy zasobów, którą mam na dole mojej odpowiedzi.

3. Struktura projektu

W podstawowej strukturze będziesz mieć app/tsfolder, w którym będziesz wykonywać większość swojej pracy, a app/jsznajdziesz w app/jsfolderach pliki z rozszerzeniem.js.map rozszerzeniem. „Mapują” Twoje pliki „.ts” do przeglądarki w celu debugowania, ponieważ przeglądarka nie może odczytać natywnego skryptu.

Aktualizacja : jest poza wersją beta. Struktura projektu nieco się zmieniła, w większości przypadków i jeśli używasz kątowego CLI, będziesz pracować w src/app/folderze. W projekcie początkowym będziesz mieć następujące elementy.

app.component.css 
app.component.html
app.component.spec.ts
app.component.ts 
app.module.ts
index.ts

app.component.css : plik CSS, którego należy użyć specyficznego dlacomponent.html

app.component.html : widok (zmienna zadeklarowana w app.component.js)

app.component.spec.ts : używany do testowaniaapp.component.ts

app.component.ts : Twój kod, który jest zapp.component.html

app.module.ts : To jest to, co uruchamia twoją aplikację i gdzie definiujesz wszystkie wtyczki, komponenty, usługi itp. Jest to odpowiednikapp.js w Angular 1

index.ts służy do definiowania lub eksportowania plików projektu

Dodatkowe informacje:
wskazówka dla profesjonalistów: można biegaćng generate [option] [name] aby wygenerować nowe usługi, komponenty, rury itp.

Również tsconfig.json plik jest ważny, ponieważ określa zasady kompilacji TS dla swojego projektu.

Jeśli myślisz, że muszę nauczyć się zupełnie nowego języka? ... Uh ... trochę, TypeScript jest nadzbiorem JavaScript. Nie daj się zastraszyć; jest tam, aby ułatwić Ci rozwój. Czułem się, jakbym dobrze go złapał już po kilku godzinach grania z nim i po 3 dniach wszystko się skończyło.

4. Wiążesz się z HTML w podobny sposób, jak byś to zrobił w dyrektywie Angular 1. Tak zmienne, jak $scopei $rootScopezostały wycofane.

Ten, o którym mogłeś być dorozumiany. Angular 2 nadal jest MV *, ale będziesz używać `` komponentów '' jako sposobu na powiązanie kodu z szablonami, na przykład weź następujące

    import { Component } from '@angular/core';

    @Component({
         selector:'my-app',
         template: '<h1> Hello World! </h1>'
    })

    export class AppComponent {}

Potraktuj tutaj importinstrukcję jako wstrzyknięcie zależności w kontrolerze v1. Używasz importdo importowania swoich pakietów, w których import {Component}mówi się, że utworzysz plik, componentktóry chcesz powiązać zHTML .

Zwróć uwagę na @Componentdekorator, który masz selectori template. Pomyśl tutaj o selectorswoim $scope, którego używasz tak jak używasz v1, directivesgdzie nazwa selectorjest tym, czego używasz do łączenia się z HTML w ten sposób

<my-app> </my-app>

Gdzie <my-app>jest nazwa niestandardowego tagu, którego użyjesz, który będzie pełnił rolę symbolu zastępczego dla tego, co zostało zadeklarowane w szablonie. ie) <h1> Hello World! </h1>. Podczas gdy w wersji 1 wyglądałoby to następująco:

HTML

<h1>{{hello}}</h1>

JS

$scope.hello = "Hello World!"

Możesz również dodać coś między tymi tagami, aby wygenerować komunikat o ładowaniu, na przykład:

<my-app> Loading... </my-app> 

Następnie wyświetli się „ Ładowanie ... ” jako wiadomość ładowania.

Zauważ, że to, co jest zadeklarowane w, templateto ścieżka lub surowy kod HTML, którego będziesz używać HTMLw swoim selectortagu.

Pełniejsza implementacja Angular 1 wyglądałaby bardziej tak:

HTML

<h1 ng-controller="myCtrl">{{hello}}</h1>

W wersji 1 wyglądałoby to mniej więcej tak

JS

angular.module('controller', [])



.controller('myCtrl', function( $scope) {
    $scope.hello = "Hello World!"
})

To jest to, co naprawdę lubię w v2. Zauważyłem, że dyrektywa była dla mnie stromą krzywą uczenia się w wersji 1, a nawet gdy je zorientowałem, często miałemCSS renderowałem nie tak, jak zamierzałem. Uważam, że jest to o wiele prostsze.

Wersja 2 zapewnia łatwiejszą skalowalność aplikacji, ponieważ możesz ją podzielić łatwiej niż w wersji 1. Podoba mi się to podejście, ponieważ możesz mieć wszystkie części robocze w jednym pliku, w przeciwieństwie do kilku w Angular v1.

A co z konwersją projektu z wersji 1 do wersji 2?

Z tego, co usłyszałem od zespołu programistów, jeśli chcesz zaktualizować swój projekt v1 do v2, po prostu przejdziesz i usuniesz przestarzałe obiekty blob i zastąpisz $scopes na selectors. Ten film jest pomocny. To z niektórymi członkami zespołu Ionic, którzy pracują ramię w ramię z zespołem Angular, ponieważ v2 bardziej skupia się na urządzeniach mobilnych https://youtu.be/OZg4M_nWuIk Mam nadzieję, że to pomoże.

AKTUALIZACJA: Zaktualizowałem, dodając przykłady, gdy pojawiły się oficjalne implementacje Angular 2.

AKTUALIZACJA 2: To wciąż wydaje się być popularnym pytaniem, więc pomyślałem, że gdy zacząłem pracować z angular 2, uznałem zasoby, które okazały się bardzo pomocne.

Pomocne zasoby:

Aby uzyskać więcej informacji na temat ES6, polecam zapoznanie się z samouczkami dotyczącymi nowych funkcji ECMAScript 6 / ES6 New Boston - lista odtwarzania YouTube

Aby pisać funkcje typu Typescript i zobaczyć, jak kompilują się one do JavaScript, zapoznaj się z Playground języka Typescript

Aby zobaczyć rozkład funkcji według podziału funkcji tego, czym jest równoważność Angular 1 w Angular 2, zobacz Angular.io - Cookbook -A1 A2 Skrócona instrukcja

Może ci pomóc zrozumieć porównanie Angular 1 i Angular 2.

Angular 2 okazał się mieć wiele zalet w stosunku do Angular 1:

• Jest całkowicie oparty na komponentach.
• Lepsze wykrywanie zmian
• Kompilacja Ahead of Time (AOT) poprawia szybkość renderowania.
• Język TypeScript jest używany głównie do tworzenia aplikacji Angular 2.
• Angular 2 ma lepszą wydajność niż Angular 1.
• Angular 2 ma mocniejszy system szablonów niż Angular 1.
• Angular 2 ma prostsze API, leniwe ładowanie, łatwiejsze debugowanie.
• Angular 2 jest znacznie bardziej testowalny niż Angular 1.
• Angular 2 udostępnia komponenty zagnieżdżone.
• Angular 2 umożliwia jednoczesne wykonanie więcej niż dwóch systemów.
• I tak dalej...

Angular 2 i Angular 1 to w zasadzie inna struktura o tej samej nazwie.

angular 2 jest bardziej gotowy na obecny stan standardów sieciowych i przyszły stan sieci (ES6 \ 7, immutiablity, components, shadow DOM, Service Workery, mobile kompatybilność, moduły, maszynopis i tak dalej ...)

angular 2 zabił wiele głównych funkcji w angular 1, takich jak - kontrolery, $ scope, dyrektywy (zastąpione adnotacjami @component), definicja modułu i wiele więcej, nawet proste rzeczy, takie jak ng-repeat, nie pozostały takie same jak dawniej.

w każdym razie zmiana jest dobra, kątowy 1.x miał wady, a kątowy 2 jest bardziej gotowy na przyszłe wymagania sieci.

podsumowując - nie polecam rozpoczynania projektu Angular 1.x teraz - to chyba najgorszy moment na zrobienie tego, ponieważ później będziesz musiał przejść na Angular 2, ja myślisz o Angular niż wybierasz Angular 2, Google uruchomił już projekt z Angular 2 i zanim skończysz projekt, Angular 2 powinien już być w centrum uwagi. jeśli chcesz czegoś stabilniejszego, możesz pomyśleć o reagowaniu \ elm oraz flux i reduxie jako frameworkach JS.

angular 2 będzie niesamowity, to bez wątpienia.

Żadne ramy nie są idealne. Możesz przeczytać o błędach w Angular 1 tutaj i tutaj . Ale to nie znaczy, że jest źle. Pytanie brzmi, jaki problem rozwiązujesz. Jeśli chcesz szybko wdrożyć prostą aplikację, która jest lekka, z ograniczonym użyciem wiązania danych, to skorzystaj z Angular 1. Angular 1 został zbudowany 6 lat temu w celu rozwiązania szybkiego prototypowania, które robi całkiem nieźle. Nawet jeśli Twój przypadek użycia jest złożony, nadal możesz używać Angular 1, ale powinieneś być świadomy niuansów i najlepszych praktyk związanych z budowaniem złożonej aplikacji internetowej. Jeśli tworzysz aplikację do celów edukacyjnych, sugerowałbym przejście do Angular 2, ponieważ tam jest przyszłość Angular.

Jedyną wyróżniającą cechą w Angular v2, a także w ReactJs jest to, że obaj przyjęli nową architekturę programowania Web-Components. Oznacza to, że możemy teraz tworzyć niezależne składniki sieciowe i podłączać je do dowolnej witryny na świecie, która ma ten sam stos technologiczny co ten składnik sieciowy. Chłodny! tak, bardzo fajnie. :)

Inną najbardziej znaczącą zmianą w Angular v2 jest to, że jego podstawowym językiem programowania jest po prostu TypeScript. Chociaż TypeScript należy do firmy Microsoft i jest nadzbiorem języka JavaScript z 2015 r. (Lub ECMAScript6 / ES6), ale ma kilka bardzo obiecujących funkcji. Poleciłbym czytelnikom przejrzenie nieco szczegółów TypeScript (co jest oczywiście zabawne) po przeczytaniu tego samouczka.

Tutaj powiedziałbym, że faceci próbujący powiązać Angular v1 i Angular v2 jeszcze bardziej dezorientują czytelników i moim skromnym zdaniem Angular v1 i Angular v2 należy traktować jako dwa różne frameworki. W Angular v2 mamy koncepcję Web-Components dotyczącą tworzenia aplikacji internetowych, podczas gdy w Angular v1 musimy bawić się kontrolerami i (niestety lub na szczęście) w Angular v2 nie ma kontrolerów.

Warto zauważyć, że angular2 używa maszynopisu.

Zrobiłem angular1 z cordovą w moim stażyście, a teraz robię angular 2. Myślę, że angular2 będzie trendem, ponieważ moim zdaniem jest bardziej ustrukturyzowany, ale wady jest to, że jest niewiele zasobów, do których można się odwołać, gdy masz problem lub trudności. angular 1.x ma mnóstwo spersonalizowanych dyrektyw, które mogą być bardzo łatwe w użyciu.

Mam nadzieję, że to pomoże.

Angular 2 jest znacznie lepszy niż 1, przynajmniej w tym, co oferuje: wsparcie dla komponentów internetowych, użycie maszynopisu, wydajność i ogólna prostota interfejsu były powodem, dla którego zdecydowałem się rozpocząć projekt przy użyciu angular 2. Jednak od samego początku , Zdałem sobie sprawę, że istnieją problemy w angular 2 (np. Routing z apache), dla których jest bardzo mało dokumentacji lub nie jest w ogóle dostępna, więc dokumentacja i społeczność angular 2 jest największą pułapką dla Angular 2, ponieważ nie jest wystarczająco rozwinięta.

Powiedziałbym, że jeśli chcesz szybko podnieść witrynę w krótkim terminie, użyj dobrze znanego kątowego 1, jeśli jesteś w dłuższym projekcie i możesz pozwolić sobie na czas na zbadanie nowych problemów (które możesz napotkać jako pierwszy , co może być bonusem, jeśli myślisz o wkładzie, który możesz dać społeczności angular 2) niż iść z angular 2.