Angular to platforma i platforma programistyczna TypeScript, która służy do tworzenia aplikacji jednostronicowych.

Angular ma złożoną historię. Deweloperzy wykorzystali JavaScript do zbudowania pierwszej wersji tego frameworka (AngularJS). Angulardeveloperzy później wykorzystali TypeScript do zbudowania wszystkich kolejnych wersji Angulara (ze względu na liczbę błędów w pierwszej wersji).

Od 2021 r. najnowsza wersja Angulara to 12.0. W tym artykule dowiesz się wszystkiego, co musisz wiedzieć o Angularframework.

Co to jest kątowy?

Wiele osób opisuje Angulara jako framework i chociaż ta definicja nie jest błędna, Angular to nie tylko framework. Angular to także platforma programistyczna. Oznacza to, że posiada system sprzętowo-programowy, który obsługuje aplikacje Angulara.

Chociaż jest zbudowany na TypeScript, większość kodu platformy można napisać w JavaScript. Jak większość frameworków, Angular jest oparty na komponentach. Oznacza to, że każda sekcja interfejsu użytkownika Angulara jest traktowana jako niezależna całość, co prowadzi do tworzenia kodu wielokrotnego użytku i skalowalnych aplikacji.

Aby korzystać z Angulara, musisz znać HTML, CSS i JavaScript (znajomość TypeScript jest zasobem, ale nie jest wymogiem). Angularis jest często porównywany do VueJS i ReactJS, a jednym z głównych zarzutów jest to, że Angular ma bardziej stromą krzywą uczenia się.

Związane z: Co to jest ReactJS i do czego można go wykorzystać?

Nie jest to niespodzianką, ponieważ Angular (będący platformą programistyczną) ma większą liczbę podstawowych struktur, z którymi możesz się zapoznać. Struktury te obejmują:

• Moduły
• składniki
• Szablony

Zrozumienie tych podstawowych funkcji zapewni, że jesteś na dobrej drodze do zostania programistą Angular.

Eksplorowanie plików kątowych

Aplikacja Angular generuje wiele plików w nowym folderze projektu (jak widać na poniższym obrazku). Sprawdź oficjalną stronę Angulara, aby dowiedzieć się, jak zainstalować Angular na swoim komputerze.

Jednym z ważniejszych plików w głównym folderze projektu jest pakiet.json plik. Ten plik zawiera nazwę twojego projektu, jak rozpocząć swój projekt (ng służyć), jak zbudować swój projekt (ng budować) i jak przetestować projekt (ng test) między innymi.

Twój główny folder projektu zawiera również dwa foldery —node_modules oraz src. ten src folder to miejsce, w którym wykonasz cały swój rozwój; zawiera kilka plików i folderów.

Folder src

ten style.css plik to miejsce, w którym umieścisz wszystkie swoje globalne preferencje dotyczące stylizacji, a index.html plik to pojedyncza strona, która jest renderowana w Twojej przeglądarce.

Eksploracja pliku index.html

Jedyna rzecz, którą chciałbyś zmienić w index.html plik powyżej to tytuł aplikacji. ten tag w treści pliku HTML powyżej łączy do app.komponent.ts plik, który znajduje się w folderze aplikacji (jak widać na obrazku poniżej).

Eksploracja pliku app.component.ts

