Angular Samouczek
Rozpoczęcie pracy z Angularem
Szukaj…
Uwagi
Angular (powszechnie określany jako „ Angular 2+ ” lub „ Angular 2 ”) to oparty na TypeScript frameworkowy interfejs internetowy typu open source, kierowany przez Angular Team w Google oraz przez społeczność osób i korporacji, która zajmuje się wszystkimi części przepływu pracy programisty podczas budowania złożonych aplikacji internetowych. Angular to kompletne przepisanie tego samego zespołu, który zbudował AngularJS . ¹
Framework składa się z kilku bibliotek , niektóre z nich core (na przykład @ angular / core ) i niektóre opcjonalne ( @ angular / animations ).
Pisząc aplikacje Angular, komponujesz szablony HTML ze znacznikami Angularized, piszesz klasy komponentów do zarządzania tymi szablonami, dodajesz logikę aplikacji w usługach oraz komponujesz boks i usługi w modułach .
Następnie uruchom aplikację, ładując moduł główny . Angular przejmuje kontrolę nad prezentacją treści aplikacji w przeglądarce i reagowaniem na interakcje użytkowników zgodnie z podanymi instrukcjami.
Prawdopodobnie najbardziej fundamentalną częścią rozwoju aplikacji Angular są komponenty . Składnik jest kombinacją szablonu HTML i klasy składników, która kontroluje część ekranu. Oto przykład komponentu, który wyświetla prosty ciąg znaków:
src / app / app.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
Każdy komponent zaczyna się @Component funkcji dekoratora @Component która pobiera obiekt metadanych . Obiekt metadanych opisuje, w jaki sposób szablon HTML i klasa komponentu współpracują ze sobą.
Właściwość selector mówi Angularowi, aby wyświetlał komponent wewnątrz niestandardowego <my-app> w pliku index.html .
index.html (wewnątrz znacznika
body)<my-app>Loading AppComponent content here ...</my-app>
Właściwość template definiuje komunikat w nagłówku <h1> . Wiadomość zaczyna się od „Hello” i kończy się na {{name}} , która jest wyrażeniem wiążącym interpolację kątową. W czasie wykonywania Angular zastępuje {{name}} wartością właściwości name komponentu. Wiązanie interpolacji jest jedną z wielu funkcji kątowych, które odkryjesz w tej dokumentacji. W tym przykładzie zmień właściwość name klasy komponentu z 'Angular' na 'World' i zobacz, co się stanie.
Ten przykład jest napisany w TypeScript , nadzbiór JavaScript. Angular używa TypeScript, ponieważ jego typy ułatwiają wspieranie produktywności programistów za pomocą narzędzi. Dodatkowo, prawie cała obsługa dotyczy TypeScript, więc użycie zwykłego JavaScript do napisania aplikacji będzie trudne . Pisanie kodu Angular w JavaScript jest jednak możliwe; ten przewodnik wyjaśnia, w jaki sposób.
Więcej informacji na temat architektury Angulara można znaleźć tutaj
Wersje
| Wersja | Data wydania |
|---|---|
| 5.0.0-beta.1 (najnowsze) | 2017-07-27 |
| 4.3.2 | 2017-07-26 |
| 5.0.0-beta.0 | 2017-07-19 |
| 4.3.1 | 2017-07-19 |
| 4.3.0 | 2017-07-14 |
| 4.2.6 | 2017-07-08 |
| 4.2.5 | 2017-06-09 |
| 4.2.4 | 21.06.2017 |
| 4.2.3 | 16.06.2017 |
| 4.2.2 | 2017-06-12 |
| 4.2.1 | 2017-06-09 |
| 4.2.0 | 2017-06-08 |
| 4.2.0-rc.2 | 01.06.2017 |
| 4.2.0-rc.1 | 26.05.2017 |
| 4.2.0-rc.0 | 2017-05-19 |
| 4.1.3 | 2017-05-17 |
| 4.1.2 | 2017-05-10 |
| 4.1.1 | 2017-05-04 |
| 4.1.0 | 26.04.2017 |
| 4.1.0-rc.0 | 21.04.2017 |
| 4.0.3 | 21.04.2017 |
| 4.0.2 | 2017-04-11 |
| 4.0.1 | 29.03.2017 |
| 4.0.0 | 23.03.2017 |
| 4.0.0-rc.6 | 23.03.2017 |
| 4.0.0-rc.5 | 17.03.2017 |
| 4.0.0-rc.4 | 17.03.2017 |
| 2.4.10 | 17.03.2017 |
| 4.0.0-rc.3 | 2017-03-10 |
| 2.4.9 | 02.03.2017 |
| 4.0.0-rc.2 | 02.03.2017 |
| 4.0.0-rc.1 | 24.02.2017 |
| 2.4.8 | 18.02.2017 |
| 2.4.7 | 2017-02-09 |
| 2.4.6 | 2017-02-03 |
| 2.4.5 | 25.01.2017 |
| 2.4.4 | 19.01.2017 |
| 2.4.3 | 11.01.2017 |
| 2.4.2 | 2017-01-06 |
| 2.4.1 | 21.12.2016 |
| 2.4.0 | 2016-12-20 |
| 2.3.1 | 15.12.2016 |
| 2.3.0 | 07.12.2016 |
| 2.3.0-rc.0 | 30.11.2016 |
| 2.2.4 | 30.11.2016 |
| 2.2.3 | 23.11.2016 |
| 2.2.2 | 22.11.2016 |
| 2.2.1 | 17.11.2016 |
| 2.2.0 | 14.11.2016 |
| 2.2.0-rc.0 | 02.11.2016 |
| 2.1.2 | 27.10.2016 |
| 2.1.1 | 2016-10-20 |
| 2.1.0 | 2016-10-12 |
| 2.1.0-rc.0 | 2016-10-05 |
| 2.0.2 | 2016-10-05 |
| 2.0.1 | 23.09.2016 |
| 2.0.0 | 14.09.2016 |
| 2.0.0-rc.7 | 13.09.2016 |
| 2.0.0-rc.6 | 31.08.2016 |
| 2.0.0-rc.5 | 09.08.2016 |
| 2.0.0-rc.4 | 30.06.2016 |
| 2.0.0-rc.3 | 21.06.2016 |
| 2.0.0-rc.2 | 2016-06-15 |
| 2.0.0-rc.1 | 2016-05-03 |
| 2.0.0-rc.0 | 2016-05-02 |
Instalacja Angulara za pomocą angular-cli
Ten przykład to szybka konfiguracja Angulara i jak wygenerować szybki przykładowy projekt.
Wymagania wstępne:
- Node.js 6.9.0 lub nowszy.
- npm v3 lub wyższa lub przędza .
- Typy v1 lub wyższe.
Otwórz terminal i uruchom kolejno polecenia:
npm install -g typings lub yarn global add typings
npm install -g @angular/cli lub yarn global add @angular/cli
Pierwsze polecenie instaluje bibliotekę typów na całym świecie (i dodaje typings wykonywalny do PATH). Drugi instaluje @ angular / cli globalnie, dodając plik wykonywalny ng do PATH.
Aby skonfigurować nowy projekt
Za pomocą terminalu przejdź do folderu, w którym chcesz skonfigurować nowy projekt.
Uruchom polecenia:
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
To wszystko, teraz masz prosty przykładowy projekt wykonany w Angular. Możesz teraz przejść do łącza wyświetlanego w terminalu i zobaczyć, co jest uruchomione.
Aby dodać do istniejącego projektu
Przejdź do katalogu głównego bieżącego projektu.
Uruchom polecenie:
ng init
To doda niezbędne rusztowanie do twojego projektu. Pliki zostaną utworzone w bieżącym katalogu, więc pamiętaj, aby uruchomić go w pustym katalogu.
Lokalne uruchomienie projektu
Aby zobaczyć i współpracować z aplikacją, gdy jest ona uruchomiona w przeglądarce, musisz uruchomić lokalny serwer programistyczny obsługujący pliki twojego projektu.
ng serve
Jeśli serwer uruchomił się pomyślnie, powinien wyświetlić adres, pod którym działa serwer. Zwykle jest to:
http://localhost:4200
Po instalacji ten lokalny serwer programistyczny jest podłączony do funkcji Hot Module Reloading, więc wszelkie zmiany w html, maszynopisie lub css spowodują automatyczne ponowne załadowanie przeglądarki (ale można ją wyłączyć w razie potrzeby).
Generowanie komponentów, dyrektyw, rur i usług
Polecenie ng generate <scaffold-type> <name> (lub po prostu ng g <scaffold-type> <name> ) pozwala automatycznie generować komponenty Angular:
# The command below will generate a component in the folder you are currently at
ng generate component my-generated-component
# Using the alias (same outcome as above)
ng g component my-generated-component
# You can add --flat if you don't want to create new folder for a component
ng g component my-generated-component --flat
# You can add --spec false if you don't want a test file to be generated (my-generated-component.spec.ts)
ng g component my-generated-component --spec false
Istnieje kilka możliwych typów rusztowań, które może generować kąt-cli:
| Rodzaj rusztowania | Stosowanie |
|---|---|
| Moduł | ng g module my-new-module |
| Składnik | ng g component my-new-component |
| Dyrektywa | ng g directive my-new-directive |
| Rura | ng g pipe my-new-pipe |
| Usługa | ng g service my-new-service |
| Klasa | ng g class my-new-class |
| Berło | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
Możesz także zastąpić nazwę typu pierwszą literą. Na przykład:
ng gm my-new-module aby wygenerować nowy moduł lub ng gc my-new-component moduł, aby utworzyć komponent.
Budynek / sprzedaż wiązana
Po zakończeniu tworzenia aplikacji internetowej Angular i chęci jej zainstalowania na serwerze internetowym, takim jak Apache Tomcat, wystarczy uruchomić polecenie kompilacji z ustawioną flagą produkcyjną lub bez niej. Produkcja zminimalizuje kod i zoptymalizuje ustawienia produkcyjne.
ng build
lub
ng build --prod
Następnie poszukaj w katalogu głównym projektów folderu /dist , który zawiera kompilację.
Jeśli chcesz skorzystać z mniejszego pakietu produkcyjnego, możesz także skorzystać z kompilacji szablonów Ahead-of-Time, która usuwa kompilator szablonów z ostatecznej wersji:
ng build --prod --aot
Testów jednostkowych
Angular zapewnia wbudowane testy jednostkowe, a każdy element utworzony przez angular-cli generuje podstawowy test jednostkowy, który można wydać. Testy jednostkowe są pisane przy użyciu jaśminu i wykonywane przez Karmę. Aby rozpocząć testowanie, wykonaj następujące polecenie:
ng test
To polecenie wykona wszystkie testy w projekcie i uruchomi je ponownie przy każdej zmianie pliku źródłowego, niezależnie od tego, czy jest to test, czy kod z aplikacji.
Aby uzyskać więcej informacji, odwiedź również stronę: angular-cli github
Program Angular „Hello World”
Wymagania wstępne:
Konfigurowanie środowiska programistycznego
Zanim zaczniemy, musimy skonfigurować nasze środowisko.
Zainstaluj Node.js i npm, jeśli nie są jeszcze na twoim komputerze.
Sprawdź, czy działasz co najmniej węzeł 6.9.x i npm 3.xx, uruchamiając węzeł -v i npm -v w oknie terminala / konsoli. Starsze wersje powodują błędy, ale nowsze wersje są w porządku.
Zainstaluj Angular CLI globalnie, używając
npm install -g @angular/cli.
Krok 1: Tworzenie nowego projektu
Otwórz okno terminala (lub wiersz poleceń Node.js w systemie Windows).
Tworzymy nowy projekt i aplikację szkieletową za pomocą polecenia:
ng new my-app
Tutaj ng jest dla Angulara. Otrzymujemy strukturę pliku coś takiego.
Istnieje wiele plików. Nie musimy się teraz martwić o nich wszystkich.
Krok 2: Udostępnienie aplikacji
Uruchamiamy naszą aplikację za pomocą następującego polecenia:
ng serve
Możemy użyć flagi -open (lub po prostu -o ), która automatycznie otworzy naszą przeglądarkę na http://localhost:4200/
ng serve --open
Przejdź do przeglądarki pod adresem http://localhost:4200/ . Wygląda to mniej więcej tak:
Krok 3: Edycja naszego pierwszego komponentu kątowego
Interfejs CLI utworzył dla nas domyślny komponent Angular. Jest to składnik główny i nazywa się app-root . Można go znaleźć w ./src/app/app.component.ts .
Otwórz plik komponentu i zmień właściwość title z Welcome to app!! do Hello World . Przeglądarka ponownie ładuje się automatycznie ze zmienionym tytułem.
Kod oryginalny: Zwróć uwagę na title = 'app';
Zmodyfikowany kod: Wartość title została zmieniona.
Podobnie jest zmiana w ./src/app/app.component.html .
Oryginalny HTML
Zmodyfikowany HTML
Zauważ, że zostanie wyświetlona wartość title z ./src/app/app.component.ts . Przeglądarka przeładowuje się automatycznie po wprowadzeniu zmian. Wygląda to mniej więcej tak.
Aby znaleźć więcej na ten temat, odwiedź ten link tutaj .