- Explain the basic Angular concepts (components, directives, modules, services, pipes)
- Explain how dependency injection is used in Angular
- Explain how to component-to-component communication can be implemented
`ng serve` for at starter counter demo.
Angular er et open-source JavaScript-klientside MVC-framework udviklet og vedligeholdt af Google. Angular er en komplet omskrivning af sin populære forgænger AngularJS. Angular indeholder i derfor: ts, component arkitektur, det er mobil compliant, der er CLI, LazyLoading, DI, SEO og SSR.
Angular-applikationer implementeres ved hjælp af TypeScript, HTML og CSS. Angular er et komponentbaseret framework, hvor komponenter er de primære byggesten i en Angular-applikation. Komponenter er genanvendelige og kan indlejres i hinanden. Komponenter er også den primære måde at kommunikere mellem forskellige dele af en Angular-applikation. Angular-applikationer bygges ved hjælp af en kombination af komponenter, direktiver, moduler, services og pipes.
Angular er et komplet framework og har en CLI, der kan bruges til at oprette og administrere Angular-applikationer.
Angular ee databindingen mellem view og model og fungere deffor som en mv der kan implementere MVVM konceptet.
Angular-komponenter defineres af en TypeScript-klasse samt en HTML-templat.
Komponentklassen indeholder data og logik for komponenten, mens HTML-templaten indeholder visningen.
Komponentklassen er dekoreret med @Component-dekoratoren, der indeholder metadata om komponenten.
@Component-dekoratoren indeholder en selector, der bruges til at identificere komponenten i HTML-templaten, templateUrl, der er stien til HTML-templaten, og styleUrls, der er stien til CSS-filerne for komponenten.
Når en Angular-applikation oprettes, vil der altid være en App-komponent, der fungerer som root-komponent.
Strukturen kan ses i mappen kaldet example-component i mappen src/app.
Angular-komponenter kan oprettes med CLI ved hjælp af ng g component [componentName], men de har funktionalitet til at være selvstændige. Selvstændige komponenter reducerer behovet for ngModules og kan bruges til at oprette genanvendelige komponenter. De angiver deres egne afhængigheder og kan bruges i enhver Angular-applikation. Forskellen mellem selvstændige komponenter og almindelige komponenter er, at selvstændige komponenter ikke er deklareret i en ngModule.
Der er tre forskellige typer direktiver i Angular: komponentdirektiver, attributdirektiver og strukturdirektiver.
Komponentdirektiver: [C] En komponent er den oftes anvendte type direktiv, som altid indeholder en template.
Attributdirektiver:[A] Ændrer udseendet eller adfærden af et element, en komponent eller en anden direktiv.
Nogle af disse inkluderer: NgClass og NgStyle, der kan bruges til dynamisk at tilføje eller fjerne CSS-klasser og stilarter til et element, NgModel, der kan bruges til at binde et input-, select- eller textarea-element til en egenskab på komponentklassen. For at bruge en attributdirektiv skal den tilføjes som attribut til et element.
Se mere i linje 1 i Styling using NgClass
Strukturdirektiver ( structual) : [S] Ændrer DOM-layoutet ved at tilføje og fjerne DOM-elementer.
Nogle af disse inkluderer NgIf, der kan bruges til at tilføje eller fjerne et element fra DOM’en baseret på en betingelse,
imens NgFor, der kan bruges til at gentage en template for hvert element i en liste, og NgSwitch, der kan bruges til betinget at vise elementer baseret på en værdi.
Se mere i linje 14 og 16 i List or no list
Services er singleton objekter som hjælper med at dele logikken i appen. En service kan være en værdi, funktion eller feature. En service er typisk en klasse med et snævert formål. En service deles med Angular-injektoren, der er ansvarlig for at oprette og levere instanser af servicen, når det er nødvendigt.
Man opretter en service med CLI ved hjælp af ng g service [serviceName].
Kode, der ikke direkte interagerer med visningen, skal placeres i en service. Ofte en asynkron service, der taler med en backend-API. Services bruges også til at dele data mellem ikke-relaterede komponenter.
For at oprette en service skal @Injectable-dekoratoren bruges. Denne dekorator fortæller Angular, at klassen kan bruges med dependency injection.
@Injectable-dekoratoren er ikke strengt nødvendig, hvis servicen ikke har afhængigheder og ikke behøver at blive injiceret nogen steder, men det anses for god praksis altid at bruge den.
@Injectable har en providedIn-egenskab, der bruges til at angive udbyderen af servicen.
providedIn-egenskaben kan indstilles til root, hvilket betyder, at servicen leveres i root injector’en.
Dette betyder, at servicen er tilgængelig overalt i applikationen.
providedIn-egenskaben kan også indstilles til et specifikt modul, hvilket betyder, at servicen kun er tilgængelig i det modul.
dette kræver dog man har inddelt komponenter i moduler. DI bruges også til lazy loading og der skal komponenter være opdelt i moduler,
som loaded ved kald.
Se mere i linje 8 i Logger service
DI kræver, at servicen eller værdien eller funktionen efterspørges af forbrugeren. Forbrugeren er komponenten, der har brug for servicen. Forbrugeren skal efterspørge servicen i constructor’en.
Angular-pipes er ligesom enhver anden pipe i programmering. De tager et input og transformerer det til et output. Pipes bruges til at formatere data til visning. Angular leveres med et sæt indbyggede pipes, men du kan også oprette dine egne brugerdefinerede pipes.
Pipes kan bruges ved hjælp af pipe-operatoren | og kan kædes til andre pipes.
Se mere i linje 23 i Eksempel HTML
Der er to former for pipes i Angular: pure og impure pipes. Pure pipes kaldes kun, når Angular opdager en ændring i værdien eller parametrene, der sendes til en pipe. Impure pipes kaldes for hver ændring i change detection cycle, hvilket kan være meget dyrt. En ren pipe skal bruge en ren funktion, som er en funktion, der behandler input og returnerer værdier uden sideeffekter. Med andre ord skal en ren funktion altid returnere den samme output for det samme input.
Angular tillader også brugerdefinerede pipes. En brugerdefineret pipe kan oprettes med CLI ved hjælp af ng g pipe [pipeName]. For at implementere en brugerdefineret pipe skal du implementere PipeTransform-interfacet. PipeTransform-interfacet har en transform-metode, der tager en værdi og en valgfri række parametre og returnerer den transformerende værdi. Transform-metoden kaldes, når værdien eller parametrene ændres.
Angular-moduler bruges til at organisere en applikation i sammenhængende blokke af funktionalitet.
En Angular-applikation defineres af et root-modul, som er AppModule. Når du opretter en ny komponent med CLI, tilføjer CLI automatisk komponenten til AppModule. AppModule er root-modulet i applikationen og er indgangspunktet for applikationen. AppModule er dekoreret med @NgModule-dekoratoren, der indeholder metadata om modulet. @NgModule-dekoratoren indeholder deklarations, som er et array af komponenter, direktiver og pipes, der tilhører modulet, imports, som er et array af de moduler, som modulet afhænger af, providers, som er et array af de tjenester, som modulet leverer, og bootstrap, som er et array af de komponenter, der startes, når applikationen starter.
Se AppModule
Du kan også importere et Angular-modul eller selvstændig komponent i et andet modul.
moduler bruges også til at indkapsle lazy loading med DI.
Komponent-til-komponent-kommunikation kan opnås ved hjælp af @Input. Eksempel med en parent- og en child-komponent, der skal kommunikere.
Parent-komponenten sender en værdi til child-komponentens variabel, der er dekoreret med @Input-dekoratoren. Child-komponenten kan derefter bruge denne værdi og vise den.
Se mere i linje 26 i Parent HTML og linje 12 i Child @Input _____