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+.
- 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
- 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.
- 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.
- 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