Angular7 - Szybki przewodnik

Angular 7jest własnością Google i stabilne wydanie zostało zrobione w dniu 18 ^th października 2018. Jest to najnowsza wersja kątowych.

Poniżej znajduje się lista dotychczas wydanych wersji Angular -

Wersja	Data wypuszczenia
Angular JS	Październik 2010
Angular 2.0	Wrzesień 2016
Kątowa 4.0	Marzec 2017
Angular 5.0	Listopad 2017
Kątowy 6.0	Maja 2018
Kątowy 7.0	Października 2018 r

Daty wydania kolejnych dwóch głównych nadchodzących wersji Angulara podano poniżej -

Wersja	Data wypuszczenia
Kątowy 8.0	Marzec / kwiecień 2019
Kątowy 9.0	Wrzesień / październik 2019

Google planuje udostępniać główną wersję Angular co 6 miesięcy. Dotychczas wydane wersje są wstecznie kompatybilne i można je bardzo łatwo zaktualizować do nowszej wersji.

Omówmy nowe funkcje dodane do Angular 7.

Aktualizacja kątowa do V7

Angular 7 to główne wydanie, w którym w ramach kątowego rdzenia aktualizowane są Angular CLI i Angular Materials. Jeśli używasz Angular 5 lub 6 i chcesz zaktualizować do Angular 7, poniżej znajduje się polecenie, które zaktualizuje Twoją aplikację do najnowszej wersji Angular -

ng update @angular/cli @angular/core

Angular CLI

Podczas konfigurowania projektu za pomocą kątowego interfejsu wiersza polecenia wyświetla monit o dostępne wbudowane funkcje, tj. Obsługę routingu i arkuszy stylów, jak pokazano poniżej -

Wydajność aplikacji

W Angular 7 w angular.json dodano budżet pakietu, jak pokazano poniżej -

Budgetsto funkcja dodana do Angular CLI, która pozwala ustawić limit wewnątrz konfiguracji, aby upewnić się, że rozmiar aplikacji mieści się w ustawionym limicie. Możesz ustawić rozmiar tak, aby aplikacja była ostrzegana o przekroczeniu limitu.

Materiał kątowy i CDK

Wersja Angular Material / CDK została zaktualizowana w Angular 7. Są też 2 funkcje dodane do CDK - virtual scrolling, and drag and drop.

Wirtualne przewijanie

Funkcja wirtualnego przewijania pokazuje widoczne elementy domeny dla użytkownika, gdy użytkownik przewija, wyświetlana jest następna lista. Zapewnia to szybsze działanie, ponieważ pełna lista nie jest ładowana za jednym razem i ładowana tylko zgodnie z widocznością na ekranie.

Przeciągnij i upuść

Możesz przeciągać i upuszczać elementy z listy i umieszczać je w dowolnym miejscu na liście. Nowa funkcja jest bardzo płynna i szybka.

W tym rozdziale omówimy konfigurację środowiska wymaganą dla Angular 7. Aby zainstalować Angular 7, potrzebujemy:

• Nodejs
• Npm
• Angular CLI
• IDE do pisania kodu

Nodejs

Aby sprawdzić, czy nodejs jest zainstalowany w Twoim systemie, wpisz node -vw terminalu. To pomoże ci zobaczyć wersję nodejs aktualnie zainstalowaną w twoim systemie.

Nodejs musi być większy niż 8x lub 10x, a npm musi być większy niż 5,6 lub 6,4.

C:\>node 
–v v10.15.1

Jeśli nic nie drukuje, zainstaluj nodejs w swoim systemie. Aby zainstalować nodejs, przejdź do strony głównej,https://nodejs.org/en/download/of nodejs i zainstaluj pakiet oparty na systemie operacyjnym.

Strona domowa nodejs wygląda następująco -

W zależności od systemu operacyjnego zainstaluj wymagany pakiet. Po zainstalowaniu nodejs, npm zostanie również zainstalowany wraz z nim. Aby sprawdzić, czy npm jest zainstalowany, czy nie, wpisz npm –v w terminalu, jak podano poniżej. Wyświetli wersję pliku npm.

C:\>npm 
–v 6.4.1

Instalacja Angular 7 jest bardzo prosta przy pomocy kątowego CLI. Odwiedź stronę głównąhttps://cli.angular.io/ kątowe, aby uzyskać odniesienie do polecenia.

Rodzaj npm install –g @angular/cliw wierszu poleceń, aby zainstalować kątowe kliknięcie w systemie. Instalacja zajmie trochę czasu, a po zakończeniu możesz sprawdzić wersję za pomocą poniższego polecenia -

ng version

Wyświetli szczegóły wersji angular - cli oraz wersje innych pakietów, jak pokazano poniżej -

Skończyliśmy z instalacją Angular 7. Do rozpoczęcia pracy z Angular 7 możesz użyć dowolnego IDE, np. WebStorm, Atom, Visual Studio Code.

Szczegóły konfiguracji projektu wyjaśniono w następnym rozdziale.

W tym rozdziale omówimy konfigurację projektu w Angular 7.

Aby rozpocząć konfigurację projektu, upewnij się, że masz zainstalowany nodejs. You can check the version of node in the command line using the command, node –v, jak pokazano poniżej -

Jeśli nie masz wersji, zainstaluj nodejs z ich oficjalnej strony -https://nodejs.org/en/.

Po zainstalowaniu nodejs, npm zostanie również zainstalowany razem z nim. Aby sprawdzić wersję npm, uruchom npm -v w wierszu poleceń, jak pokazano poniżej -

Mamy więc wersję 10 węzła i wersję npm 6.4.1.

Aby zainstalować Angular 7, wejdź na stronę, https://cli.angular.io aby zainstalować Angular CLI.

Zobaczysz następujące polecenia na stronie internetowej -

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

Powyższe polecenia pomagają uzyskać konfigurację projektu w Angular 7.

Stworzymy folder o nazwie projectA7 i zainstaluj angular/cli jak pokazano poniżej -

Po zakończeniu instalacji sprawdź szczegóły zainstalowanych pakietów za pomocą polecenia ng version, jak pokazano poniżej -

Podaje wersję dla Angular CLI, wersję maszynopisu i inne pakiety dostępne dla Angular 7.

Skończyliśmy z instalacją Angulara 7, teraz zaczniemy od konfiguracji projektu.

Aby stworzyć projekt w Angular 7, użyjemy następującego polecenia -

ng new projectname

Możesz użyć wybranej nazwy projektu. Uruchommy teraz powyższe polecenie w linii poleceń.

Tutaj używamy nazwy projektu jako angular7-app . Po uruchomieniu polecenia zapyta Cię o routing, jak pokazano poniżej -

Wpisz y, aby dodać routing do konfiguracji projektu.

Następne pytanie dotyczy arkusza stylów -

Dostępne opcje to CSS, Sass, Less i Stylus. Na powyższym zrzucie ekranu strzałka jest na CSS. Aby zmienić, możesz użyć klawiszy strzałek, aby wybrać ten wymagany do konfiguracji projektu. Obecnie omówimy CSS dla naszego projektu.

Projekt angular7-app został pomyślnie utworzony. Instaluje wszystkie wymagane pakiety niezbędne do uruchomienia naszego projektu w Angular7. Przejdźmy teraz do utworzonego projektu, który znajduje się w kataloguangular7-app.

Zmień katalog w linii poleceń, używając podanej linii kodu -

cd angular7-app

Będziemy używać Visual Studio Code IDE do pracy z Angular 7, możesz użyć dowolnego IDE, tj. Atom, WebStorm, itp.

Aby pobrać Visual Studio Code, przejdź do https://code.visualstudio.com/ i kliknij Pobierz dla Windows.

Kliknij Pobierz dla Windows, aby zainstalować IDE i uruchom instalację, aby rozpocząć korzystanie z IDE.

Poniżej znajduje się redaktor -

Nie rozpoczęliśmy w nim żadnego projektu. Weźmy teraz projekt, który stworzyliśmy za pomocą angular-cli.

Rozważymy angular7-appprojekt. Otwórzmyangular7-app i zobacz, jak wygląda struktura folderów.

Teraz, gdy mamy już strukturę plików dla naszego projektu, skompilujmy nasz projekt za pomocą następującego polecenia -

ng serve

The ng serve command builds the application and starts the web server.

Zobaczysz poniżej, gdy polecenie rozpocznie wykonywanie -

Serwer WWW uruchamia się na porcie 4200. Wpisz adres URL, "http://localhost:4200/"w przeglądarce i zobacz dane wyjściowe. Po skompilowaniu projektu otrzymasz następujące dane wyjściowe -

Po uruchomieniu adresu URL http://localhost:4200/ w przeglądarce zostaniesz przekierowany na następujący ekran -

Wprowadźmy teraz pewne zmiany, aby wyświetlić następującą zawartość -

“Welcome to Angular 7!”

Dokonaliśmy zmian w plikach - app.component.html i app.component.ts. Więcej na ten temat omówimy w naszych kolejnych rozdziałach.

Dokończmy konfigurację projektu. Jeśli widzisz, użyliśmy portu 4200, który jest domyślnym portem używanym przez angular – cli podczas kompilacji. Możesz zmienić port, jeśli chcesz, używając następującego polecenia -

ng serve --host 0.0.0.0 –port 4205

Angular7-app / folder ma następujące cechy folder structure-

• e2e/- od końca do końca folderu testowego. Głównie e2e służy do testowania integracji i pomaga zapewnić prawidłowe działanie aplikacji.

• node_modules/- Zainstalowany pakiet npm to node_modules. Możesz otworzyć folder i zobaczyć dostępne pakiety.

• src/ - W tym folderze będziemy pracować nad projektem przy użyciu Angulara 7.Inside src / you will app / folder utworzony podczas konfiguracji projektu i zawiera wszystkie wymagane pliki wymagane dla projektu.

Angular7-app / folder ma następujące cechy file structure -

• angular.json - Zasadniczo przechowuje nazwę projektu, wersję CLI itp.

• .editorconfig - To jest plik konfiguracyjny dla edytora.

• .gitignore - Plik .gitignore powinien zostać zapisany w repozytorium, aby udostępnić reguły ignorowania innym użytkownikom, którzy klonują repozytorium.

• package.json - Plik package.json informuje, które biblioteki zostaną zainstalowane w node_modules po uruchomieniu npm install.

Obecnie, jeśli otworzysz plik package.json w edytorze, otrzymasz w nim dodane moduły -

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

Jeśli chcesz dodać więcej bibliotek, możesz dodać je tutaj i uruchomić polecenie npm install.

• tsconfig.json - Zasadniczo zawiera opcje kompilatora wymagane podczas kompilacji.

• tslint.json - To jest plik konfiguracyjny z regułami, które należy wziąć pod uwagę podczas kompilacji.

Plik src/ folder jest głównym folderem, który wewnętrznie ma inną strukturę plików.

aplikacja

Zawiera pliki opisane poniżej. Pliki te są domyślnie instalowane przez angular-cli.

app.module.ts

Jeśli otworzysz plik, zobaczysz, że kod ma odniesienie do różnych bibliotek, które są importowane. Angular-cli użył następujących domyślnych bibliotek do importu: angular / core, platform-browser.

Same nazwy wyjaśniają użycie bibliotek. Są importowane i zapisywane w zmiennych, takich jak deklaracje, importy, dostawcy i bootstrap.

Możemy zobaczyć app-routing.modulejest również dodawany. Dzieje się tak, ponieważ na początku instalacji wybraliśmy routing. Moduł jest dodawany przez @ angular / cli.

