Co to jest Angular 2?
Do tworzenia aplikacji internetowych w HTML i JavaScript używana jest platforma JavaScript znana jako Angular 2, która została zbudowana przez Google. Podczas pracy z aplikacjami jednostronicowymi przeszkody, które często napotykasz, można pokonać za pomocą Angular 2.
Moduły w Angular 2
W aplikacji granice logiczne są zestawiane przez Angular 2. Funkcjonalności można podzielić na różne moduły zamiast umieszczać wszystko w jednej aplikacji. Poniżej znajdują się niektóre części, z których wykonany jest moduł -
- Aby uzyskać dostęp do funkcji w aplikacji, składniki, które należy załadować, są informowane w Angular JS za pomocą tablicy Bootstrap. Składnik należy zadeklarować w tablicy bootstrap, aby w aplikacji Angular JS mógł być używany w innych komponentach.
- Rury, pochodne, komponenty itp. Są eksportowane za pomocą tablicy eksportu do wykorzystania w innych modułach.
- Z innych modułów Angular JS funkcjonalność można zaimportować za pomocą tablicy importu.
Architektura kątowa 2
Anatomia aplikacji Angular 2 została opisana na powyższym schemacie. Funkcjonalność aplikacji jest określona przez każdy komponent, który stanowi logiczną granicę. Funkcje poszczególnych komponentów są udostępniane za pomocą usług warstwowych.
Składnik jest definiowany przez klasę, szablon i metadane. Właściwości i metody składają się z klasy. Funkcjonalność klasy jest rozszerzona i jest dekorowana za pomocą metadanych. Widok HTML aplikacji można zdefiniować za pomocą szablonu.
Ta aplikacja ma jeden moduł główny i kilka składników, które oddzielają funkcjonalność.
Podobnie jak moduł Root Angular, moduł funkcji ma kilka komponentów, które dystrybuują funkcjonalność.
W aplikacji Angular JS logiczny fragment kodu jest definiowany przez komponenty.
- Wiązanie i pochodne są wykonywane przez szablon, który zawiera kod HTML aplikacji i renderuje widok aplikacji.
- Właściwości i metody są obecne w klasie, która obsługuje widok aplikacji i jest zdefiniowana w TypeScript. Ma nazwę klasy, nazwę właściwości, typ właściwości i wartość.
- W dekoratorze definiowane są metadane, które zawierają dodatkowe dane.
Funkcje Angular 2
Moc HTML jest rozszerzana za pomocą niestandardowego elementu HTML znanego jako dyrektywa. Dyrektywami w Angular 2 są ngif i ngFor.
- Elementy są dodawane do kodu HTML za pomocą elementu ngif w prawdziwych scenariuszach, ale nie byłyby dodawane, jeśli ma wartość False. Reprezentowane przez.
- Na podstawie warunku pętli for używany jest element ngFor.
Powiązanie danych jest jedną z cech Angulara 2. Właściwość znacznika HTML może być powiązana z właściwością klasy.
W Angular 2 obsługa błędów jest opcją dla aplikacji. Dołączona jest biblioteka catch ReactJS i używana jest funkcja catch. Poniżej znajduje się kod obsługi błędów.
Do funkcji obsługi błędów link jest zawarty w funkcji catch. Do konsoli błąd jest wysyłany przez funkcję obsługi błędów. Wykonanie jest kontynuowane po wrzuceniu błędu z powrotem do programu głównego. To przekierowuje błąd do konsoli.
Użytkownicy są przekierowywani na różne strony za pomocą funkcji Routing po wybraniu opcji ze strony głównej.
W ten sposób dane można przekształcić za pomocą kilku filtrów i potoków.
- Aby przekonwertować na małe litery.
- Aby przekonwertować na wielkie litery.
- Z ciągu wejściowego można wyciąć kawałek danych. Pozycja początkowa plasterka jest określana przez początek, a pozycja końcowa jest określana przez koniec.
- Łańcuch wejściowy można przekonwertować na format daty za pomocą funkcji daty.
- Do formatu waluty łańcuch wejściowy jest konwertowany za pomocą funkcji waluty.
- Do formatu procentowego ciąg wejściowy jest konwertowany za pomocą funkcji procentowej.
Niestandardowe rury można również tworzyć za pomocą Angulara 2.
- Nazwa potoku jest zdefiniowana przez Pipename.
- Niestandardowa klasa rur jest zdefiniowana przez klasę rur.
- Do pracy z rurą używana jest funkcja transformacji.
- Do potoku parametry są przekazywane przez parametry.
- Typ powrotu potoku jest definiowany przez typ Return.
Cykl życia programu Angular 2
Od uruchomienia do końca aplikacji, aplikacja Angular 2 ma swój cykl życia.
Ten schemat przedstawia cały cykl życia Angular 2. Poniżej znajduje się opis.
- Zmiana wartości właściwości powiązanej z danymi jest opisana metodą ngOnChanges.
- Po wyświetleniu przez Angular właściwości związanych z danymi podczas inicjowania komponentu wywoływana jest metoda ngOnInit.
- Gdy sam Angular nie może wykryć zmian, do wykrywania wykorzystywany jest ngDoCheck.
- W widoku komponentu, gdy zawartość zewnętrzna jest rzutowana przez Angular, w odpowiedzi wywoływana jest ngAfterContentInit.
- Gdy zawartość wyświetlana jest sprawdzana przez Angular, w odpowiedzi wywoływana jest ngAfterContentChecked.
- Po zainicjowaniu widoków komponentu i widoków potomnych przez Angulara wywoływana jest ngAfterInit.
- NgAfterViewChecked jest wywoływany po sprawdzeniu komponentów i widoków potomnych przez Angulara.
- Przed zniszczeniem dyrektywy lub elementu przez Angulara organizacje pozarządowe niszczą, co nazywa się fazą oczyszczania.
Usługi to kolejna właściwość Angular 2, która jest używana, gdy różne moduły wymagają wspólnej funkcjonalności. Wśród różnych modułów można ponownie wykorzystać funkcjonalność bazy danych. Utworzona usługa może korzystać z funkcji bazy danych.
Dlaczego potrzebujemy Angular 2?
- Angular 2 zapewnia funkcje, które pomagają w debugowaniu i zrozumieniu kodu, programowanie i edytowanie również byłoby ulepszone.
- Kodowanie staje się bardziej spójne dzięki pomocy Angular 2.
- Angular 2 zapewnia szerokie możliwości wiązania. Jego funkcja wiązania właściwości pozwala kontrolować DOM. Reakcja na dowolne zdarzenie z widoku może być osiągnięta za pomocą wiązania zdarzenia.
- Angular 2 oferuje w pełni funkcjonalną funkcję routingu.
- Angular 2 ma obszerną dokumentację i wsparcie społeczności, które zapewnia rozwiązanie prawie każdego napotkanego problemu.
Wniosek
Angular 2 to jedna z najbardziej poszukiwanych platform programistycznych i potrzebna do zbudowania kolejnej aplikacji internetowej.
Polecane artykuły
To jest przewodnik po What is Angular 2 ?. Tutaj omawiamy wprowadzenie, moduły w Angular 2, funkcje Angular 2 wraz z cyklem życia Angular 2. Możesz również przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -
- Jak zainstalować Angular 2?
- R Język programowania
- Rodzaje stron internetowych
- Rodzaje hostingu