Share
Angular CLI er et kommandolinjegrensesnitt for Angular og en av de enkleste måtene å få appen din påbegynt. Skjønnheten ved å bruke Angular CLI er at den lar deg fokusere på koden din uten å måtte bekymre deg for strukturen i søknaden din, siden alle nødvendige filer genereres for deg.
Det er veldig enkelt å lage produksjonsklare applikasjoner med Angular CLI. På den annen side gjør Firebase det raskt å være vert for applikasjoner. I tillegg har Firebase mange funksjoner og en gratis plan som lar deg eksperimentere med plattformen uten å være bundet til en betalt plan.
Den frie planen har følgende funksjoner:
For å kunne kjøre Angular CLI må du ha Node.js 6.9 og NPM 3 eller høyere installert på systemet. Hvis du ikke har Node.js installert, kan du gå til Node.js nettsted for å finne instruksjoner om hvordan du installerer Node.js på operativsystemet..
Du bør også ha en grunnleggende forståelse av følgende:
Installere Angular CLI er like enkelt som:
npm installer -g @ vinkel / cli
Kommandoen ovenfor installerer den nyeste versjonen av Angular. For å validere den vellykkede installasjonen av Angular CLI, utsted bare følgende kommando:
ng --versjon _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | | | | | _ | | _ | | _ / _ _ _ _ _ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ | | ___ / Vinkel CLI: 6.0.8 Knutep.: 10.7.0 OS: Linux x64 Vinkel: ... Pakke Versjon ------------------- ----------------------------------- @ angular-devkit / architect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schematics 0.6.8 @ schematics / vinkel 0.6.8 @ schematics / update 0.6.8 rxjs 6.2.2 typeskript 2.7.2
Nå som du har installert Angular CLI, kan vi begynne å utvikle applikasjonen vår. I denne opplæringen vil vi ikke dykke inn i komponentene som utgjør et Angular CLI-prosjekt siden dette innlegget for det meste handler om å distribuere til Firebase.
For å lage et nytt program, bare kjør ng ny [name_of_project], hvor du erstatter name_of_project med navnet på søknaden din.
ng ny bøtte liste
Dette vil opprette alle filene som trengs for å komme i gang. Som du kan se, har Angular CLI opprettet mange filer som ellers ville lage deg selv i tidligere versjoner, dvs. Angular v1.
For å se programmet i nettleseren, naviger til prosjektmappen og kjør ng -serve. Denne kommandoen brukes til å betjene et program lokalt.
cd bucketlist ng -serve
Gå nå til http: // localhost: 4200 / for å se søknaden din i bruk. Eventuelle endringer du gjør i søknaden din, oppdateres i nettleseren din, slik at du ikke trenger å fortsette å kjøre programmet.
Nå som vi har opprettet vår app, er det på tide å distribuere den. Vi skal følge disse trinnene:
For å starte, må du ha en Firebase-konto. Hvis du ikke har en, må du registrere deg for en gratis konto nå.
I Firebase-dashbordet oppretter du et nytt prosjekt som vist nedenfor. Du kan ganske enkelt gi det samme navn som Angular app. Dette vil gjøre det enkelt, spesielt hvis du har mange prosjekter på Firebase-dashbordet.
Firebase gjør det enkelt å sette opp hosting, da det gir deg alle trinnene å følge med. Hvis du vil installere Firebase-kommandoer, kjører du ganske enkelt:
npm installer -g firebase-verktøy
Merk: Du bør være i prosjektkatalogen når du utsteder denne kommandoen, slik at verktøyene blir installert i prosjektet.
Logg inn på Firebase.
Firebase login
Svar Ja til den interaktive spørringen.
? Tillat Firebase å samle inn anonym CLI-bruk og feilrapporteringsinformasjon? Ja Besøk denne nettadressen på en hvilken som helst enhet for å logge på: https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww .googleapis.com% 2Fauth% 2Fcloudplatformprojects.readonly% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Ffirebase% 20https% 3A% 2F% 2Fwww.googleapis.com% 2Fauth% 2Fcloud-plattformens response_type = kode & state = 486130067 & redirect_uri = http % 3A% 2F% 2Flocalhost% 3A9005 Venter på godkjenning ...
Deretter åpner Firebase CLI-verktøyet en nettleser hvor du blir bedt om å tillate Firebase å godkjenne via Google Mail.
Hvis godkjenningen er vellykket, får du følgende grensesnitt i nettleseren din på http: // localhost: 9005 /.
Det neste trinnet er å initialisere Firebase-prosjektet. Dette vil koble din lokale Angular-app til Firebase-programmet du nettopp har opprettet. For å gjøre dette, bare kjør:
firebase init
Velg Hosting som funksjonen du vil sette opp for prosjektet siden vi bare er interessert i Firebase hosting.
################################## ######################################## ################################## #### ########################## Du er i ferd med å initialisere en Firebase prosjekt i denne katalogen: / home / vaatiesther / Desktop / bucketlist? Hvilke Firebase CLI-funksjoner vil du sette opp for denne mappen? Trykk på Mellomrom for å velge funksjoner, og deretter Enter for å bekrefte valgene dine. Database: Implementere Firebas og Realtime Database Regler, Hosting: Konfigurer og distribuere Firebase Hosting Sites === Prosjektoppsett Først, la oss knytte denne prosjektkatalogen med et Firebase-prosjekt. Du kan opprette flere prosjektaliaser ved å bruke brannbase bruk - add, men for nå vil vi bare sette opp et standardprosjekt. ? Velg et standard Firebase-prosjekt for denne katalogen: Bucketlist (bucketlist-7 2e57) === Database Setup Firebase Realtime Database Rules lar deg definere hvordan dataene dine skal struktureres og når dataene dine kan leses fra og skrives til. ? Hvilken fil skal brukes til databasegrupper? database.rules.json ✔ Database Regler for bucketlist-72e57 er lastet ned til database.rules.json. Fremtidige modifikasjoner til database.rules.json vil oppdatere Database Regler når du kjører firebase distribusjon. === Hosting Setup Din offentlige katalog er mappen (i forhold til prosjektkatalogen) som inneholder Hosting-eiendeler som skal lastes opp med firebase-distribusjon. Hvis du har en byggeprosess for dine eiendeler, bruk byggproduktets katalog. ? Hva vil du bruke som din offentlige katalog? offentlig? Konfigurer som en enkeltsidig app (skriv alle nettadresser til /index.html)? Ja ✔ Skrev public / index.html jeg Skriver konfigurasjonsinformasjon til firebase.json ... Jeg skriver prosjektinformasjon til .firebaserc ... ✔ Firebase-initialisering er fullført!
Denne kommandoen vil opprette to filer:
Disse to filene inneholder Firebase-konfigurasjonene og noen viktige opplysninger om appen din.
JSON-filen skal se slik ut:
"public": "public", "ignore": ["firebase.json", "** /. *", "** / node_modules / **"], "rewrites": [ "kilde": "**", "destinasjon": "/index.html"]
Vinkel CLI gir ng bygge - prod kommando, som starter en produksjonsbygg. Denne kommandoen skaper en dist mappe som inneholder alle filene for visning av appen. Denne prosessen er viktig for å gjøre appen din lettere og raskere når du laster inn websider. For å gjøre dette, bare utstede:
ng bygge - prod
Hvis du har fulgt alle trinnene til nå, er vår lokale Angular app nå koblet til Firebase, og du kan enkelt skyve filene slik du gjør med Git. Bare utfør Firebase distribuere kommandoen for å distribuere appen din.
firebase deploy === Utplassering til 'bucketlist-72e57' ... Jeg distribuerer database, hosting i database: sjekker regler syntaks ... ✔ database: regler syntaks for database bucketlist-72e57 er gyldig jeg hosting: forbereder offentlig katalog for opplasting ... ✔ hosting: 1 filer lastet opp i database: frigjør regler ... ✔ database: regler for database bucketlist-72e57 utgitt med suksess ✔ distribuere fullført!
Appen din er nå distribuert, og du kan vise den ved å utstede følgende kommando.
Accentsconagua
Firebase åpne hosting: nettstedSom du har sett, er det veldig enkelt å komme i gang med Firebase, da det er svært lite oppsett som trengs for å få appen din vert. Og det tar mye mindre tid enn å sette opp tradisjonell hosting! Angular er et flott rammeverk for app utvikling - det har virkelig utviklet seg gjennom årene, og hver oppdatering kommer med mer avanserte funksjoner og feilrettinger.
For mer informasjon, besøk Official Angular Site og Firebase og undersøk mulighetene for å bruke disse to teknologiene sammen.