Poniżej przedstawiono strukturę pliku -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule jest importowany z @ angular / core i ma obiekt o następujących właściwościach -

Declarations- W deklaracjach przechowywane są odniesienia do składników. Składnik aplikacji jest składnikiem domyślnym, który jest tworzony za każdym razem, gdy inicjowany jest nowy projekt. O tworzeniu nowych komponentów dowiemy się w innej sekcji.

Imports- Spowoduje to zaimportowanie modułów, jak pokazano powyżej. Obecnie BrowserModule jest częścią importu importowanego z @ angular / platform-browser. Dodano również moduł routingu AppRoutingModule.

Providers- Będzie to miało odniesienie do utworzonych usług. Usługa zostanie omówiona w kolejnym rozdziale.

Bootstrap - Zawiera odniesienie do utworzonego domyślnego komponentu, tj. AppComponent.

app.component.css- Tutaj możesz napisać swój plik CSS. W tej chwili dodaliśmy kolor tła do elementu div, jak pokazano poniżej.

Struktura pliku jest następująca -

.divdetails {
   background-color: #ccc; 
}

app.component.html

Kod html będzie dostępny w tym pliku.

Struktura pliku jest następująca -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1> 
   <img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7> 
</div> 

<h2>Here are some links to help you start:</h2> 
<ul> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli">CLI Documentation</>
      </h2> 
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/">Angular blog</a>
      </h2> 
   </li> 
</ul> 
<router-outlet></router-outlet>

To jest domyślny kod HTML aktualnie dostępny podczas tworzenia projektu.

app.component.spec.ts

Są to automatycznie generowane pliki, które zawierają testy jednostkowe dla komponentu źródłowego.

app.component.ts

Klasa komponentu jest zdefiniowana tutaj. Możesz przetworzyć strukturę html w pliku .ts. Przetwarzanie będzie obejmować takie czynności, jak łączenie się z bazą danych, interakcje z innymi komponentami, routing, usługi itp.

Struktura pliku jest następująca -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',  
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7';
}

app-routing.module.ts

Ten plik zajmie się routingiem wymaganym dla twojego projektu. Jest połączony z głównym modułem, czyli app.module.ts.

Struktura pliku jest następująca -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Majątek

Możesz zapisywać swoje obrazy, pliki js w tym folderze.

Środowisko

Ten folder zawiera szczegółowe informacje dotyczące środowiska produkcyjnego lub deweloperskiego. Folder zawiera dwa pliki.

• environment.prod.ts
• environment.ts

Oba pliki zawierają szczegółowe informacje o tym, czy plik końcowy powinien zostać skompilowany w środowisku produkcyjnym, czy w środowisku deweloperskim.

Dodatkowa struktura plików angular7-app / folder obejmuje:

favicon.ico

Jest to plik, który zwykle znajduje się w katalogu głównym witryny internetowej.

index.html

To jest plik, który jest wyświetlany w przeglądarce.

<html lang = "en"> 
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</title> 
      <base href = "/">
      <meta name = "viewport" content = "width=device-width, initial-scale=1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

Ciało ma <app-root></app-root>. To jest selektor, który jest używany wapp.component.ts plik i wyświetli szczegóły z pliku app.component.html plik.

main.ts

main.ts to plik, od którego zaczynamy tworzenie naszego projektu. Rozpoczyna się importem podstawowego modułu, którego potrzebujemy. W tej chwili, jeśli widzisz angular / core, angular / platform-browser-dynamic, app.module i environment są importowane domyślnie podczas instalacji angular-cli i konfiguracji projektu.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

PlatformBrowserDynamic (). BootstrapModule (AppModule) ma odwołanie do modułu nadrzędnego AppModule. W związku z tym, gdy jest wykonywany w przeglądarce, plik nosi nazwę index.html. Index.html odwołuje się wewnętrznie do main.ts, który wywołuje moduł nadrzędny, tj. AppModule, gdy wykonywany jest następujący kod -

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Kiedy AppModule jest wywoływany, wywołuje app.module.ts, który dalej wywołuje AppComponent w oparciu o bootstrap w następujący sposób -

bootstrap: [AppComponent]

W app.component.ts, jest selektor: app-rootktóry jest używany w pliku index.html. Spowoduje to wyświetlenie zawartości obecnej wapp.component.html.

W przeglądarce wyświetlą się:

polyfill.ts

Jest to używane głównie w celu zapewnienia zgodności z poprzednimi wersjami.

style.css

To jest plik stylu wymagany dla projektu.

test.ts

Tutaj będą obsługiwane jednostkowe przypadki testowe do testowania projektu.

tsconfig.app.json

Jest to używane podczas kompilacji, zawiera szczegóły konfiguracji, których należy użyć do uruchomienia aplikacji.

tsconfig.spec.json

Pomaga to zachować szczegóły testów.

typings.d.ts

Służy do zarządzania definicją Typescript.

Ostateczna struktura plików będzie następująca -

Większa część rozwoju z Angular 7 jest wykonywana w komponentach. Komponenty to w zasadzie klasy, które wchodzą w interakcje z plikiem .html komponentu, który jest wyświetlany w przeglądarce. Strukturę plików widzieliśmy w jednym z naszych poprzednich rozdziałów.

Struktura pliku zawiera komponent aplikacji i składa się z następujących plików -

• app.component.css
• app.component.html
• app.component.spec.ts
• app.component.ts
• app.module.ts

A jeśli podczas konfiguracji projektu wybrałeś routing kątowy, pliki związane z routingiem również zostaną dodane, a pliki będą wyglądać następująco -

• app-routing.module.ts

Powyższe pliki są tworzone domyślnie podczas tworzenia nowego projektu za pomocą polecenia angular-cli.

Jeśli otworzysz app.module.ts plik, ma kilka bibliotek, które są importowane, a także deklaratywną, która jest przypisana do komponentu aplikacji w następujący sposób -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Deklaracje zawierają zmienną AppComponent, którą już zaimportowaliśmy. To staje się komponentem macierzystym.

Teraz angular-cli ma polecenie tworzenia własnego komponentu. Jednak komponent aplikacji, który jest tworzony domyślnie, zawsze pozostanie elementem nadrzędnym, a następne utworzone komponenty będą stanowić komponenty potomne.

Uruchommy teraz polecenie, aby utworzyć komponent z poniższą linią kodu -

ng g component new-cmp

Po uruchomieniu powyższego polecenia w wierszu poleceń otrzymasz następujące dane wyjściowe -

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Teraz, jeśli przejdziemy i sprawdzimy strukturę plików, otrzymamy nowy folder new-cmp utworzony w ramach src/app teczka.

W folderze new-cmp tworzone są następujące pliki -

• new-cmp.component.css - tworzony jest plik css dla nowego komponentu.
• new-cmp.component.html - tworzony jest plik html.
• new-cmp.component.spec.ts - można to wykorzystać do testów jednostkowych.
• new-cmp.component.ts - tutaj możemy zdefiniować moduł, właściwości itp.

Zmiany są dodawane do app.module.ts w następujący sposób -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

Plik new-cmp.component.ts plik jest generowany następująco -,

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Jeśli widzisz powyższy plik new-cmp.component.ts, tworzy on nową klasę o nazwie NewCmpComponent, który implementuje OnInit, w którym znajduje się konstruktor i metoda o nazwie ngOnInit (). ngOnInit jest wywoływana domyślnie podczas wykonywania klasy.

Sprawdźmy, jak działa przepływ. Teraz komponent aplikacji, który jest tworzony domyślnie, staje się komponentem nadrzędnym. Każdy komponent dodany później staje się komponentem potomnym.

Kiedy trafimy na adres URL w "http://localhost:4200/" przeglądarka, najpierw wykonuje plik index.html pokazany poniżej -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

Powyższy plik jest zwykłym plikiem html i nie widzimy niczego, co jest drukowane w przeglądarce. Przyjrzymy się tagowi w sekcji body.

<app-root></app-root>

To jest główny znacznik utworzony domyślnie przez Angulara. Ten tag ma odniesienie wmain.ts plik.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

AppModule jest importowany z aplikacji głównego modułu nadrzędnego i to samo jest przekazywane do modułu ładowania początkowego, co powoduje ładowanie modułu appmodule.

Zobaczmy teraz app.module.ts plik -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Tutaj AppComponent jest podaną nazwą, tj. zmienną do przechowywania odwołania do app.component.tsi to samo dotyczy bootstrap. Zobaczmy terazapp.component.ts plik.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

Rdzeń kątowy jest importowany i nazywany komponentem i to samo jest używane w deklaratorze jako -

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})

W deklaracji odniesienia do selektora podane są templateUrl i styleUrl. Selektor tutaj to nic innego jak znacznik, który jest umieszczony w pliku index.html, który widzieliśmy powyżej.

Klasa AppComponent ma zmienną o nazwie title, która jest wyświetlana w przeglądarce. @Component używa szablonu templateUrl o nazwie app.component.html, który wygląda następująco -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

Zawiera tylko kod HTML i tytuł zmiennej w nawiasach klamrowych. Jest zastępowany wartością, która jest obecna w plikuapp.component.tsplik. Nazywa się to wiązaniem. Pojęcie oprawy omówimy w kolejnym rozdziale.

Teraz, gdy stworzyliśmy nowy komponent o nazwie new-cmp. To samo zostaje uwzględnione wapp.module.ts plik, gdy polecenie jest uruchamiane w celu utworzenia nowego komponentu.

app.module.ts zawiera odniesienie do utworzonego nowego komponentu.

Sprawdźmy teraz nowe pliki utworzone w new-cmp.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Tutaj również musimy zaimportować rdzeń. W deklaratorze używane jest odwołanie do składnika.

Deklarator ma selektor o nazwie app-new-cmp oraz templateUrl i styleUrl.

Plik .html o nazwie new-cmp.component.html jest następujący -

<p> 
   new-cmp works!
</p>

Jak widać powyżej, mamy kod html, czyli znacznik p. Plik stylów jest pusty, ponieważ obecnie nie potrzebujemy żadnych stylów. Ale kiedy uruchamiamy projekt, nie widzimy nic związanego z wyświetlaniem nowego komponentu w przeglądarce.

Przeglądarka wyświetla następujący ekran -

Nie widzimy nic związanego z wyświetlanym nowym komponentem. Nowo utworzony komponent ma plik .html z następującymi szczegółami -

<p>
   new-cmp works!
<p>

Ale nie otrzymujemy tego samego w przeglądarce. Przyjrzyjmy się teraz zmianom wymaganym, aby zawartość nowych komponentów została wyświetlona w przeglądarce.

Selektorapp-new-cmp'jest tworzony dla nowego komponentu z new-cmp.component.ts jak pokazano poniżej -

import { Component, OnInit } from '@angular/core';

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

Selektor, czyli app-new-cmp należy dodać w app.component.html, tj. główny element nadrzędny utworzony domyślnie w następujący sposób -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{ title }}!
   </h1>
</div>
<app-new-cmp7></app-new-cmp>

Kiedy <app-new-cmp></app-new-cmp> dodany zostanie tag, wszystko, co jest obecne w pliku .html, tj. new-cmp.component.html nowo utworzonego komponentu, zostanie wyświetlone w przeglądarce wraz z danymi komponentu nadrzędnego.

Dodajmy więcej szczegółów do nowo utworzonego komponentu i zobaczmy jak wygląda w przeglądarce.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

W klasie dodaliśmy jedną zmienną o nazwie newcomponent a wartość to „Wprowadzono do utworzonego nowego komponentu”.

