Wprowadzenie do ściągawki Angular 2
Angular 2 to platforma typu open source zbudowana w oparciu o JavaScript. Wykorzystywano go głównie do tworzenia aplikacji internetowych typu front-end. Jest następcą AngularJS. Jest napisany w TypeScript. Jest opracowany przez Google. Angular 2 jest zbudowany na nowoczesnym JavaScript, który używa ES6. Angular 2 ma lepsze możliwości obsługi zdarzeń, zaawansowane szablony, lepszą obsługę urządzeń mobilnych i aplikacji internetowych na komputery. Jest również kompatybilny z urządzeniami mobilnymi i na wszystkich platformach, takich jak Windows, Mac i Linux.
Angular 2 ma kluczowe funkcje do tworzenia aplikacji, które są komponentami, maszynopisami i usługami. Angular 2 ma różne komponenty, które są modułami, komponentami, szablonami, metadanymi i usługą. Komponenty pomagają w budowaniu aplikacji w wiele modułów, co pomaga w utrzymaniu aplikacji przez dłuższy czas. Inny zestaw kodu został utrzymany i używany przez różne moduły aplikacji, które są obsługiwane przez funkcję usługi. Moduły pomagają rozbić aplikację na logiczny element, który zakodował się w celu wykonania określonego zadania.
Polecenia i treść w Angular 2 Ściągawka
Ściągawka Angular 2 ma obszerną bibliotekę, skalowalną, rozszerzalną, interaktywną i zawiera wiele wbudowanych metod obliczania typowych operacji. Istnieje inna składnia dla szablonów, modułów NgModu, wbudowanych dyrektyw, formularzy i innych konfiguracji dostępnych poniżej:
| Składnia szablonu | OPIS |
| Wiąże właściwość „wartość” z wynikiem wyrażenia „nazwa” | |
| Wiąże atrybut „rola” z wynikiem wyrażenia „moja rola” | |
| Po wywołaniu zdarzenia kliknięcia wywoła metodę „Tekst”. | |
| Wiąże właściwość z interpolowanym ciągiem | |
|
Witam mam na imię)) | Wiąże kontekst z interpolowanym ciągiem |
| Ustawia wiązanie dwukierunkowe. | |
|
… | * symbol zamienia bieżący element w temperaturę osadzoną. |
|
Student: ((student? .Sname)) | ? operator nawigacji informuje, że pole studenckie jest opcjonalne |
| Wiąże szerokość właściwości stylu, aby wyrazić mysize wyniku. | |
| Służy do powiązania danych i wyrażenia powiązania zdarzeń w szablonie. | |
|
Numer samochodu: ((numer pojazdu | myCarNuFormat)) | Przekształca bieżącą wartość numeru pojazdu za pomocą mycarNuformat rury. |
| Ujednoznacznia element z komponentu HTML | |
| Wiąże obecność klasy z wyrażaniem prawdy. |
NgModules: - Różne dyrektywy Ngmodule to:
| Dyrektywy | OPIS |
| @NgModule ((deklaracje ..)) | Definiuje moduł zawierający dyrektywy itp. |
| deklaracje: (MyRedComponent, MyBlueComponent, MyDatePipe) | Poinformuje, że lista komponentów, dyrektyw i rur należy do tego modułu. |
| eksportuje: (MyRedComponent, MyDatePipe) | Wyświetli listę komponentów i rur widocznych do zaimportowania tego modułu |
| importuje: (BrowserModule, SomeOtherModule) | Wyświetli listę modułów do zaimportowania do tego modułu |
| dostawcy: (MyService, (dostarczyć:…)) | Udostępnia listę dostawców wstrzykiwania zależności widocznych zarówno dla zawartości modułu |
| entryComponents: (SomeComponent, OtherComponent) | Zapewni listę składników, do których nie ma odniesienia w dostępnym szablonie. |
Dostępne są inne dyrektywy i haczyki do wykrywania zmian komponentów i haków cyklu życia, które można wdrożyć, ponieważ metody klas są poniżej:
| Dyrektywy | Opis |
| konstruktor (myService: MyService, …) (…) | Służy do wstrzykiwania zależności. |
| ngOnChanges (changeRecord) (…) | Jest wywoływany po każdej zmianie właściwości wejściowych i przed przetwarzaniem treści lub widoków potomnych |
| ngOnInit () (…) | Nazywa się to po właściwościach konstruktora i inicjalizacji |
| ngDoCheck () (…) | Jest wywoływany za każdym razem, gdy sprawdzane są właściwości komponentu lub dyrektyw. Służy do przedłużania kontroli celnej. |
| ngAfterContentInit () (…) | Jest wywoływany po ngOninit, gdy treść komponentów lub dyrektyw została zainicjowana. |
| ngAfterContentChecked () (…) | Jest wywoływany po każdym sprawdzeniu zawartości komponentu lub dyrektywy. |
| ngAfterViewInit () (…) | Nazywa się to po ngaftercontentint, gdy zainicjowano dyrektywę widoków komponentów i widoków potomnych. |
| ngAfterViewChecked () (…) | Jest wywoływany po każdej kontroli widoków komponentów i widoków potomnych, w których znajduje się już dyrektywa. |
| ngOnDestroy () (…) | Jest on wywoływany raz, przed zniszczeniem instancji. |
Darmowe porady i triki dotyczące korzystania z poleceń ściągawki w Angular 2: -
- W Angular2 ściągawki, platformBrowserDynamic (). BootstrapModule (AppModule); pomaga w ładowaniu aplikacji, używając komponentu root może z określonego.
- W Angular2, bootstrap: (MyAppComponent) wyświetli listę komponentów do ładowania, gdy moduł zostanie załadowany.
- jest to wbudowane w dyrektywę w angualr2, aby usunąć lub odtworzyć część drzewa Dom na podstawie wyrażenia.
- zamienia element listy i jego zawartość w szablon i jest on używany do tworzenia instancji widoku dla każdego elementu na liście.
- „ConditionExpres sion”> niniejsza dyrektywa służy do wybierania szablonów na podstawie wartości wyrażenia lub w prostych słowach, takich jak wielkość liter przełączania w ups.
- , te dyrektywy umożliwiają przypisywanie stylów do elementu HTML za pomocą CSS, a ten CSS może być bezpośrednio dostępny.
- ta dyrektywa wiąże klasy CSS na elemencie z zaufanymi wartościami map.
- ta dyrektywa zapewnia dwukierunkowe wiązanie, analizowanie i sprawdzanie poprawności formantów formularzy.
- selektor: „.cool-button: not (a)” to konfiguracja dyrektywy, która określa selektor CSS, który identyfikuje tę dyrektywę w szablonie. Nie obsługuje selektora rodzica-dziecka.
- pro viders: (MyService, (dostarczyć:…)) zawiera listę dostawców wstrzykiwania zależności dla dyrektywy i dzieci.
- (dostarczyć: MyService, useClass: MyMockService) ustawia lub zastępuje dostawcę usługi dla klasy.
- (podać: Moja wartość, użyj Wartości: 4) spowoduje ustawienie lub zastąpienie wartości dostawcy na 4
Wniosek - ściągawka Angular 2
Ściągawka Angular 2 ma wiele funkcji i różnych dyrektyw, dostępne są moduły do opracowywania, które pomagają uczynić aplikację bardziej interaktywną dla użytkowników i programistów w celu śledzenia problemów i funkcjonalności. Jest obszerny i można go używać do innych zastosowań. Angular2 używa maszynopisu, który jest całkowicie różny od wcześniejszej wersji AngularJS.
Arkusz prostokątny 2 jest łatwiejszy do nauczenia, ponieważ jego krzywa uczenia się jest prosta i prosta zarówno dla początkujących, jak i dla studentów. Znajomość JavaScript byłaby korzystna podczas korzystania z angulara do programowania. Zawsze dobrze jest się przekwalifikować.
Polecane artykuły
To był przewodnik po Angular 2 Ściągawka tutaj omówiliśmy zawartość i polecenia, a także darmowe porady i wskazówki Angular 2 Ściągawka. Możesz także spojrzeć na następujący artykuł, aby dowiedzieć się więcej -
- Ściągawka UNIX
- Ściągawka HTML
- Ściągawka CCNA
- Ściągawka JQuery