Angular 6 Tutorial: Nye funksjoner med ny kraft

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.

Angular 6: The Basics

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.

Angular 6: Nye funksjoner

En kort oppsummering av nye funksjoner i Angular 6:

• En policy for synkronisering av hovedversjonsnumre for rammepakkene (@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.
• Ny 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)
• Tjenester refererer nå til modulene som vil gi dem, i stedet for moduler som refererer til tjenester, slik de pleide å ha det.

Som et eksempel på hva denne siste endringen betyr, hvor koden din pleide å se ut:

... med denne spesielle endringen i Angular 6, vil det se ut som:

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.

Vinkel 6 CLI

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ø.

Opprette et Angular 6-prosjekt

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:

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:

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.

Prosjektfiler

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.)

Førstegangs oppsett

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:

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.

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.

La oss fortsette og oppdatere title fra klassen til '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.

Konfigurerer HMR

Først må vi sette opp miljøet.

Opprett en fil src/environments/environment.hmr.ts med følgende innhold:

Oppdater src/environments/environment.prod.ts og legg til hmr: false flagg til miljøet:

Oppdater deretter src/environments/environment.ts og legg til hmr: false flagg til miljøet der også:

Neste i angular.json fil, oppdater denne delen:

Og under projects → my-memories → architect → serve → configurations:

Oppdater nå tsconfig.app.json for å inkludere det nødvendige types (vel, skriv) ved å legge til dette under compilerOptions:

Deretter installerer vi @angularclass/hmr modul som utviklingsavhengighet:

Konfigurer den deretter ved å opprette en fil src/hmr.ts:

Neste oppdatering src/main.ts for å bruke ovennevnte funksjon:

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ø.

Progressiv nettapp (PWA)

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:

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:

• En referanse til manifest.json i angular.json aktiva-filen, slik at den er inkludert i byggeoutputen, samt 'serviceWorker': true i produksjon bygger
• ngsw-config.json fil med det første oppsettet for å cache alle filer som er nødvendige for at appen skal kjøre
• A manifest.json metakode i index.html fil
• manifest.json selve filen, med en grunnleggende konfigurasjon for appen
• Servicearbeiderbelastningen i app-modulen ServiceWorkerModule.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.

Legge til Material Angular 6 UI-biblioteket

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:

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-ikonene
• BrowserAnimationsModule 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 .

Grunnleggende oppsett

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.)

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:

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:

(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:

Også i AppModule vi trenger å oppdatere den for bare å ha hoveddelen (dvs. fjerne):

Deretter på MyNavComponent vi inkluderer rutene:

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:

Bygg appen (A Memories Diary)

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:

 { json } 

Og i mat-card legger vi til skjemaet:

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:

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,

 { 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.

Så når du klikker på 'Redd meg!' knappen, får du den interne representasjonen av brukerinngangen sendt til konsolloggen:

Angular 6 Tutorial: Koble til Firebase

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:

Og så i hver av disse tre filene:

1. /src/environments/environment.prod.ts
2. export const environment = { // ... firebase: { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '' } };
3. app.module.ts

... vi legger til Firebase-konfigurasjonen:

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:

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:

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:

Og i view-memories.component.html vi oppdaterer feltnavnene:

I text vi oppdaterer kolonnenes navn til [length]='dataSource.data.length' og

Endre table{ width: 100%; } til view-memories.component.ts og sett bordstilen:

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.

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.

Implementering til Firebase Hosting

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:

Nå kan vi bruke Firebase CLI til å logge på:

Dette vil be deg om å velge Google-kontoen din.

Deretter initialiserer vi prosjektet og konfigurerer Firebase Hosting:

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

|_+_|

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 .

Ett skritt av gangen

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!

Forstå det grunnleggende

Hva brukes AngularJS til?

AngularJS - 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).

Hva er vinkelkomponenter?

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.

Hva er Angular og TypeScript?

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.

Hva kan du gjøre med AngularJS?

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.

Hva står Angular CLI for?

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.

Hva er erstatning av varm modul?

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.

Hva er en Firebase-database for et program?

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.