Powyższa zmienna jest dodawana w new-cmp.component.html plik w następujący sposób -

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Teraz, ponieważ dołączyliśmy <app-new-cmp></app-new-cmp>selektor w app.component.html czyli .html komponentu nadrzędnego, zawartość obecna w new-cmp.component.htmlplik zostanie wyświetlony w przeglądarce. Dodamy również trochę css dla nowego komponentu w pliku new-cmp.component.css w następujący sposób -

p { 
   color: blue; 
   font-size: 25px; 
}

Dlatego dodaliśmy niebieski kolor i rozmiar czcionki jako 25 pikseli dla znaczników p.

W przeglądarce zostanie wyświetlony następujący ekran -

Podobnie możemy tworzyć komponenty i łączyć je za pomocą selektora w app.component.html plik zgodnie z naszymi wymaganiami.

Moduł w Angular odnosi się do miejsca, w którym można grupować komponenty, dyrektywy, rury i usługi, które są powiązane z aplikacją.

Jeśli tworzysz stronę internetową, nagłówek, stopka, lewa, środkowa i prawa sekcja stają się częścią modułu.

Aby zdefiniować moduł, możemy użyć NgModule. Kiedy tworzysz nowy projekt za pomocą polecenia Angular –cli, ngmodule jest tworzony wapp.module.ts plik domyślnie i wygląda następująco -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

NgModule należy zaimportować w następujący sposób -

import { NgModule } from '@angular/core';

Struktura ngmodule jest pokazana poniżej -

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})

Zaczyna się od @NgModule i zawiera obiekt, który ma deklaracje, importy, dostawców i bootstrap.

Deklaracja

Jest to szereg utworzonych komponentów. Jeśli zostanie utworzony nowy komponent, zostanie zaimportowany jako pierwszy, a odniesienie zostanie uwzględnione w deklaracjach, jak pokazano poniżej -

declarations: [ 
   AppComponent,  
   NewCmpComponent 
]

Import

Jest to zestaw modułów wymaganych do wykorzystania w aplikacji. Może być również używany przez komponenty w tablicy Deklaracja. Na przykład teraz w @NgModule widzimy zaimportowany moduł przeglądarki. Jeśli Twoja aplikacja potrzebuje formularzy, możesz dołączyć moduł z poniższym kodem -

import { FormsModule } from '@angular/forms';

Import w @NgModule będzie wyglądać następująco -

imports: [ 
   BrowserModule, 
   FormsModule 
]

Dostawcy

Obejmuje to utworzone usługi.

Bootstrap

Obejmuje to główny składnik aplikacji do uruchamiania wykonywania.

Wiązanie danych jest dostępne bezpośrednio w AngularJS i we wszystkich wersjach Angulara wydanych później. Używamy nawiasów klamrowych do wiązania danych - {{}}; proces ten nazywa się interpolacją. Widzieliśmy już w naszych poprzednich przykładach, jak zadeklarowaliśmy wartość w tytule zmiennej i to samo jest drukowane w przeglądarce.

Zmienna w app.component.html plik jest określany jako {{title}} i wartość title jest zainicjowany w app.component.ts plik i w app.component.html, wartość jest wyświetlana.

Utwórzmy teraz listę miesięcy w przeglądarce. Aby to zrobić, utworzyliśmy tablicę miesięcy wapp.component.ts w następujący sposób -

import { Component } from '@angular/core';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
}

Tablica miesiąca, która jest pokazana powyżej, ma zostać wyświetlona w menu rozwijanym w przeglądarce.

Stworzyliśmy normalny tag wyboru z opcją. W opcji użyliśmyfor loop. Plikfor loop służy do iteracji po tablicy miesięcy, która z kolei utworzy tag opcji z wartością obecną w miesiącach.

Składnia w Angular jest następująca -

*ngFor = “let I of months”

i aby uzyskać wartość miesięcy, w których ją wyświetlamy -

{{i}}

Dwa nawiasy klamrowe pomagają w wiązaniu danych. Deklarujesz zmienne w pliku app.component.ts i to samo zostanie zastąpione za pomocą nawiasów klamrowych.

Poniżej znajduje się wynik tablicy z powyższego miesiąca w przeglądarce -

Zmienna ustawiona w app.component.ts można oprawić wewnątrz app.component.htmlużywając nawiasów klamrowych. Na przykład: {{}}.

Wyświetlmy teraz dane w przeglądarce na podstawie warunku. Tutaj dodaliśmy zmienną i przypisaliśmy wartość jakotrue. Korzystając z instrukcji if, możemy ukryć / pokazać treść do wyświetlenia.

Przykład

import { Component } from '@angular/core';

@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true
}

app.component.html

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor = "let i of months">{{i}}</option> 
   </select> 
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable">Condition is valid.</span>  
   //over here based on if condition the text condition is valid is displayed. 
   //If the value of isavailable is set to false it will not display the text. 
</div>

Wynik

Wyjaśnijmy powyższy przykład za pomocą IF THEN ELSE stan: schorzenie.

Przykład

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true
}

W tym przypadku stworzyliśmy isavailablezmienna jako fałsz. Aby wydrukowaćelse warunek, będziemy musieli utworzyć plik ng-template w następujący sposób -

<ng-template #condition1>Condition is invalid</ng-template>

Pełny kod znajduje się poniżej -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable; else condition1">Condition is valid.</span> 
   <ng-template #condition1>Condition is invalid</ng-template> 
</div>

Jeśli jest używane z warunkiem else, a używaną zmienną jest condition1. To samo jest przypisane jakoid do ng-template, a gdy dostępna zmienna ma wartość false, tekst Condition is invalid jest wyświetlany.

Poniższy zrzut ekranu przedstawia ekran w przeglądarce -

Użyjmy teraz if then else stan: schorzenie.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true 
}

Teraz zrobimy zmienną isavailablejako prawda. W html warunek jest zapisany w następujący sposób -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor="let i of months">{{i}}</option>
   </select> 
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span> 
   <ng-template #condition1>Condition is valid</ng-template> 
   <ng-template #condition2>Condition is invalid</ng-template> 
</div>

Jeśli zmienna jest prawdziwa, to condition1, jeszcze condition2. Teraz tworzone są dwa szablony z id#condition1 i #condition2.

Wygląd w przeglądarce wygląda następująco -

W tym rozdziale omówimy, jak działa powiązanie zdarzeń w Angular 7. Kiedy użytkownik wchodzi w interakcję z aplikacją w postaci ruchu klawiatury, kliknięcia myszą lub najechania myszą, generuje zdarzenie. Aby wykonać jakąś czynność, trzeba sobie z nimi poradzić. W tym miejscu pojawia się powiązanie wydarzeń.

Rozważmy przykład, aby lepiej to zrozumieć.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span>
   <ng-template #condition1>Condition is valid</ng-template>
   <ng-template #condition2>Condition is invalid</ng-template>
</div>
<button (click) = "myClickFunction($event)">
   Click Me
</button>

w app.component.html plik, zdefiniowaliśmy przycisk i dodaliśmy do niego funkcję za pomocą zdarzenia click.

Poniżej znajduje się składnia definiowania przycisku i dodawania do niego funkcji.

(click) = "myClickFunction($event)"

Funkcja jest zdefiniowana w:app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "February", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to true
   myClickFunction(event) {
      //just added console.log which will display the event details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
}

Po kliknięciu przycisku sterowanie przejdzie do funkcji myClickFunction i pojawi się okno dialogowe, które wyświetla plik Button is clicked jak pokazano na poniższym zrzucie ekranu -

Styl dla przycisku został dodany w add.component.css -

button {
   background-color: #2B3BCF;
   border: none;
   color: white;
   padding: 10px 10px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 20px;
}

Dodajmy teraz zdarzenie onchange do listy rozwijanej.

Poniższy wiersz kodu pomoże Ci dodać zdarzenie zmiany do listy rozwijanej -

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)"> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid</ng-template> <ng-template #condition2>Condition is invalid</ng-template> </div> <br/> <button (click) = "myClickFunction($event)">
   Click Me
</button>

Funkcja jest zadeklarowana w app.component.ts plik -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = true; //variable is set to true
   myClickFunction(event) {
      //just added console.log which will display the event 
      details in browser on click of the button.
      alert("Button is clicked");
      console.log(event);
   }
   changemonths(event) {
      console.log("Changed month from the Dropdown");
      console.log(event);
   }
}

Wybierz miesiąc z menu, a zobaczysz komunikat konsoli „Changed month from the Dropdown”Jest wyświetlany w konsoli wraz ze zdarzeniem.

Dodajmy komunikat ostrzegawczy w app.component.ts gdy wartość z listy rozwijanej zostanie zmieniona, jak pokazano poniżej -

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true 
   myClickFunction(event) { 
      //just added console.log which will display the event 
      details in browser on click of the button. 
      alert("Button is clicked"); console.log(event); 
   } 
   changemonths(event) { 
      alert("Changed month from the Dropdown");
   } 
}

Gdy wartość na liście rozwijanej zostanie zmieniona, pojawi się okno dialogowe i następujący komunikat -

“Changed month from the Dropdown”.

Angular 7 używa <ng-template> jako tagu zamiast <template>, który jest używany w Angular2. <ng-template> był używany od czasu wydania Angular 4, a wcześniejsza wersja, tj. Angular 2, używa <template> do tego samego celu. Powodem, dla którego zaczął używać <ng-template> zamiast <template> począwszy od Angular 4, jest konflikt nazw między tagiem <template> a tagiem html <template>. Będzie całkowicie przestarzały. Była to jedna z głównych zmian wprowadzonych w wersji Angular 4.

Użyjmy teraz szablonu wraz z if else condition i zobacz wynik.

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>Welcome to {{title}}.</h1>
</div>

<div> Months :
   <select (change) = "changemonths($event)" name = "month"> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable;then condition1 else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid from template</ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> </div> <button (click) = "myClickFunction($event)">Click Me</button>

Dla tagu Span dodaliśmy if instrukcja z else warunek i wywoła szablon warunek1, w przeciwnym razie warunek2.

Szablony należy nazwać w następujący sposób -

<ng-template #condition1>Condition is valid from template</ng-template> 
<ng-template #condition2>Condition is invalid from template</ng-template>

Jeśli warunek jest prawdziwy, plik condition1 w przeciwnym razie wywoływany jest szablon condition2.

app.component.ts

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   isavailable = false; // variable is set to true
   
   myClickFunction(event) { 
      //just added console.log which will display the event details in browser on click of the button. 
      alert("Button is clicked"); 
      console.log(event); 
   }
   changemonths(event) { 
      alert("Changed month from the Dropdown"); 
   } 
}

Dane wyjściowe w przeglądarce są następujące -

Zmienna isavailablejest fałszywe, więc drukowany jest szablon condition2. Po kliknięciu przycisku zostanie wywołany odpowiedni szablon.

app.component.ts

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "Feburary", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true  
   myClickFunction(event) { 
      this.isavailable = !this.isavailable; 
      // variable is toggled onclick of the button 
   } 
   changemonths(event) {
      alert("Changed month from the Dropdown"); 
   }
}

Plik isavailable zmienna jest przełączana po kliknięciu przycisku, jak pokazano poniżej -

myClickFunction(event) { 
   this.isavailable = !this.isavailable; 
}

Po kliknięciu przycisku opartego na wartości isavailable zmienna odpowiedni szablon zostanie wyświetlony -