importuj {Komponent } z '@angular/core';
@Składnik({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
klasa eksportu AppComponent {
tytuł = 'moja-aplikacja';
}

ten app.komponent.ts plik używa root aplikacji selektor, który znajduje się w index.html plik powyżej. Wykorzystuje app.komponent.html plik jako szablon i app.komponent.css plik dla stylu.

ten app.komponent.css plik jest pusty podczas generowania, ponieważ wszystkie preferencje dotyczące stylów, wraz z układem HTML, znajdują się w app.komponent.html plik.

Uruchamianie aplikacji Angular za pomocą ng służyć – otwórz polecenie wyświetli w Twojej przeglądarce:

Aby zmienić zawartość wyświetlaną w przeglądarce, musisz edytować app.komponent.html plik.

Zastąpienie zawartości tego pliku następującym kodem:

Witaj świecie

W Twojej przeglądarce pojawi się następujący wynik:

Zrozumienie modułów kątowych

Każdy Kątowy aplikacja jest zbudowana na podstawowym systemie modułowym, znanym jako Moduły Ng. Każda aplikacja zawiera co najmniej jeden Moduł Ng. Kątowy generuje dwa moduły z nowy Komenda (app-routing.module.ts oraz app.moduł.ts).

ten app.moduł.ts plik zawiera moduł główny, który musi być obecny, aby aplikacja działała.

Eksploracja pliku app.module.ts

importuj { NgModule } z „@angular/core”;
import { BrowserModule } z '@angular/platform-browser';
importuj { AppRoutingModule } z './app-routing.module';
importuj { AppComponent } z './app.component';
@NgModule({
deklaracje: [
Komponent aplikacji
],
import: [
Moduł przeglądarki,
AppRoutingModuł
],
dostawcy: [],
bootstrap: [AppComponent]
})
eksport klasy AppModule { }

Powyższy plik używa JavaScript import oświadczenie o zaimportowaniu Moduł Ng, ten Moduł przeglądarki, ten Komponent aplikacji, a AppRoutingModuł (który jest drugim NgModule w projekcie).

ten @NgModule dekorator przychodzi po imporcie. Wskazuje, że app.moduł.ts plik jest rzeczywiście Moduł Ng. ten @NgModule dekorator następnie konfiguruje kilka tablic: deklaracje, ten import, ten dostawcy, a bootstrap.

ten deklaracje tablica przechowuje komponenty, dyrektywy i potoki, które należą do określonego Moduł Ng. Jednak w przypadku modułu głównego tylko Komponent aplikacji jest przechowywany w deklaracja tablica (jak widać w powyższym kodzie).

ten import tablica importuje inne Moduły Ng którego używasz w aplikacji. ten import tablica w powyższym kodzie importuje Moduł przeglądarki (co pozwala na korzystanie z usług specyficznych dla przeglądarki, takich jak renderowanie DOM), a AppRoutingModuł (co pozwala aplikacji na korzystanie z Kątowy router).

Związane z: Ukryty bohater stron internetowych: Zrozumienie DOM

ten dostawcy tablica powinna zawierać usługi, których składniki w innych Moduły Ng mogą korzystać.

ten bootstrap tablica jest bardzo ważna, ponieważ zawiera element wejściowy, który Angular tworzy i wstawia do index.html plik w głównym folderze projektu. Każda aplikacja Angulara uruchamia się z bootstrap tablica w katalogu głównym Moduł Ng za pomocą ładowanie początkowe ten Moduł Ng (co obejmuje proces, który wstawia każdy składnik do bootstrap tablicy w przeglądarce DOM).

Zrozumienie komponentów kątowych

Każdy komponent Angulara jest generowany z czterech określonych plików. Jeśli spojrzysz na powyższy obraz folderu aplikacji, zobaczysz następujące pliki:

• app.komponent.css (plik CSS)
• app.komponent.html (plik szablonu)
• app.komponent.spec.ts (plik specyfikacji testów)
• app.komponent.ts (plik składowy)

Wszystkie powyższe pliki są powiązane z tym samym komponentem. Jeśli używasz ng generować polecenie wygenerowania nowego komponentu, zostaną wygenerowane cztery pliki podobne do powyższych. ten app.komponent.ts plik zawiera składnik główny, który łączy różne aspekty komponentu (takie jak szablon i styl).

Eksploracja pliku app.component.ts

importuj { Component } z „@angular/core”;
@Składnik({
selektor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
klasa eksportu AppComponent {
tytuł = 'moja-aplikacja';
}

ten app.komponent.ts plik używa instrukcji importowania JavaScript, aby zaimportować „Komponent” z rdzenia Angulara. A później @Składnik dekorator identyfikuje klasę jako składnik. ten @Składnik dekorator zawiera obiekt składający się z selektor, a URL szablonu, i stylowe adresy URL szyk.

ten selektor mówi Kątowy aby wstawić instancję komponentu aplikacji do dowolnego szablonu HTML, który ma tag odpowiadający selektor (więc etykietka). A jeśli spojrzysz wstecz na kod w index.html plik powyżej znajdziesz etykietka.

Główny plik komponentu aplikacji również łączy się z plikiem szablonu za pomocą URL szablonu własność. To jest app.komponent.html plik, który określa, jak określony komponent powinien być renderowany w aplikacji Angular.

Ostatnią właściwością obiektu jest stylowe adresy URL. Ta właściwość odwołuje się do tablicy arkuszy stylów, co oznacza, że ​​możesz zastosować wiele arkuszy stylów do pojedynczy komponent (dzięki czemu możesz dodać globalny arkusz stylów w folderze src do tablicy styleUrls jako dobrze).

Zrozumienie szablonów kątowych

ten app.komponent.html plik jest przykładem szablonu Angular. Ten plik jest plikiem HTML, a także plikiem komponentu (komponentem aplikacji). Dlatego każdy składnik musi mieć szablon HTML, po prostu dlatego, że przedstawia on sposób renderowania składnika w DOM.

Co dalej?

Zrozumienie DOM to twój następny najlepszy ruch. Przyjęcie platformy i frameworka Angular jest niewątpliwie wyzwaniem. Jednak jest to możliwe, a biorąc pod uwagę, że Angular renderuje swoje komponenty w DOM, poznanie DOM – tak jak próbujesz opanować Angular – to kolejny świetny ruch.

Ukryty bohater stron internetowych: Zrozumienie DOM

Uczysz się projektowania stron internetowych i chcesz dowiedzieć się więcej o obiektowym modelu dokumentu? Oto, co musisz wiedzieć o DOM.

Czytaj dalej

O autorze