Angular 6 er ute! De mest fremragende endringene er i CLI og hvordan tjenester blir injisert. Hvis du ønsker å skrive den aller første Angular 6-appen - eller Angular / Firebase-appen - i denne opplæringen, vil vi gå gjennom de grunnleggende trinnene for første oppsett og lage en liten dagbokapp.
Hvis du aldri har brukt Vinklet før, la meg gi deg en kort beskrivelse av det og hvordan det fungerer.
Angular er et JavaScript-rammeverk designet for å støtte byggingen av applikasjoner med én side (SPA) for både stasjonær og mobil.
Rammeverket inkluderer en komplett pakke med direktiver og moduler som lar deg enkelt implementere noen av de vanligste scenariene for en webapp, som navigering, autorisasjon, skjemaer og rapportering. Den leveres også med alle nødvendige pakker for å legge til tester ved hjelp av Jasmine-rammeverket og kjøre dem ved hjelp av Karma- eller Protractor-testløpere.
Vinkelarkitektur er basert på komponenter, maler, direktiver og tjenester. Det gir en innebygd avhengighetsinjiseringsmekanisme for tjenestene dine, samt toveis databinding for å koble dine synspunkter med komponentkoden din.
Angular bruker TypeScript, et skrevet supersett av JS, og vil gjøre noen ting lettere, spesielt hvis du kommer fra en skrevet språkbakgrunn.
En kort oppsummering av nye funksjoner i Angular 6:
@angular/core
, @angular/common
, @angular/compiler
osv.), CLI, Material og CDK. Dette vil bidra til å gjøre krysskompatibilitet tydeligere fremover: Du kan fortelle fra et raskt blikk på versjonsnummeret om nøkkelpakker er kompatible med hverandre.ng
CLI-kommandoer:ng update
for å oppgradere pakkeversjoner smart, oppdatere avhengighetsversjoner og holde dem synkroniserte. (F.eks. Når du kjører ng update @angular/core
alle rammeverk oppdateres i tillegg til RxJS.) Den vil også kjøre skjemaer hvis pakken inkluderer dem. (Hvis en nyere versjon inkluderer brudd på endringer som krever endringer i kode, vil skjemaet oppdatere koden din for deg.)ng add
for å legge til nye pakker (og kjøre skript, hvis aktuelt)Som et eksempel på hva denne siste endringen betyr, hvor koden din pleide å se ut:
@NgModule({ // ... providers: [MyService] })
... med denne spesielle endringen i Angular 6, vil det se ut som:
@Injectabe({ providedIn: 'root', })
Disse kalles tree-shakeable leverandører og la kompilatoren fjerne tjenester som ikke er referert til, noe som resulterer i pakker med mindre størrelse.
ng
kommandolinjegrensesnitt er et veldig viktig stykke Angular og lar deg bevege deg raskere når du koder appen din.
Med CLI kan du stillas det opprinnelige appoppsettet ditt veldig enkelt, generere nye komponenter, direktiver osv., Og bygge og kjøre appen din i ditt lokale miljø.
Ok, nok snakk. La oss skitne hendene og begynne å kode.
For å starte, trenger du Node.js og over havnivå installert på maskinen din.
La oss fortsette og installere CLI:
npm install -g @angular/cli
Dette vil installere ng
CLI-kommando globalt på grunn av -g
bytte om.
Når vi har det, kan vi få det første stillaset til appen vår med ng new
:
ng new my-memories --style=scss
Dette vil opprette et my-memories
mappen, opprett alle nødvendige filer for å gjøre det første oppsettet klart til å starte, og installer alle nødvendige pakker. --style=scss
bryteren er valgfri og konfigurerer kompilatoren til å kompilere SCSS-filer til CSS, som vi trenger senere.
Når installasjonen er fullført, kan du cd my-memories
og løp ng serve
. Dette starter byggeprosessen og en lokal webserver som serverer appen din på http://localhost:4200
.
Det som skjer bak kulissene er at CLI transporterer alle .ts
(TypeScript-filer) til vanilje JS, samler alle nødvendige avhengigheter fra pakkemappen node_modules
, og gir resultatet i et sett med filer som serveres via en lokal webserver som kjører på port 4200.
Hvis du ikke er kjent med prosjektmappestrukturen til Angular, er det viktigste du trenger å vite at all koden relatert til appen går inn i src
mappe. Du vil vanligvis opprette alle modulene og direktivene i den mappen følger apparkitekturen din (f.eks. bruker, handlevogn, produkt.)
Ok, så langt har vi det første oppsettet for appen vår. La oss begynne å gjøre noen endringer.
Før vi begynner, la oss grave i src
mappen litt. Den første siden er index.html
:
MyMemories
Her ser vi noen grunnleggende HTML og taggene. Dette er en vinkelskomponent, og der Angular 6 setter inn komponentkoden vår.
Vi finner app/app.component.ts
fil, som har velgeren app-root
for å matche det som er i index.html
fil.
Komponenten er en dekorert TypeScript-klasse, og inneholder i dette tilfellet title
eiendom. @Component
dekoratør forteller Angular å inkludere komponentens oppførsel i klassen. I tillegg til velgeren, spesifiserer den hvilken HTML-fil du vil gjengi og hvilke stilark du skal bruke.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; }
Hvis vi ser på app.component.html
vi får se {{title}}
interpolasjonsbinding. Her skjer all magisk binding, og Angular gjengir verdien på klassetittelegenskapen og oppdaterer den når den endres.
Here are some links to help you start:
La oss fortsette og oppdatere title
fra klassen til 'My Memories!'
.
... export class AppComponent { title = 'My Memories!'; } ...
Vi ser kompilatoren behandle endringen vår og nettleseren oppdateres for å vise den oppdaterte tittelen.
Dette betyr Angular 6’s ng serve
ser etter filendringene våre og gjengis hver gang en endring blir introdusert i en fil.
For å gjøre kodingen mer vennlig og unngå full sideoppdatering hver gang vi gjør endringer, kan vi dra nytte av webpack Hot Module Replacement (HMR), som bare oppdaterer delen av JS / CSS som ble endret i stedet for å produsere en full oppdatering til vis endringene dine.
Først må vi sette opp miljøet.
Opprett en fil src/environments/environment.hmr.ts
med følgende innhold:
export const environment = { production: false, hmr: true };
Oppdater src/environments/environment.prod.ts
og legg til hmr: false
flagg til miljøet:
export const environment = { production: true, hmr: false };
Oppdater deretter src/environments/environment.ts
og legg til hmr: false
flagg til miljøet der også:
export const environment = { production: false, hmr: false };
Neste i angular.json
fil, oppdater denne delen:
'projects': { 'my-memories': { // ... 'architect': { 'build': { // ... 'configurations': { 'hmr':{ 'fileReplacements':[ { 'replace': 'src/environments/environment.ts', 'with': 'src/environments/environment.hmr.ts' } ] }, // ...
Og under projects
→ my-memories
→ architect
→ serve
→ configurations
:
'projects': { 'my-memories': { 'architect': { // ... 'serve': { // ... 'configurations': { 'hmr': { 'browserTarget': 'my-memories:build:hmr' }, // ...
Oppdater nå tsconfig.app.json
for å inkludere det nødvendige types
(vel, skriv) ved å legge til dette under compilerOptions
:
'compilerOptions': { // ... 'types': [ 'node' ]
Deretter installerer vi @angularclass/hmr
modul som utviklingsavhengighet:
npm install --save-dev @angularclass/hmr
Konfigurer den deretter ved å opprette en fil src/hmr.ts
:
import { NgModuleRef, ApplicationRef } from '@angular/core'; import { createNewHosts } from '@angularclass/hmr'; export const hmrBootstrap = (module: any, bootstrap: () => Promise) => { let ngModule: NgModuleRef; module.hot.accept(); bootstrap().then(mod => ngModule = mod); module.hot.dispose(() => { const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef); const elements = appRef.components.map(c => c.location.nativeElement); const makeVisible = createNewHosts(elements); ngModule.destroy(); makeVisible(); }); };
Neste oppdatering src/main.ts
for å bruke ovennevnte funksjon:
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import { hmrBootstrap } from './hmr'; if (environment.production) { enableProdMode(); } const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule); if (environment.hmr) { if (module[ 'hot' ]) { hmrBootstrap(module, bootstrap); } else { console.error('HMR is not enabled for webpack-dev-server!'); console.log('Are you using the --hmr flag for ng serve?'); } } else { bootstrap().catch(err => console.log(err)); }
Det vi gjør her er å gjøre bootstrap kalle en anonym funksjon, og deretter spørre om environment.hmr
flagget er sant. Hvis det er det, kaller vi den tidligere definerte funksjonen fra hmr.ts
som aktiverte erstatning av varm modul; Ellers starter vi den som vi pleide å gjøre.
Når vi løper ng serve --hmr --configuration=hmr
, påkaller vi hmr
konfigurasjon, og når vi gjør endringer i filer, får vi oppdateringer uten full oppdatering. Den første --hmr
er for webpack, og --configuration=hmr
er for Angular å bruke hmr
miljø.
For å legge til Angular 6 PWA-støtte og aktivere frakoblet lasting for appen, kan vi bruke en av de nye CLI-kommandoene, ng add
:
ng add @angular/ [email protected]
Merk at jeg legger til versjonen, siden den siste versjonen da jeg skrev denne opplæringen var kaster en feil . (Du kan prøve uten det og sjekke om det fungerer for deg ved å bruke ganske enkelt ng add @angular/pwa
.)
Ok, så etter at vi har kjørt kommandoen, ser vi mange endringer i prosjektet vårt. De viktigste endringene er at den la til:
manifest.json
i angular.json
aktiva-filen, slik at den er inkludert i byggeoutputen, samt 'serviceWorker': true
i produksjon byggerngsw-config.json
fil med det første oppsettet for å cache alle filer som er nødvendige for at appen skal kjøremanifest.json
metakode i index.html
filmanifest.json
selve filen, med en grunnleggende konfigurasjon for appenServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
(merk at servicearbeideren bare blir aktivert i produksjonsmiljøer)Så dette betyr nå at når brukeren først får tilgang til URL-en, blir filene lastet ned. Etter det, hvis brukeren prøver å få tilgang til URL-en uten nettverkstjeneste, vil appen fortsatt fungere ved å trekke de hurtigbufrede filene.
Så langt har vi det første oppsettet, og vi er klare til å begynne å bygge appen vår. For å gjøre bruk av allerede bygde komponenter, kan vi bruke Vinkel 6 versjon av Material .
For å installere material
pakken på appen vår, bruker vi igjen ng add
:
ng add @angular/material
Etter at vi har kjørt det, ser vi noen nye pakker lagt til og noen grunnleggende stilkonfigurasjoner:
index.html
inkluderer Roboto-skrifttypen og Material-ikoneneBrowserAnimationsModule
er lagt til AppModule
angular.json
har det indigo-rosa temaet allerede inkludert for oss
Du må starte på nytt ng serve
for å plukke opp temaet, eller du kan velg et annet forhåndsbygd tema .
For å ha det opprinnelige sidenav-oppsettet, bruker vi skjemaene som følger med materiale. Men det er OK hvis du vil bruke et annet oppsett .
(I et nøtteskall, skjemaer lar deg bruke transformasjoner til et prosjekt: Du kan opprette, endre eller slette filer etter behov. I dette tilfellet stiller det et sidenav-oppsett for appen vår.)
ng generate @angular/material:material-nav --name=my-nav
Dette vil opprette en sidenav-komponent med minimum oppsett klar til å starte. Er det ikke bra?
Den har også tatt med alle nødvendige moduler i app.module.ts
.
Siden vi bruker SCSS, må vi gi nytt navn til my-nav.component.css
fil til my-nav.component.scss
, og i my-nav.component.ts
oppdater tilsvarende referanse styleUrls
for å bruke det nye navnet.
For å bruke den nye komponenten, la oss gå til app.component.html
og fjern all den opprinnelige koden, og la bare:
ng g c AddMemory ng generate @angular/material:material-table --name=view-memories
Når vi går tilbake til nettleseren, ser vi følgende:
La oss oppdatere lenkene slik at de bare har de to alternativene vi ønsker.
La oss først lage to nye komponenter:
my-nav
(Den andre er en materiellskjema som brukes til å lage en tabell.)
Neste, på Menu Add Memory View My Memories menu my-memories
vi oppdaterer for å sette opp lenkene og inkluderer for å vise innholdskomponentene våre:
app.component.html
Også i AppModule
vi trenger å oppdatere den for bare å ha hoveddelen (dvs. fjerne):
import { RouterModule, Routes } from '@angular/router'; // ... imports: [ // ... RouterModule.forRoot([ { path: '', component: MyNavComponent, children: [ { path: 'add-memory', component: AddMemoryComponent }, { path: 'view-memories', component: ViewMemoriesComponent } ] }, ]), ]
Deretter på MyNavComponent
vi inkluderer rutene:
MyNavComponent
Vær oppmerksom på at vi setter inn app.module.ts
som forelder og de to komponentene vi skapte som barn. Dette er fordi vi inkluderte i import { FormsModule } from '@angular/forms'; import { MatCardModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material'; // ... Imports:[ // ... MatCardModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, FormsModule, MatNativeDateModule, // ... ]
, og hver gang vi treffer en av disse to rutene, vil vi gjengi barnekomponenten der den ble plassert.
Etter dette, når vi betjener appen, bør vi se:
Ok, la oss nå lage skjemaet for å lagre nye minner i dagboken vår.
Vi må importere noen materialmoduler og skjemamodulen til add-memory.component.html
:
Add a memory Save me! { json }
Og i mat-card
legger vi til skjemaet:
date
Her bruker vi en textarea
og legge til to felt, a [(ngModel)]
og en memory.date
.
Merk at vi bruker memory
. Dette vinkeldirektivet vil binde [(ngModel)]
uttrykk og memory.date
eiendom i klassen til hverandre, som vi får se senere. (memory.date
er syntaktisk sukker - en snarvei for å utføre toveis databinding fra klassen til utsikten og fra utsikten til klassen. Dette betyr at når du skriver inn tekst i visningen, add-memory.component.ts
vil gjenspeile disse endringene i klasseinstansen, og hvis du gjør endringer i import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-add-memory', templateUrl: './add-memory.component.html', styleUrls: ['./add-memory.component.scss'] }) export class AddMemoryComponent implements OnInit { memory: any = {}; constructor() { } ngOnInit() { } onSubmit() { console.log(this.memory); } }
i klasseinstansen vil visningen gjenspeile endringene.)
I memory
vil koden se slik ut:
ngModel
Her initialiserer vi AddMemoryComponent
eiendom bundet via memory
. Når ngModel
komponent blir instantiert, memory.date
vil være et tomt objekt. Så når memory.text
direktivet kjører, vil det kunne tilordne inngangsverdien til Cannot set property 'date/text' of undefined
og add-memory.component.scss
. Hvis vi ikke ville gjort dette, ville vi få en feil på .memory-card { min-width: 150px; max-width: 400px; width: 100%; margin: auto; } .mat-form-field { width: 100%; }
.
I mellomtiden,
trenger å ha: { memory }
memory
Siden vi har (ngSubmit)='onSubmit()'
vi kan se den nåværende tilstanden til onSubmit
i utsikten. Hvis vi går til nettleseren, er resultatet så langt:
I visningen bundet vi skjemaet via onSubmit() { console.log(this.memory); }
til firebase
funksjon i klassen.
angularfire2
Så når du klikker på 'Redd meg!' knappen, får du den interne representasjonen av brukerinngangen sendt til konsolloggen:
Det vi skal gjøre er å koble prosjektet vårt til Firebase for å lagre minnene våre.
Først skal vi gå til Firebase-konsollen og lage et prosjekt der.
For det andre installerer vi npm install firebase angularfire2 --save
og /src/environments/environment.ts
pakker:
/src/environments/environment.hmr.ts
Og så i hver av disse tre filene:
/src/environments/environment.prod.ts
export const environment = { // ... firebase: { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '' } };
app.module.ts
... vi legger til Firebase-konfigurasjonen:
import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { environment } from '../environments/environment'; // ... Imports:[ // ... AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, // ... ]
Du kan få de nødvendige konfigurasjonsdetaljene for filene ovenfor ved å klikke 'Legg til Firebase i webappen din' på prosjektoversiktssiden.
Etter det vil vi inkludere Firebase-modulene i add-memory.component.ts
:
import { AngularFireDatabase } from 'angularfire2/database'; // ... constructor(private db: AngularFireDatabase) { } // ... onSubmit() { this.memory.date = new Date(this.memory.date).valueOf(); this.db.list('memories').push(this.memory) .then(_ => { this.memory = {} console.log('success') }) }
Og i ng serve
injiserer vi databasen i konstruktøren og lagrer verdiene fra skjemaet i databasen. Når push-løftet fra Firebase er vellykket, logger vi suksess i konsollen og tilbakestiller modellen:
ng generate @angular/material:material-table --name=view-memories', we automatically got a file
Du må tillate offentlig tilgang til databasereglene, slik at anonyme brukere kan lese fra og skrive til den. Vær oppmerksom at med dette oppsettet, vil enhver bruker kunne lese / endre / slette appdataene dine. Vær sikker på at du sett opp reglene dine deretter før du går i produksjon .
Hvis du vil hente miljøendringene, må du også starte view-memories-datasource.ts
prosess.
Nå, når vi går tilbake til nettleseren og klikker på lagringsknappen vår, ser vi at minnet ble lagt til databasen:
La oss se på hvordan vi kan hente minnene våre og vise dem i materialtabellen.
Tilbake da vi opprettet tabellen ved hjelp av EXAMPLE_DATA
view-memories / view-memories-datasource.ts`. Denne filen inneholder falske data, så vi må endre dem for å begynne å hente fra Firebase.
I export class ViewMemoriesDataSource extends DataSource { data: ViewMemoriesItem[] = []; // ...
fjerner vi getSortedData
og sett en tom matrise:
private getSortedData(data: ViewMemoriesItem[]) { if (!this.sort.active || this.sort.direction === '') { return data; } return data.sort((a, b) => { const isAsc = this.sort.direction === 'asc'; switch (this.sort.active) { case 'text': return compare(a.name, b.name, isAsc); case 'date': return compare(+a.id, +b.id, isAsc); default: return 0; } }); }
Og i view-memories.component.html
vi oppdaterer feltnavnene:
date
I text
vi oppdaterer kolonnenes navn til [length]='dataSource.data.length'
og
fra minnemodellen vår. Merk at siden vi lagret datoen i millisekunder, bruker vi her et datorrør for å transformere verdien for visning i et mer menneskelig vennlig datoformat. Til slutt fjerner vi
Date {row.date } Text {{row.text}} view-memories.component.css
fra paginator, siden vi laster inn data asynkront fra Firebase:
view-memories.component.scss
Endre table{ width: 100%; }
til view-memories.component.ts
og sett bordstilen:
styleUrls
I ./view-memories.component.scss
endrer vi displayedColumns
for å gjenspeile ovennevnte navn til ['date', 'text']
. Vi oppdaterer også ViewMemoriesDataSource
matrise skal være this.subscription = this.db.list('memories').valueChanges().subscribe(d=>{ console.log('data streaming'); this.dataSource = new ViewMemoriesDataSource(this.paginator, this.sort); this.dataSource.data = d; });
og sette opp datakilden for tabellen for å hente data fra Firebase.
Det som skjer her er at vi abonnerer på minnelisten, og når vi mottar dataene, instanserer vi this.db.list('memories')
og angi dataegenskapen med dataene fra Firebase.
'memories'
Firebase returnerer a ReactiveX -style Observable array.
Merk at vi caster ViewMemoriesItem
—verdiene hentet fra angularfire2
sti — til unsubscribe
. Dette ivaretas av onDestroy
bibliotek.
Vi inkluderte også import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core'; import { MatPaginator, MatSort } from '@angular/material'; import { ViewMemoriesDataSource, ViewMemoriesItem } from './view-memories-datasource'; import { AngularFireDatabase } from 'angularfire2/database'; import { Subscription } from 'rxjs'; import { map, first } from 'rxjs/operators'; @Component({ selector: 'app-view-memories', templateUrl: './view-memories.component.html', styleUrls: ['./view-memories.component.scss'] }) export class ViewMemoriesComponent implements OnInit, OnDestroy{ @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; dataSource: ViewMemoriesDataSource; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ displayedColumns = ['date', 'text']; subscription: Subscription; constructor(private db: AngularFireDatabase) { } ngOnInit() { this.subscription = this.db.list('memories').valueChanges().subscribe(d=>{ console.log('data streaming'); this.dataSource = new ViewMemoriesDataSource(this.paginator, this.sort); this.dataSource.data = d; }); } ngOnDestroy(): void { this.subscription.unsubscribe(); } }
ring i firebase
krok i livssyklusen til Angular-komponenten.
npm install -g firebase-tools
I slekt: Bygge sanntids mobilapplikasjoner med flere plattformer: Eksempler som bruker Ionic Framework og Firebase Nå, for å gjøre appen vår live, la oss distribuere den til Firebase Hosting. For det installerer vi Firebase CLI, som lager firebase login
kommando tilgjengelig:
firebase init
Nå kan vi bruke Firebase CLI til å logge på:
dist/my-memories
Dette vil be deg om å velge Google-kontoen din.
Deretter initialiserer vi prosjektet og konfigurerer Firebase Hosting:
/index.html
Vi velger bare alternativet Hosting.
Når vi blir bedt om stien, setter vi den til .firebaserc
Når vi blir spurt om vi skal konfigurere den som en ensidig app (dvs. omskrive alle nettadresser til firebase.json
), svarer vi “ja”.
Til slutt vil vi trykke 'Fil dist / my-memories / index.html eksisterer allerede. Overskrive? ” Her vil vi si 'nei.'
Dette vil opprette Firebase-konfigurasjonsfilene ng build --prod firebase deploy
og
|_+_|med den angitte konfigurasjonen.
Det siste trinnet er å løpe:
|_+_|
Og med det, vil vi ha publisert appen til Firebase, som gir en URL for oss å navigere til, som https://my-memories-b4c52.firebaseapp.com/view-memories , hvor du kan se min egen publiserte demo.
Wow, du har gått gjennom veiledningen! Jeg håper du likte det. Du kan også sjekke ut hele koden for den på GitHub .
Angular er et veldig kraftig rammeverk for å bygge webapper. Det har vært der lenge og har vist seg for små, enkle apper og store, komplekse - Angular 6 er ikke noe unntak her.
Fremover planlegger Angular å fortsette å forbedre og følge nye webparadigmer som webkomponenter (Angular Elements). Hvis du er interessert i å bygge hybridapper, kan du sjekke ut Jonisk , som bruker Angular som sitt underliggende rammeverk.
Denne opplæringen dekket helt grunnleggende trinn for å begynne å bruke Angular, Material og Firebase . Men du bør ta i betraktning at for applikasjoner i den virkelige verden, må du legge til validering, og for å gjøre applikasjonen enklere å vedlikeholde og skalere, vil du sannsynligvis følge beste fremgangsmåter som bruk av tjenester, gjenbrukbare komponenter osv Dette vil måtte være gjenstand for en annen artikkel - forhåpentligvis var denne nok til å gi deg lyst på vinkelutvikling!
I slekt: All Perks, No Hassle: An Angular 9 TutorialAngularJS - ganske enkelt 'Angular' i dag, siden versjon 2, brukes til å bygge webapps, progressive webapps (PWAs) og hybrid mobile apps. Angular-rammeverket leveres med all nødvendig funksjonalitet (for eksempel ruting, sikkerhet, skjemaer og testing) for raskt å bygge en enkeltsidesapplikasjon (SPA).
Vinkelkomponenter er en spesiell type direktiv. De binder et syn med klassen via en dekoratør. Visningen er en HTML-mal, og fra klassen kan du kontrollere og reagere på eventuelle interaksjoner med visningen.
Angular er et JavaScript (JS) rammeverk, med en komplett pakke med innebygd funksjonalitet for å bygge webapper. TypeScript er et skrevet supersett av JS. Den kompileres til vanilje JS og støttes av Angular.
Med Angular kan du bygge skalerbare, performante webapper. Angular lar deg bygge gjenbrukbare, testbare komponenter som lar deg gjøre endringer og vedlikeholde appen din enkelt.
Angular CLI er kommandolinjegrensesnittet og gir kommandoer for de vanligste handlingene. Eksempler inkluderer generering av komponenter, rør og direktiver; legge til avhengigheter; og skape nye prosjekter.
Hot module replacement (HMR) er en webpack-funksjon som lar deg erstatte moduler uten fullstendig oppdatering av nettleseren. Unngå ekstra trinn og resulterende forsinkelse betyr at du kan kode og teste endringene dine mye raskere.
Firebase-sanntidsdatabasen er Googles skybaserte NoSQL-database. Du kan bruke den til å lagre data og synkronisere dem automatisk til brukernes enheter. Firebase-databaser lar deg raskt bygge applikasjonen din uten behov for en egen bakside. Firebase har mange produkter som hjelper med å bygge serverløse apper.