Jeśli przejrzysz przeglądarkę, zobaczysz, że nigdy nie dostaniesz tagu span w domenie. Poniższy przykład pomoże ci to zrozumieć.

Chociaż w app.component.html dodaliśmy tag span i <ng-template> dla stanu, jak pokazano poniżej -

<span *ngIf = "isavailable;then condition1 else condition2">
   Condition is valid.
</span> 
<ng-template #condition1>Condition is valid from template</ng-template>
<ng-template #condition2>Condition is invalid from template</ng-template>

Nie widzimy tagu span, a także <ng-template> w strukturze dom, gdy sprawdzamy to samo w przeglądarce.

Poniższy wiersz kodu w html pomoże nam uzyskać tag span w dom -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select (change) = "changemonths($event)" name = "month"> <option *ngFor = "let i of months">{{i}}</option> </select> </div> <br/> <div> <span *ngIf = "isavailable; else condition2"> Condition is valid. </span> <ng-template #condition1>Condition is valid from template </ng-template> <ng-template #condition2>Condition is invalid from template</ng-template> </div> <button (click) = "myClickFunction($event)">Click Me</button>

Jeśli usuniemy thenwarunek, otrzymujemy w przeglądarce komunikat „Stan jest prawidłowy”, a tag span jest również dostępny w domenie. Na przykład wapp.component.ts, stworzyliśmy isavailable zmienna jako prawda.

Dyrektywy w Angular to klasa js, która jest zadeklarowana jako @directive. Mamy 3 dyrektywy w Angular. Dyrektywy są wymienione poniżej -

Dyrektywy składowe

Tworzą one główną klasę zawierającą szczegółowe informacje o tym, jak komponent powinien być przetwarzany, tworzony i używany w czasie wykonywania.

Dyrektywy strukturalne

Dyrektywa strukturalna zasadniczo zajmuje się manipulowaniem elementami dom. Dyrektywy strukturalne mają znak * przed dyrektywą. Na przykład,*ngIf i *ngFor.

Dyrektywy atrybutów

Dyrektywy atrybutów dotyczą zmiany wyglądu i zachowania elementu dom. Możesz tworzyć własne dyrektywy, jak wyjaśniono w poniższej sekcji.

Jak tworzyć niestandardowe dyrektywy?

W tej sekcji omówimy dyrektywy niestandardowe, które mają być używane w komponentach. Dyrektywy niestandardowe są tworzone przez nas i nie są standardem.

Zobaczmy, jak utworzyć dyrektywę niestandardową. Utworzymy dyrektywę za pomocą wiersza poleceń. Polecenie do utworzenia dyrektywy za pomocą wiersza poleceń jest następujące -

ng g directive nameofthedirective 
e.g 
ng g directive changeText

Pojawia się w wierszu poleceń, jak podano w poniższym kodzie -

C:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)

Powyższe pliki, tj. Change-text.directive.spec.ts i change-text.directive.ts są tworzone, a plik app.module.ts jest aktualizowany.

app.module.ts

import { BrowserModule } from'@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from'./new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive';

@NgModule({ 
   declarations: [ 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Plik ChangeTextDirectiveklasa jest zawarta w deklaracjach w powyższym pliku. Klasa jest również importowana z pliku podanego poniżej -

change-text.directive

import { Directive } from '@angular/core';

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

Powyższy plik ma dyrektywę i ma również właściwość selektora. Cokolwiek zdefiniujemy w selektorze, to samo musi pasować w widoku, w którym przypisujemy dyrektywę custom.

W widoku app.component.html dodajmy dyrektywę w następujący sposób -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>
<div style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>

Zmiany zapiszemy w change-text.directive.ts plik w następujący sposób -

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive.";
   }
}

W powyższym pliku znajduje się klasa o nazwie ChangeTextDirective i konstruktor, który przyjmuje element typu ElementRef, co jest obowiązkowe. Element zawiera wszystkie szczegóły, do którychChange Text dyrektywy.

Dodaliśmy element console.log. Wynik tego samego można zobaczyć w konsoli przeglądarki. Tekst elementu również zostanie zmieniony, jak pokazano powyżej.

Teraz przeglądarka pokaże następujące informacje -

Szczegóły elementu, dla którego selektor dyrektywy są podane w konsoli. Ponieważ dodaliśmychangeText dyrektywy do znacznika span, zostaną wyświetlone szczegóły elementu span.

W tym rozdziale omówimy rury w Angular 7. Rury były wcześniej nazywane filtrami w Angular1, a od Angular2 dalej.

| znak służy do przekształcania danych. Poniżej znajduje się składnia tego samego -

{{ Welcome to Angular 7 | lowercase}}

Pobiera liczby całkowite, ciągi znaków, tablice i datę jako dane wejściowe oddzielone | przekonwertować w wymaganym formacie i wyświetlić to samo w przeglądarce.

Rozważmy kilka przykładów użycia rur. Tutaj chcemy wyświetlić tekst nadany wielkimi literami. Można to zrobić za pomocą rur w następujący sposób -

W pliku app.component.ts zdefiniowaliśmy zmienną tytułu w następujący sposób -

app.component.ts

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'Angular 7 Project!'; 
}

Poniższy wiersz kodu przechodzi do app.component.html plik -

<b>{{title | uppercase}}</b><br/> 
<b>{{title | lowercase}}</b>

Przeglądarka pojawi się, jak pokazano na poniższym zrzucie ekranu -

Oto kilka wbudowanych rur dostępnych z kątowymi -

• Lowercasepipe
• Uppercasepipe
• Datepipe
• Currencypipe
• Jsonpipe
• Percentpipe
• Decimalpipe
• Slicepipe

Widzieliśmy już małe i wielkie litery. Zobaczmy teraz, jak działają inne rury. Poniższy wiersz kodu pomoże nam zdefiniować wymagane zmienne wapp.component.ts plik -

import { Component } from '@angular/core';
@Component({ 
   selector: 'app-root',
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   todaydate = new Date(); 
   jsonval = {name:'Rox', age:'25', address:{a1:'Mumbai', a2:'Karnataka'}}; 
   months = ["Jan", "Feb", "Mar", "April", "May", "Jun", "July", "Aug", 
      "Sept", "Oct", "Nov", "Dec"]; 
}

Użyjemy rur w app.component.html plik, jak pokazano poniżej -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "width:100%;"> 
   <div style = "width:40%;float:left;border:solid 1px black;"> 
      <h1>Uppercase Pipe</h1> 
      <b>{{title | uppercase}}</b>
      <br/> 
      
      <h1>Lowercase Pipe</h1> 
      <b>{{title | lowercase}}</b> 
      <h1>Currency Pipe</h1> 
      <b>{{6589.23 | currency:"USD"}}</b>
      <br/> 
      
      <b>{{6589.23 | currency:"USD":true}}</b> 
      // Boolean true is used to get the sign of the currency. 
      <h1>Date pipe</h1> 
      <b>{{todaydate | date:'d/M/y'}}</b>
      <br/> 
      
      <b>{{todaydate | date:'shortTime'}}</b> 
      <h1>Decimal Pipe</h1> 
      <b>{{ 454.78787814 | number: '3.4-4' }}</b> 
      // 3 is for main integer, 4 -4 are for integers to be displayed. 
   </div> 
   
   <div style = "width:40%;float:left;border:solid 1px black;"< 
      <h1<Json Pipe</h1> 
      <b>{{ jsonval | json }}</b>
      <h1>Percent Pipe</h1> 
      <b>{{00.54565 | percent}}</b> 
      <h1>Slice Pipe</h1> 
      <b>{{months | slice:2:6}}</b> 
      // here 2 and 6 refers to the start and the end index 
   </div> 
</div>

Poniższe zrzuty ekranu pokazują dane wyjściowe dla każdego potoku -

Jak stworzyć niestandardową rurę?

Aby utworzyć niestandardową rurę, utworzyliśmy nowy plik ts. Tutaj chcemy utworzyć niestandardowy potok sqrt. Nadaliśmy plikowi taką samą nazwę i wygląda ona następująco -

app.sqrt.ts

import {Pipe, PipeTransform} from '@angular/core'; 
@Pipe ({ 
   name : 'sqrt'
}) 
export class SqrtPipe implements PipeTransform {
   transform(val : number) : number {
      return Math.sqrt(val);
   }
}

Aby stworzyć niestandardową rurę, musimy zaimportować Pipe and Pipe Transform z Angular / core. W dyrektywie @Pipe musimy nadać nazwę naszemu potokowi, który będzie używany w naszym pliku .html. Ponieważ tworzymy potok sqrt, nadamy mu nazwę sqrt.

Idąc dalej, musimy utworzyć klasę, a nazwa klasy to SqrtPipe. Ta klasa zaimplementuje metodę PipeTransform.

Metoda transformacji zdefiniowana w klasie przyjmie argument jako liczbę i zwróci liczbę po obliczeniu pierwiastka kwadratowego.

Ponieważ utworzyliśmy nowy plik, musimy dodać to samo w app.module.ts. Odbywa się to w następujący sposób -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Stworzyliśmy app.sqrt.tsklasa. Musimy zaimportować to samo wapp.module.tsi określ ścieżkę do pliku. Musi być również uwzględniony w deklaracjach, jak pokazano powyżej.

Zobaczmy teraz wywołanie wykonane do potoku sqrt w pliku app.component.html plik.

<h1>Custom Pipe</h1> 
<b>Square root of 25 is: {{25 | sqrt}}</b> 
<br/> 
<b>Square root of 729 is: {{729 | sqrt}}</b>

Oto wynik -

Zasadniczo routing oznacza nawigację między stronami. Widziałeś wiele witryn z linkami kierującymi do nowej strony. Można to osiągnąć za pomocą routingu. Tutaj strony, do których się odnosimy, będą miały postać komponentów. Widzieliśmy już, jak stworzyć komponent. Stwórzmy teraz komponent i zobaczmy, jak używać z nim routingu.

Podczas konfiguracji projektu uwzględniliśmy już moduł routingu i to samo jest dostępne w app.module.ts, jak pokazano poniżej -

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule jest dodawany, jak pokazano powyżej, i uwzględniony w tablicy importów.

Szczegóły pliku app-routing.module podano poniżej -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [
      RouterModule.forRoot(routes)
   ],
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Tutaj musimy zauważyć, że ten plik jest generowany domyślnie, gdy trasowanie jest dodawane podczas konfiguracji projektu. Jeśli nie zostaną dodane, powyższe pliki należy dodać ręcznie.

W powyższym pliku zaimportowaliśmy Routes and RouterModule z @ angular / router.

Jest stała routeszdefiniowano, który jest typu Routes. Jest to tablica zawierająca wszystkie trasy, których potrzebujemy w naszym projekcie.

Stałe trasy są przekazywane do RouterModule, jak pokazano w @NgModule. Aby wyświetlić użytkownikowi szczegóły routingu, musimy dodać dyrektywę <router-outlet> w miejscu, w którym chcemy wyświetlać widok.

To samo jest dodawane w app.component.html, jak pokazano poniżej

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

Teraz stwórzmy 2 komponenty o nazwie as Home i Contact Us i nawiguj między nimi za pomocą routingu.

Strona główna komponentów

Najpierw omówimy Home. Poniżej znajduje się składnia strony głównej komponentu -

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

Komponent Skontaktuj się z nami

Poniżej przedstawiono składnię komponentu Skontaktuj się z nami -

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

Skończyliśmy z tworzeniem komponentów do domu i skontaktuj się z nami. Poniżej znajdują się szczegółowe informacje na temat komponentów w app.module.ts -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Teraz dodajmy szczegóły tras w app-routing.module.ts, jak pokazano poniżej -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

Tablica tras zawiera szczegóły komponentów wraz ze ścieżką i komponentem. Wymagany komponent jest importowany, jak pokazano powyżej.

W tym miejscu musimy zauważyć, że komponenty, których potrzebujemy do routingu, są importowane do app.module.ts, a także do app-routing.module.ts. Zaimportujmy je w jednym miejscu, czyli w app-routing.module.ts.

Dlatego utworzymy tablicę komponentów, które będą używane do routingu, wyeksportujemy tablicę do pliku app-routing.module.ts i ponownie zaimportujemy ją do app.module.ts. Mamy więc wszystkie komponenty używane do routingu w app-routing.module.ts.

Tak to zrobiliśmy app-routing.module.ts -

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

Tablica komponentów, tj. RoutingComponent, jest importowana do app.module.ts w następujący sposób -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

Więc teraz kończymy definiowanie tras. Musimy wyświetlić to samo użytkownikowi, więc dodajmy dwa przyciski, Home i Contact Us w app.component.html, a po kliknięciu odpowiedniego przycisku wyświetli widok komponentu wewnątrz dyrektywy <router-outlet>, którą dodane w add.component.html.

Utwórz przycisk wewnątrz app.component.html i podaj ścieżkę do utworzonych tras.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

W .html dodaliśmy linki kotwiące, Home i Contact us oraz użyliśmy routerLink, aby podać ścieżkę do tras, które utworzyliśmy w app-routing.module.ts.

Przetestujmy teraz to samo w przeglądarce -

W ten sposób otrzymujemy to w przeglądarce. Dodajmy trochę stylizacji, aby linki wyglądały dobrze.

Dodaliśmy następujący css w app.component.css -

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

To jest wyświetlanie linków w przeglądarce -

Kliknij link Strona główna, aby zobaczyć szczegóły komponentów domu, jak pokazano poniżej -

Kliknij Skontaktuj się z nami, aby zobaczyć szczegóły jego komponentu, jak podano poniżej -

Po kliknięciu linku zobaczysz również zmianę adresu URL strony w pasku adresu. Dołącza szczegóły ścieżki na końcu strony, jak widać na zrzucie ekranu pokazanym powyżej.

Możemy spotkać się z sytuacją, w której potrzebujemy kodu, który będzie używany w każdym miejscu strony. Na przykład może to dotyczyć połączenia danych, które musi być współużytkowane przez komponenty. Osiąga się to za pomocą usług. Dzięki usługom możemy uzyskać dostęp do metod i właściwości w innych komponentach w całym projekcie.

Aby utworzyć usługę, musimy skorzystać z wiersza poleceń, jak podano poniżej -

ng g service myservice

C:\projectA7\angular7-app>ng g service myservice 
CREATE src/app/myservice.service.spec.ts (348 bytes) 
CREATE src/app/myservice.service.ts (138 bytes)

Pliki utworzone w folderze aplikacji są następujące -

Poniżej znajdują się utworzone pliki, które są wyświetlane u dołu - myservice.service.specs.ts i myservice.service.ts.

myservice.service.ts

import { Injectable } from '@angular/core';
@Injectable({
   providedIn: 'root' 
}) 
export class MyserviceService {
   constructor() { }
}

W tym przypadku moduł do wstrzykiwania jest importowany z @ angular / core. Zawiera metodę @Injectable i klasę o nazwie MyserviceService. W tej klasie stworzymy naszą funkcję serwisową.

Przed utworzeniem nowej usługi musimy uwzględnić usługę utworzoną w głównym rodzicu app.module.ts.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Zaimportowaliśmy usługę z nazwą klasy i ta sama klasa jest używana w dostawcach. Wróćmy teraz do klasy usług i utwórzmy funkcję usługi.

W klasie service stworzymy funkcję, która wyświetli dzisiejszą datę. Możemy użyć tej samej funkcji w głównym komponencie nadrzędnym app.component.ts, a także w nowym komponencie new-cmp.component.ts, który stworzyliśmy w poprzednim rozdziale.

Zobaczmy teraz, jak funkcja wygląda w usłudze i jak jej używać w komponentach.

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
export class MyserviceService { 
   constructor() { } 
   showTodayDate() { 
      let ndate = new Date(); 
      return ndate; 
   }  
}

W powyższym pliku usługi utworzyliśmy funkcję showTodayDate. Teraz zwrócimy nową utworzoną datę (). Zobaczmy, jak możemy uzyskać dostęp do tej funkcji w klasie komponentów.

app.component.ts

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';
@Component({ selector: 'app-root', 
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   todaydate;
   constructor(private myservice: MyserviceService) {}
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

Funkcja ngOnInit jest wywoływana domyślnie w każdym utworzonym komponencie. Data jest pobierana z usługi, jak pokazano powyżej. Aby uzyskać więcej szczegółów dotyczących usługi, musimy najpierw dołączyć usługę do pliku ts komponentu.

Wyświetlimy datę w pliku .html, jak pokazano poniżej -

app.component.html

{{todaydate}} 
<app-new-cmp></app-new-cmp>

Zobaczmy teraz, jak korzystać z usługi w nowo utworzonym komponencie.

new-cmp.component.ts

import { Component, OnInit } from '@angular/core'; 
import { MyserviceService } from './../myservice.service';

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit { 
   newcomponent = "Entered in new component created"; 
   todaydate; 
   constructor(private myservice: MyserviceService) { }
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
   } 
}

W nowym komponencie, który stworzyliśmy, musimy najpierw zaimportować żądaną usługę i uzyskać dostęp do jej metod i właściwości. Sprawdź podświetlony kod. dzisiejsza data jest wyświetlana w html komponentu w następujący sposób -

new-cmp.component.html

<p> 
   {{newcomponent}} 
</p> 
<p> 
   Today's Date : {{todaydate}} 
</p>

Selektor nowego komponentu jest używany w pliku app.component.html. Zawartość powyższego pliku html zostanie wyświetlona w przeglądarce, jak pokazano poniżej -

Jeśli zmienisz właściwość usługi w dowolnym komponencie, zmieni się to również w innych komponentach. Zobaczmy teraz, jak to działa.

Zdefiniujemy jedną zmienną w usłudze i użyjemy jej w rodzicu i nowym komponencie. Ponownie zmienimy właściwość w komponencie nadrzędnym i zobaczymy, czy to samo zostało zmienione w nowym komponencie, czy nie.

W myservice.service.ts, stworzyliśmy właściwość i użyliśmy jej w innym nadrzędnym i nowym komponencie.

import { Injectable } from '@angular/core';
@Injectable({ 
   providedIn: 'root' 
}) 
export class MyserviceService { 
   serviceproperty = "Service Created"; 
   constructor() { } 
   showTodayDate() { 
      let ndate = new Date(); 
      return ndate; 
   } 
}

Użyjmy teraz servicepropertyzmienna w innych składnikach. Wapp.component.ts, uzyskujemy dostęp do zmiennej w następujący sposób -

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   todaydate; 
   componentproperty; 
   constructor(private myservice: MyserviceService) {} 
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
      console.log(this.myservice.serviceproperty); 
      this.myservice.serviceproperty = "component created"; 
      // value is changed. this.componentproperty = 
      this.myservice.serviceproperty; 
   } 
}

Teraz pobierzemy zmienną i będziemy pracować na console.log. W następnym wierszu zmienimy wartość zmiennej na „utworzony komponent”. Zrobimy to samo w new-cmp.component.ts.

import { Component, OnInit } from '@angular/core'; 
import { MyserviceService } from './../myservice.service';
@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
})
export class NewCmpComponent implements OnInit { 
   todaydate;
   newcomponentproperty; newcomponent = "Entered in 
   newcomponent"; constructor(private myservice: 
   MyserviceService) {} 
   ngOnInit() { 
      this.todaydate = this.myservice.showTodayDate(); 
      this.newcomponentproperty = 
      this.myservice.serviceproperty; 
   } 
}

W powyższym komponencie nic nie zmieniamy, ale bezpośrednio przypisujemy właściwość do właściwości komponentu.

Teraz, gdy uruchomisz go w przeglądarce, właściwość usługi zostanie zmieniona, ponieważ jej wartość zostanie zmieniona w app.component.ts i to samo zostanie wyświetlone dla nowego-cmp.component.ts.

Sprawdź również wartość w konsoli, zanim zostanie zmieniona.

Oto pliki app.component.html i new-cmp.component.html -

app.component.html

<h3>{{todaydate}}>/h3> 
<h3> Service Property : {{componentproperty}} </h3> 
<app-new-cmp></app-new-cmp>

new-cmp.component.html

<h3>{{newcomponent}} </h3> 
<h3> Service Property : {{newcomponentproperty}} </h3> 
<h3> Today's Date : {{todaydate}} </h3>

HttpClient pomoże nam pobrać zewnętrzne dane, przesłać do nich itp. Aby skorzystać z usługi http, musimy zaimportować moduł http. Rozważmy przykład, aby zrozumieć, jak korzystać z usługi http.

Aby rozpocząć korzystanie z usługi http, musimy zaimportować moduł do pliku app.module.ts, jak pokazano poniżej -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Jeśli widzisz podświetlony kod, zaimportowaliśmy plik HttpClientModule od @angular/common/http i to samo jest również dodawane do tablicy importów.

Dane z serwera będziemy pobierać za pomocą zadeklarowanego powyżej modułu httpclient. Zrobimy to wewnątrz usługi, którą stworzyliśmy w poprzednim rozdziale i wykorzystamy dane wewnątrz komponentów, które chcemy.

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

Dodano metodę o nazwie getData, która zwraca dane pobrane dla podanego adresu URL.

Metoda getData jest wywoływana z app.component.ts w następujący sposób -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public persondata = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.persondata = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.persondata);
      });
   }
}

Wywołujemy metodę getData, która zwraca obserwowalne dane typu. Stosowana jest na nim metoda subskrypcji, która ma funkcję strzałki z potrzebnymi danymi.

Kiedy sprawdzamy w przeglądarce, konsola wyświetla dane, jak pokazano poniżej -

Wykorzystajmy dane w app.component.html w następujący sposób -

<h3>Users Data</h3>
<ul>
   <li *ngFor="let item of persondata; let i = index"<
      {{item.name}}
   </li>
</ul>

Output

Angular CLI ułatwia rozpoczęcie dowolnego projektu Angular. Angular CLI zawiera polecenia, które pomagają nam szybko tworzyć i rozpoczynać projekt. Przejdźmy teraz przez dostępne polecenia, aby utworzyć projekt, komponent i usługi, zmienić port itp.

Aby pracować z Angular CLI, musimy mieć go zainstalowanego w naszym systemie. Użyjmy następującego polecenia do tego samego -

npm install -g @angular/cli

Aby stworzyć nowy projekt, możemy uruchomić następujące polecenie w linii poleceń i projekt zostanie utworzony.

ng new PROJECT-NAME 
cd PROJECT-NAME 
ng serve //

ng serve // will compile and you can see the output of your project in the browser −

http://localhost:4200/

4200 to domyślny port używany podczas tworzenia nowego projektu. Możesz zmienić port za pomocą następującego polecenia -

ng serve --host 0.0.0.0 --port 4201

Polecenie Angular Update

Jeśli chcesz zaktualizować aplikację i jej zależności, możesz użyć następującego polecenia -

ng update @angular/cli @angular/core

Zaktualizuje podstawowe ramy do najnowszej wersji, tj. Angular 7, a także angular-cli. Możesz użyć powyższego polecenia z następującymi opcjami -

Lista ważnych poleceń kątowych

W poniższej tabeli wymieniono kilka ważnych poleceń wymaganych podczas pracy z projektami Angular 7 -

Sr.No	Polecenia i opis
1	Component ng g komponent nowy komponent
2	Directive ng g dyrektywa nowa-dyrektywa
3	Pipe ng g pipe new-pipe
4	Service ng g service new-service
5	Module moduł ng g my-module
6	Test ng test
7	Build ng build --configuration = production // dla środowiska produkcyjnego ng build --configuration = staging // do określania środowiska

Za każdym razem, gdy tworzony jest nowy moduł, komponent lub usługa, odniesienie do nich jest aktualizowane w module nadrzędnym app.module.ts.

W tym rozdziale zobaczymy, jak używane są formularze w Angular 7. Omówimy dwa sposoby pracy z formularzami -

• Formularz oparty na szablonie
• Forma oparta na modelu

Formularz oparty na szablonie

W przypadku formularza opartego na szablonie większość pracy jest wykonywana w szablonie. W przypadku formy opartej na modelu większość pracy jest wykonywana w klasie komponentów.

Rozważmy teraz pracę nad formularzem opartym na szablonie. Stworzymy prosty formularz logowania i dodamy w formularzu identyfikator e-mail, hasło oraz przycisk przesyłania. Na początek musimy zaimportować do FormsModule z @ angular / forms, co jest wykonywane w app.module.ts w następujący sposób -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

Więc w app.module.ts, zaimportowaliśmy FormsModule i to samo jest dodawane do tablicy importów, jak pokazano w podświetlonym kodzie.

Stwórzmy teraz naszą formę w app.component.html plik.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)"> 
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel> 
   <br/> 
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel> 
   <br/> 
   <input type = "submit" value = "submit"> 
</form>

Stworzyliśmy prosty formularz z tagami wejściowymi zawierającymi identyfikator e-mail, hasło i przycisk przesyłania. Przypisaliśmy mu typ, nazwę i symbol zastępczy.

W formularzach opartych na szablonach musimy utworzyć kontrolki formularza modelu, dodając ngModel dyrektywy i nameatrybut. Dlatego wszędzie tam, gdzie chcemy, aby Angular miał dostęp do naszych danych z formularzy, dodaj ngModel do tego tagu, jak pokazano powyżej. Teraz, jeśli musimy odczytać emailid i passwd, musimy dodać do niego ngModel.

Jeśli widzisz, dodaliśmy również ngForm do pliku #userlogin. PlikngFormdyrektywę należy dodać do utworzonego szablonu formularza. Dodaliśmy również funkcjęonClickSubmit i przypisane userlogin.value do tego.

Utwórzmy teraz funkcję w app.component.ts i pobierz wartości wprowadzone w formularzu.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css']
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

W powyższym pliku app.component.ts zdefiniowaliśmy funkcję onClickSubmit. Po kliknięciu przycisku przesyłania formularza sterowanie przejdzie do powyższej funkcji.

CSS dla formularza logowania zostanie dodany w app.component.css -

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

Tak wyświetla się przeglądarka -

Formularz wygląda tak, jak pokazano poniżej. Wprowadźmy do niego dane, a w funkcji przesyłania zostanie ostrzeżony identyfikator e-mail, jak pokazano poniżej -

Forma oparta na modelu

W formularzu opartym na modelu musimy zaimportować ReactiveFormsModule z @ angular / Forms i użyć tego samego w tablicy importów.

Następuje zmiana app.module.ts.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

W app.component.ts, musimy zaimportować kilka modułów dla formularza opartego na modelu. Na przykład,import { FormGroup, FormControl } od '@angular/forms”.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service'; 
import { FormGroup, FormControl } from '@angular/forms';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

Dane formularza zmiennej są inicjowane na początku klasy i to samo jest inicjowane z FormGroup, jak pokazano powyżej. Zmienne emailid i passwd są inicjalizowane z wartościami domyślnymi, które mają być wyświetlane w formularzu. Możesz pozostawić to puste na wypadek, gdybyś chciał.

W ten sposób wartości będą widoczne w interfejsie użytkownika formularza.

Użyliśmy formdata do zainicjowania wartości formularza; musimy użyć tego samego w formularzu UIapp.component.html.

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" > 
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid"> 
      <br/> 
      
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd"> 
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In"> 
   </form>
</div> 
<p> Email entered is : {{emailid}} </p>

W pliku .html użyliśmy formGroup w nawiasach kwadratowych dla formularza; na przykład [formGroup] = ”formdata”. Po przesłaniu funkcja jest wywoływanaonClickSubmit dla którego formdata.value przeszedł.

Znacznik wejściowy formControlNamejest używany. Ma wartość, której użyliśmy wapp.component.ts plik.

Po kliknięciu przycisku Prześlij, formant przejdzie do funkcji onClickSubmit, który jest zdefiniowany w app.component.ts plik.

Po kliknięciu Zaloguj się, wartość zostanie wyświetlona, ​​jak pokazano na powyższym zrzucie ekranu.

Walidacja formularza

Omówmy teraz walidację formularza za pomocą formularza opartego na modelu. Możesz użyć wbudowanej walidacji formularza lub użyć niestandardowego podejścia do walidacji. Wykorzystamy oba podejścia w formularzu. Będziemy kontynuować ten sam przykład, który stworzyliśmy w jednej z naszych poprzednich sekcji. W Angular 7 musimy importowaćValidators od @angular/forms jak pokazano poniżej -

import { FormGroup, FormControl, Validators} from '@angular/forms'

Angular ma wbudowane walidatory, takie jak mandatory field, minlength, maxlength, i pattern. Dostęp do nich można uzyskać za pomocą modułu Validators.

Możesz po prostu dodać walidatory lub tablicę walidatorów wymaganych do poinformowania Angular, czy dane pole jest obowiązkowe. Spróbujmy teraz tego samego na jednym z wejściowych pól tekstowych, tj. Identyfikatorze e-mail. Dla identyfikatora e-mail dodaliśmy następujące parametry walidacji -

• Required
• Dopasowanie wzorców

W ten sposób kod przechodzi walidację w app.component.ts.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

W Validators.compose, możesz dodać listę rzeczy, które chcesz sprawdzić w polu wejściowym. W tej chwili dodaliśmyrequired i pattern matching parametry, aby pobierać tylko prawidłowy adres e-mail.

w app.component.html, przycisk przesyłania jest wyłączony, jeśli którykolwiek z danych wejściowych formularza jest nieprawidłowy. Odbywa się to w następujący sposób -

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)"> 
      <input type = "text" class = "fortextbox" name = "emailid" 
         placeholder = "emailid" formControlName = "emailid"> 
      <br/> 
    
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/> 
      
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In"> 
   </form> 
</div>
<p> Email entered is : {{emailid}} </p>

W przypadku przycisku przesyłania dodaliśmy wyłączone w nawiasach kwadratowych, które mają następującą wartość.

!formdata.valid.

Tak więc, jeśli formdata.valid jest niepoprawny, przycisk pozostanie wyłączony i użytkownik nie będzie mógł go przesłać.

Zobaczmy, jak to działa w przeglądarce -

W powyższym przypadku wprowadzony identyfikator e-mail jest nieprawidłowy, dlatego przycisk logowania jest wyłączony. Spróbujmy teraz wprowadzić prawidłowy identyfikator e-mail i zobaczmy różnicę.

Teraz wprowadzony identyfikator e-mail jest prawidłowy. W ten sposób widzimy, że przycisk logowania jest włączony, a użytkownik będzie mógł go przesłać. Dzięki temu wprowadzony identyfikator e-mail jest wyświetlany na dole.

Spróbujmy teraz wypróbować niestandardową walidację za pomocą tego samego formularza. W celu walidacji niestandardowej możemy zdefiniować własną funkcję niestandardową i dodać do niej wymagane szczegóły. Zobaczymy teraz poniższy przykład tego samego.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

W powyższym przykładzie utworzyliśmy funkcję passwordvalidation i to samo zostało użyte w poprzedniej sekcji w formancie - passwd: new FormControl("", this.passwordvalidation).

W utworzonej przez nas funkcji sprawdzimy, czy długość wprowadzonych znaków jest odpowiednia. Jeśli znaków jest mniej niż pięć, powróci z hasłem true, jak pokazano powyżej - return {"passwd": true} ;. Jeśli znaków jest więcej niż pięć, uzna to za prawidłowe i logowanie zostanie włączone.

Zobaczmy teraz, jak to jest wyświetlane w przeglądarce -

Wprowadziliśmy tylko trzy znaki w haśle i logowanie jest wyłączone. Aby umożliwić logowanie, potrzebujemy więcej niż pięciu znaków. Wprowadźmy teraz prawidłową długość znaków i sprawdźmy.

Logowanie jest włączone, ponieważ zarówno identyfikator e-mail, jak i hasło są prawidłowe. E-mail jest wyświetlany u dołu, gdy się logujemy.

Jest to jedna z nowych funkcji dodanych do Angular 7, nazywana wirtualnym przewijaniem. Ta funkcja jest dodana do CDK (Component Development Kit). Wirtualne przewijanie pokazuje widoczne elementy domeny użytkownikowi, gdy użytkownik przewija, wyświetlana jest następna lista. Zapewnia to szybsze działanie, ponieważ pełna lista nie jest ładowana za jednym razem i ładowana tylko zgodnie z widocznością na ekranie.

Dlaczego potrzebujemy modułu wirtualnego przewijania?

Weź pod uwagę, że masz interfejs użytkownika z dużą listą, na której jednoczesne ładowanie wszystkich danych może powodować problemy z wydajnością. Nowa funkcja Angular 7 Virtual Scrolling dba o ładowanie elementów, które są widoczne dla użytkownika. W miarę przewijania przez użytkownika wyświetlana jest następna lista elementów dom widocznych dla użytkownika. Daje to szybsze wrażenia, a przewijanie jest również bardzo płynne.

Dodajmy zależność do naszego projektu -

npm install @angular/cdk –save

Skończyliśmy z instalacją zależności dla modułu wirtualnego przewijania.

Będziemy pracować na przykładzie, aby lepiej zrozumieć, w jaki sposób możemy wykorzystać moduł wirtualnego przewijania w naszym projekcie.

Najpierw dodamy do środka wirtualny moduł przewijania app.module.ts w następujący sposób -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

W app.module.ts zaimportowaliśmy ScrollDispatchModule i to samo zostało dodane do tablicy importów, jak pokazano w powyższym kodzie.

Następnym krokiem jest pobranie danych do wyświetlenia na ekranie. Będziemy nadal korzystać z usługi, którą stworzyliśmy w poprzednim rozdziale.

Będziemy pobierać dane z adresu url, https://jsonplaceholder.typicode.com/photosktóry zawiera dane dla około 5000 obrazów. Otrzymamy z niego dane i wyświetlimy je użytkownikowi za pomocą wirtualnego modułu przewijania.

Szczegóły w url, https://jsonplaceholder.typicode.com/photos są następujące -

Są to dane json, które zawierają adres URL obrazu i adres URL miniatury. Pokażemy URL miniatury użytkownikom.

Poniżej znajduje się usługa, która pobierze dane -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "https://jsonplaceholder.typicode.com/photos";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

Zadzwonimy do usługi z app.component.ts w następujący sposób -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public albumdetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.albumdetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.albumdetails);
      });
   }
}

Teraz zmienna albumdetails zawiera wszystkie dane z interfejsu API, a całkowita liczba to 5000.

Teraz, gdy mamy już dane gotowe do wyświetlenia, popracujmy w app.component.html, aby wyświetlić dane.

Musimy dodać tag, <cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>do pracy z modułem wirtualnego przewijania. Tag należy dodać do pliku .html, w którym mają być wyświetlane dane.

Oto działanie <cdk-virtual-scroll-viewport> w app.component.html.

<h3>Angular 7 - Virtual Scrolling</h3>
<cdk-virtual-scroll-viewport [itemSize] = "20">
   <table>
      <thead>
         <tr>
            <td>ID</td>
            <td>ThumbNail</td>
         </tr>
      </thead>
      <tbody>
         <tr *cdkVirtualFor = "let album of albumdetails">
            <td>{{album.id}}</td>
            <td>
               <img src = "{{album.thumbnailUrl}}" width = "100" height = "100"/>
            </td>
         </tr>
      </tbody>
   </table>
</cdk-virtual-scroll-viewport>

Na ekranie wyświetlamy użytkownikowi identyfikator i adres URL miniatury. Do tej pory używaliśmy głównie * ngFor, ale w środku<cdk-virtual-scroll-viewport>, musimy użyć * cdkVirtualFor, aby zapętlić dane.

Przechodzimy w pętli przez zmienną albumdetails, która jest umieszczana w app.component.html. Wirtualny znacznik [itemSize] = "20" ma przypisany rozmiar, który będzie wyświetlał liczbę elementów w oparciu o wysokość modułu wirtualnego przewijania.

CSS związany z modułem wirtualnego przewijania wygląda następująco -

table {
   width: 100%;
}
cdk-virtual-scroll-viewport {
   height: 500px;
}

Wysokość podana dla wirtualnego zwoju to 500px. Obrazy, które mieszczą się na tej wysokości, zostaną wyświetlone użytkownikowi. Skończyliśmy z dodaniem niezbędnego kodu, aby wyświetlić nasz moduł wirtualnego przewijania.

Dane wyjściowe modułu wirtualnego przewijania w przeglądarce są następujące -

Widzimy, że pierwsze 4 obrazy są wyświetlane użytkownikowi. Podaliśmy wysokość 500px. W tabeli wyświetlane jest przewijanie, gdy użytkownik przewija, obrazy, które zmieszczą się na tej wysokości, zostaną wyświetlone, jak pokazano poniżej -

Wymagane obrazy są ładowane podczas przewijania przez użytkownika. Ta funkcja jest bardzo przydatna pod względem wydajności. Na początku nie ładuje wszystkich 5000 obrazów, zamiast tego, gdy użytkownik przewija, adresy URL są wywoływane i wyświetlane.

Nowa funkcja Drag and Drop dodana do Angular 7 CDK pomaga przeciągać i upuszczać elementy z listy. Zrozumiemy działanie modułu Drag and Drop na przykładzie. Funkcja została dodana do cdk. Najpierw musimy pobrać zależność, jak pokazano poniżej -

npm install @angular/cdk --save

Po wykonaniu powyższego kroku. Zaimportujmy moduł przeciągnij i upuść w app.module.ts, jak pokazano poniżej -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

DragDropModule jest importowany z '@angular/cdk/drag-drop' a moduł jest dodawany do importu tablicy, jak pokazano powyżej.

Będziemy używać informacji z interfejsu API (http://jsonplaceholder.typicode.com/users) do wyświetlenia na ekranie. Mamy usługę, która pobierze dane z API, jak pokazano poniżej -

myservice.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class MyserviceService {
   private finaldata = [];
   private apiurl = "http://jsonplaceholder.typicode.com/users";
   constructor(private http: HttpClient) { }
   getData() {
      return this.http.get(this.apiurl);
   }
}

Po zakończeniu zadzwoń do usługi w app.component.ts, jak pokazano poniżej -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), k=>data[k]);
         console.log(this.personaldetails);
      });
   }
}

Posiadamy wymagane dane dostępne w zmiennej personaldetails. Teraz użyjmy tego samego, aby wyświetlić użytkownikowi, jak pokazano poniżej -

<h3>Angular 7 - Drag and Drop Module</h3>
<div>
   <div *ngFor="let item of personaldetails; let i = index" class="divlayout”>
      {{item.name}}
   </div >
</div>

Dodaliśmy class = ”divlayout”, a szczegóły klasy znajdują się w app.component.css.

.divlayout{
   width: 40%;
   background-color: #ccc;
   margin-bottom: 5px;
   padding: 10px 10px;
   border: 3px solid #73AD21;
}

W przeglądarce zostanie wyświetlony następujący ekran -

To nie będzie niczego przeciągać i upuszczać, musimy dodać właściwości dragdrop cdk w app.component.html, jak pokazano poniżej -

<h3>Angular 7 - Drag and Drop Module</h3>
<div cdkDropList
   #personList = "cdkDropList"
   [cdkDropListData] = "personaldetails"
   [cdkDropListConnectedTo] = "[userlist]"
   class = "example-list"
   (cdkDropListDropped) = "onDrop($event)" >
   
   <div *ngFor = "let item of personaldetails; 
      let i = index" class = "divlayout" cdkDrag>
      {{item.name}}
   </div >
</div&t;

Podświetlone to wszystkie właściwości wymagane do wykonania przeciągania i upuszczania. Kiedy sprawdzasz w przeglądarce, umożliwia przeciąganie elementu. Nie upuści go na liście i pozostanie niezmieniony po opuszczeniu wskaźnika myszy.

Tutaj pozwala na przeciągnięcie elementu z listy, ale gdy opuścisz kursor myszy, znajdzie się on w tym samym miejscu. Aby dodać funkcję upuszczania, musimy dodać zdarzenie onDrop w app.component.ts, jak pokazano poniżej -

Najpierw musimy zaimportować moduły dragdrap cdk, jak pokazano poniżej -

import {CdkDragDrop, moveItemInArray, transferArrayItem} 
from '@angular/cdk/drag-drop';

Oto pełny kod w app.component.ts -

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   public personaldetails = [];
   constructor(private myservice: MyserviceService) {}
   ngOnInit() {
      this.myservice.getData().subscribe((data) => {
         this.personaldetails = Array.from(Object.keys(data), 
         k=>data[k]);
         console.log(this.personaldetails);
      });
   }
   onDrop(event: CdkDragDrop<string[]>) {
      if (event.previousContainer === event.container) {
         moveItemInArray(event.container.data, 
            event.previousIndex, event.currentIndex);
      } else {
         transferArrayItem(event.previousContainer.data,
         event.container.data,
         event.previousIndex,
         event.currentIndex);
      }
   }
}

Funkcja onDrop dba o upuszczenie elementu przeciągniętego w wymaganą pozycję.

Wykorzystuje moveItemInArray i transferArrayItem zaimportowaliśmy z modułu cdk dragdrop.

Zobaczmy teraz ponownie demo w przeglądarce -

Teraz umożliwia przeciąganie i upuszczanie elementu w wymaganej pozycji, jak pokazano powyżej. Ta funkcja działa bardzo płynnie, bez problemów z migotaniem i może być używana w Twojej aplikacji wszędzie tam, gdzie zajdzie taka potrzeba.

Animacje dodają wiele interakcji między elementami HTML. Animacja była dostępna w Angular 2, począwszy od Angular 4 animacja nie jest już częścią biblioteki @ angular / core, ale jest oddzielnym pakietem, który należy zaimportować do app.module.ts.

Na początek musimy zaimportować bibliotekę z poniższą linią kodu -

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Plik BrowserAnimationsModule należy dodać do tablicy importu w app.module.ts jak pokazano poniżej -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

W app.component.htmldodaliśmy elementy html, które mają być animowane.

<div> 
   <button (click) = "animate()">Click Me</button> 
   <div [@myanimation] = "state" class = "rotate"> 
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div> 
</div>

Do głównego elementu DIV dodaliśmy przycisk i element DIV z obrazem. Istnieje zdarzenie kliknięcia, dla którego jest wywoływana funkcja animacji. W przypadku elementu div dyrektywa @myanimation jest dodawana i otrzymuje wartość stanu.

Zobaczmy teraz app.component.ts gdzie animacja jest zdefiniowana.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div {
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate {
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

Musimy zaimportować funkcję animacji, która ma być używana w pliku .ts, jak pokazano powyżej.

import { trigger, state, style, transition, animate } from '@angular/animations';

Tutaj zaimportowaliśmy wyzwalacz, stan, styl, przejście i animację z @ angular / animations.

Teraz dodamy właściwość animations do dekoratora @Component () -

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         transform : 'translateY(0px)' })), 
         transition('smaller <=> larger',animate('300ms ease-in')) 
   ]) 
]

Wyzwalacz określa początek animacji. Pierwszym parametrem jest nazwa animacji, która ma być nadana znacznikowi HTML, do którego animacja ma zostać zastosowana. Drugi parametr to zaimportowane przez nas funkcje - stan, przejście itp.

Funkcja stanu obejmuje kroki animacji, pomiędzy którymi przejdzie element. W tej chwili zdefiniowaliśmy dwa stany, mniejszy i większy. Dla mniejszego stanu daliśmy styltransform:translateY(100px) i transform:translateY(100px).

Funkcja przejścia dodaje animację do elementu html. Pierwszy argument przyjmuje stany początkowy i końcowy, drugi argument przyjmuje funkcję animate. Funkcja animacji umożliwia zdefiniowanie długości, opóźnienia i łatwości przejścia.

Zobaczmy teraz plik .html, aby zobaczyć, jak działa funkcja przejścia -

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/img.png" width = "100" height = "100">
   </div>
</div>

W dyrektywie @component dodano właściwość style, która centralnie wyrównuje element div. Rozważmy następujący przykład, aby zrozumieć to samo -

styles:[` 
   div{  
      margin: 0 auto; 
      text-align: center; 
      width:200px; 
   } 
   .rotate{ 
      width:100px; 
      height:100px; 
      border:solid 1px red;
   } 
`],

W tym przypadku znak specjalny [``] jest używany do dodawania stylów do elementu html, jeśli takie istnieją. W przypadku elementu div nadaliśmy nazwę animacji zdefiniowaną wapp.component.ts plik.

Po kliknięciu przycisku wywołuje funkcję animacji, która jest zdefiniowana w app.component.ts plik w następujący sposób -

export class AppComponent {
   state: string = "smaller"; 
   animate() { 
      this.state = this.state == ‘larger’? 'smaller' : 'larger'; 
   } 
}

Zmienna stanu jest zdefiniowana i otrzymuje domyślną wartość jako mniejszą. Funkcja animacji zmienia stan po kliknięciu. Jeśli stan jest większy, przekształci się w mniejszy; a jeśli jest mniejszy, przekształci się w większy.

Tak wygląda wyjście w przeglądarce (http://localhost:4200/) będzie wyglądać jak -

Po kliknięciu Click Me przycisk, pozycja obrazu zostanie zmieniona, jak pokazano na poniższym zrzucie ekranu -

Funkcja transformacji jest stosowana w kierunku y, który zmienia się z 0 na 100 pikseli po kliknięciu przycisku Kliknij mnie. Obraz jest przechowywany w plikuassets/images teczka.

Materiały oferują wiele wbudowanych modułów dla twojego projektu. Funkcje, takie jak autouzupełnianie, datapicker, suwak, menu, siatki i pasek narzędzi, są dostępne do użycia z materiałami w Angular 7.

Aby użyć materiałów, musimy zaimportować paczkę. Angular 2 ma również wszystkie powyższe funkcje, ale są one dostępne jako część@angular/core module. Od Angular 4, moduł Materiały jest dostępny z oddzielnym modułem @ kąt / materiały. Pomaga to użytkownikowi importować tylko wymagane materiały do ​​projektu.

Aby rozpocząć korzystanie z materiałów, musisz zainstalować dwa pakiety: materials and cdk. Zaawansowane funkcje komponentów materiałowych zależą od modułu animacji. Dlatego potrzebujesz pakietu animacji do tego samego,@angular/animations. Pakiet został już zaktualizowany w poprzednim rozdziale. W poprzednich rozdziałach zainstalowaliśmy już pakiety @ angular / cdk dla modułu wirtualnego i przeciągnij upuść.

Poniżej znajduje się polecenie dodawania materiałów do projektu -

npm install --save @angular/material

Zobaczmy teraz plik package.json. @angular/material i @angular/cdk są zainstalowane.

{ 
   "name": "angular7-app", 
   "version": "0.0.0", 
   "scripts": { 
      "ng": "ng", 
      "start": "ng serve",
      "build": "ng build", 
      "test": "ng test", 
      "lint": "ng lint", 
      "e2e": "ng e2e" 
   }, 
   "private": true, 
   "dependencies": { 
      "@angular/animations": "~7.2.0", 
      "@angular/cdk": "^7.3.4", 
      "@angular/common": "~7.2.0", 
      "@angular/compiler": "~7.2.0", 
      "@angular/core": "~7.2.0", 
      "@angular/forms": "~7.2.0", 
      "@angular/material": "^7.3.4", 
      "@angular/platform-browser": "~7.2.0", 
      "@angular/platform-browser-dynamic": "~7.2.0", 
      "@angular/router": "~7.2.0", 
      "core-js": "^2.5.4", 
      "rxjs": "~6.3.3", 
      "tslib": "^1.9.0", 
      "zone.js": "~0.8.26" 
   }, 
   "devDependencies": { 
      "@angular-devkit/build-angular": "~0.13.0", 
      "@angular/cli": "~7.3.2", 
      "@angular/compiler-cli": "~7.2.0", 
      "@angular/language-service": "~7.2.0", 
      "@types/node": "~8.9.4", 
      "@types/jasmine": "~2.8.8", 
      "@types/jasminewd2": "~2.0.3", 
      "codelyzer": "~4.5.0", 
      "jasmine-core": "~2.99.1", 
      "jasmine-spec-reporter": "~4.2.1", 
      "karma": "~3.1.1", 
      "karma-chrome-launcher": "~2.2.0", 
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": "~5.4.0", 
      "ts-node": "~7.0.0", 
      "tslint": "~5.11.0", 
      "typescript": "~3.2.2"
   } 
}

Podkreśliliśmy pakiety, które są instalowane do pracy z materiałami.

Zaimportujemy teraz moduły w module nadrzędnym - app.module.ts jak pokazano niżej.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatButtonModule,
      MatMenuModule,
      MatSidenavModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

W powyższym pliku zaimportowaliśmy następujące moduły z @angular/materials.

import { MatButtonModule, MatMenuModule, MatSidenavModule } from '@angular/material';

To samo jest używane w tablicy importów, jak pokazano poniżej -

imports: [
   BrowserModule,
   AppRoutingModule,
   HttpClientModule,
   ScrollDispatchModule,
   DragDropModule,
   ReactiveFormsModule,
   BrowserAnimationsModule,
   MatButtonModule,
   MatMenuModule,
   MatSidenavModule
],

Plik app.component.ts jest przedstawiony poniżej -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor() {}
}

Dodajmy teraz obsługę material-css w styles.css.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Dodajmy teraz materiały do ​​app.component.html

Menu

Aby dodać menu, <mat-menu></mat-menu>jest używany. Plikfile i Save Aspozycje są dodawane do przycisku pod menu mat. Dodano przycisk głównyMenu. Odniesienie do tego samego jest podane<mat-menu> używając [matMenuTriggerFor]="menu" i używając menu za pomocą # in<mat-menu>.

app.component.html

<button mat-button [matMenuTriggerFor] = "menu">Menu</button> 
<mat-menu #menu = "matMenu"> 
   <button mat-menu-item> File </button> 
   <button mat-menu-item> Save As </button>
</mat-menu>

Poniższy obraz jest wyświetlany w przeglądarce -

Kliknięcie menu spowoduje wyświetlenie znajdujących się w nim elementów -

SideNav

Aby dodać sidenav, potrzebujemy <mat-sidenav-container></mat-sidenav-container>. <mat-sidenav></mat-sidenav>jest dodawany jako element podrzędny do kontenera. Jest dodany inny div, który uruchamia sidenav za pomocą(click)="sidenav.open()".

app.component.html

<mat-sidenav-container class="example-container" fullscreen> 
   <mat-sidenav #sidenav class = "example-sidenav"> 
      Angular 7 
   </mat-sidenav> 
   <div class = "example-sidenav-content"> 
      <button type = "button" mat-button (click) = "sidenav.open()"> 
         Open sidenav 
      </button> 
   </div> 
</mat-sidenav-container>

app.component.css

.example-container { 
   width: 500px;  
   height: 300px; 
   border: 1px solid rgba(0, 0, 0, 0.5); 
}
.example-sidenav { 
   padding: 20px; 
   width: 150px; 
   font-size: 20px;
   border: 1px solid rgba(0, 0, 0, 0.5); 
   background-color: #ccc; 
   color:white; 
}

Poniżej przedstawiono wyświetlanie menu i sidenav w przeglądarce -

Poniższy panel otwiera się po lewej stronie, jeśli klikniemy Otwórz Sidenav -

Datepicker

Dodajmy teraz datepicker za pomocą materiałów. Aby dodać DatePicker, musimy zaimportować moduły wymagane do wyświetlenia Datepicker.

W app.module.ts, zaimportowaliśmy następujący moduł, jak pokazano poniżej dla datepicker -

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDatepickerModule, MatInputModule, MatNativeDateModule } from '@angular/material';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      MatNativeDateModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Tutaj zaimportowaliśmy moduły, takie jak MatDatepickerModule, MatInputModule i MatNativeDateModule.

Teraz plik app.component.ts jest taki, jak pokazano poniżej -

import { Component } from '@angular/core'; 
@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', s
   tyleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   constructor() {} 
}

Plik app.component.html jest jak pokazano poniżej -

<mat-form-field>
   <input matInput [matDatepicker] = "picker" placeholder = "Choose a date"> 
   <mat-datepicker-toggle matSuffix [for] = "picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Dodano globalny CSS w style.css -

/* You can add global styles to this file, and also 
import other style files */ 
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
body { 
   font-family: Roboto, Arial, sans-serif; 
   margin: 10; 
}
.basic-container { 
   padding: 30px; 
}
.version-info { 
   font-size: 8pt; 
   float: right;
}

Datepicker jest wyświetlany w przeglądarce, jak pokazano poniżej -

W tym rozdziale omówimy następujące tematy -

• Aby przetestować projekt Angular 7
• Aby zbudować projekt Angular 7

Testowanie projektu Angular 7

Podczas konfiguracji projektu wymagane pakiety do testowania są już zainstalowane. Tam jest.spec.ts plik utworzony dla każdego nowego komponentu, usługi, dyrektywy itp. Będziemy używać jasmine do pisania naszych przypadków testowych.

W przypadku wszelkich zmian dodanych do komponentu, usług, dyrektyw lub wszelkich innych utworzonych plików można dołączyć przypadki testowe do odpowiednich plików .spec.ts. Tak więc większość testów jednostkowych można omówić na samym początku.

Aby uruchomić przypadki testowe, użyta komenda jest następująca:

ng test

Poniżej znajduje się plik app.component.spec.ts dla app.component.ts -

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('angular7-app');
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   })
});

app.component.ts

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

Teraz uruchommy polecenie, aby zobaczyć uruchomione przypadki testowe.

Stan przypadków testowych jest wyświetlany w wierszu poleceń, jak pokazano powyżej, a także otwiera się w przeglądarce, jak pokazano poniżej -

W przypadku jakiejkolwiek awarii szczegóły zostaną wyświetlone w następujący sposób -

Aby to zrobić, zmieńmy app.component.spec.ts w następujący sposób -

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   it(`should have as title 'angular7-app'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Angular 7'); // change the 
      title from angular7-app to Angular 7
   });
   it('should render title in a h1 tag', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('h1').textContent).toContain(
         'Welcome to angular7-app!');
   });
});

W powyższym pliku przypadki testowe sprawdzają tytuł, Angular 7. Ale w app.component.ts mamy tytuł,angular7-app jak pokazano poniżej -

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

Tutaj przypadek testowy zakończy się niepowodzeniem, a poniżej znajdują się szczegóły wyświetlane w wierszu poleceń i przeglądarce.

W linii poleceń

W wierszu poleceń wyświetlany jest następujący ekran -

W wyszukiwarce

W przeglądarce wyświetlany jest następujący ekran -

Wszystkie przypadki testowe Twojego projektu, które nie powiodły się, zostaną wyświetlone w wierszu poleceń i przeglądarce, jak pokazano powyżej.

Podobnie możesz pisać przypadki testowe dla swoich usług, dyrektyw i nowych komponentów, które zostaną dodane do twojego projektu.

Budowa projektu Angular 7

Gdy skończysz z projektem w Angular, musimy go zbudować, aby mógł być używany w produkcji lub deklarowaniu.

Konfiguracja kompilacji, tj. Produkcji, przemieszczania, programowania i testowania, musi być zdefiniowana w pliku src/environments.

Obecnie mamy następujące środowiska zdefiniowane w src / environment -

Możesz dodać pliki oparte na twojej kompilacji do src / environment, np. Environment.staging.ts, enviornment.testing.ts itp.

Obecnie będziemy się starać budować dla środowiska produkcyjnego. Plikenvironment.ts zawiera domyślne ustawienia środowiska i szczegóły pliku w następujący sposób -

export const environment = {
   production: false
};

Aby zbudować plik do produkcji, musimy utworzyć plik production: true w environment.ts w następujący sposób -

export const environment = {
   production: true
};

Domyślny plik środowiska należy zaimportować do komponentów w następujący sposób -

app.component.ts

import { Component } from '@angular/core';
import { environment } from './../environments/environment';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'angular7-app';
}

Zamiana środowiska z domyślnego na produkcyjne, którą próbujemy zrobić, jest zdefiniowana w pliku angular.json fileReplacements sekcja w następujący sposób -

"production": {
   "fileReplacements": [
      {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
      }
   ],
}

Gdy polecenie kompilacji zostanie uruchomione, plik zostanie zamieniony na src/environments/environment.prod.ts. Dodatkową konfigurację, taką jak etapowanie lub testowanie, można dodać tutaj, jak pokazano w poniższym przykładzie -

"configurations": {
   "production": { ... },
   "staging": {
      "fileReplacements": [
         {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.staging.ts"
         }
      ]
   }
}

Więc polecenie uruchomienia kompilacji jest następujące -

ng build --configuration = production // for production environmnet
ng build --configuration = staging // for stating enviroment

Teraz uruchommy polecenie budowania dla produkcji, polecenie utworzy folder dist w naszym projekcie, który będzie miał końcowe pliki po kompilacji.

Ostateczne pliki są budowane w dist / folderze, który może być hostowany na serwerze produkcyjnym.