Share
Angular CLI este o interfață pentru linia de comandă pentru unghiular și una dintre cele mai ușoare căi de a lansa aplicația. Frumusețea utilizării CLI Angular este că vă permite să vă concentrați asupra codului dvs., fără să vă faceți griji cu privire la structura aplicației dvs., deoarece toate fișierele necesare sunt generate pentru dvs..
Este foarte ușor să creați aplicații gata de producție cu CLI Angular. Pe de altă parte, Firebase îl face rapid pentru a găzdui aplicații. În plus, Firebase are o mulțime de caracteristici și un plan gratuit care vă permite să experimentați cu platforma fără a fi legat de un plan plătit.
Planul gratuit are următoarele caracteristici:
Pentru a executa CLI Angular, trebuie să aveți Node.js 6.9 și NPM 3 sau mai mare instalate pe sistemul dvs. Dacă nu aveți instalat Node.js, vizitați site-ul web Node.js pentru a găsi instrucțiuni despre cum să instalați Node.js pe sistemul dvs. de operare.
De asemenea, trebuie să aveți o înțelegere de bază a următoarelor:
Instalarea CLI unghiular este la fel de ușor ca:
npm install -g @ unghiular / cli
Comanda de mai sus instalează cea mai recentă versiune de Angular. Pentru a valida instalarea cu succes a parametrului CLI Angular, emiteți următoarea comandă:
ng - versiune _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | | / _ '| „__ | | | | | | | / ___ \ | | | | (_ | | | | | | _ | | _ | _ | _ | _ | | | | __, | \ __, _ | _ | \ __, _ | _ | ____ | _____ | ___ | | ___ / CLI unghiular: 6.0.8 Nod: 10.7.0 OS: linux x64 Angular: ... Versiune pachet ------------------- ----------------------------------- @ angular-devkit / arhitect 0.6.8 @ angular-devkit / core 0.6.8 @ angular-devkit / schematică 0.6.8 @ schematică / unghiulară 0.6.8 @ schematică / actualizare 0.6.8 rxjs 6.2.2 tipcript 2.7.2
Acum, când ați instalat CLI Angular, putem începe dezvoltarea aplicației noastre. În acest tutorial nu ne vom arunca cu capul în componentele care alcătuiesc un proiect CLI Angular, deoarece acest post se referă în principal la implementarea în Firebase.
Pentru a crea o nouă aplicație, pur și simplu rulați ng nou [name_of_project], unde înlocuiți name_of_project cu numele aplicației dvs..
ng new bucketlist
Aceasta va crea toate fișierele necesare pentru a începe. După cum puteți vedea, CLI Angular a creat o mulțime de fișiere pe care le-ați crea în alte versiuni anterioare, adică Angular v1.
Pentru a vizualiza aplicația în browser, navigați la dosarul proiectului și executați ng -serve. Această comandă este utilizată pentru a servi o aplicație locală.
cd bucketlist ng -serve
Acum, navigați la http: // localhost: 4200 / pentru a vedea aplicația în acțiune. Orice modificări pe care le faceți în aplicația dvs. sunt reîncărcate în browserul dvs., astfel încât nu trebuie să continuați să rulați aplicația.
Acum că am creat aplicația noastră, este timpul să o implementăm. Vom urma următorii pași:
Pentru a începe, va trebui să aveți un cont Firebase. Dacă nu aveți unul, mergeți acum pentru un cont gratuit.
Pe tabloul de bord Firebase, creați un nou proiect, după cum se arată mai jos. Puteți să îi dați pur și simplu același nume ca aplicația dvs. Angular. Acest lucru va face mai ușor, mai ales dacă aveți multe proiecte pe tabloul de bord Firebase.
Firebase facilitează configurarea găzduirii deoarece vă oferă toate pașii de urmat. Pentru a instala instrumentele de comandă Firebase, pur și simplu rulați:
npm install -g firebase-tools
Notă: Trebuie să fiți în directorul de proiect atunci când lansați această comandă, astfel încât instrumentele să fie instalate în proiectul dvs..
Conectați-vă la Firebase.
introducere firebase
Răspuns da la solicitarea interactivă.
? Permiteți Firebase să colecteze informații anonime CLI și raportarea erorilor? Da Accesați această adresă URL pe orice dispozitiv pentru a vă conecta: 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-platform & response_type = cod & stare = 486130067 & redirect_uri = http % 3A% 2F% 2Flocalhost% 3A9005 Așteptare pentru autentificare ...
Apoi, instrumentul Firebase CLI va deschide un browser unde vi se va cere să permiteți autentificării Firebase prin Google Mail.
Dacă autentificarea are succes, veți primi următoarea interfață în browser-ul dvs. la adresa http: // localhost: 9005 /.
Următorul pas este inițializarea proiectului dvs. Firebase. Acest lucru va face legătura între aplicația dvs. Angular locală și aplicația Firebase pe care tocmai ați creat-o. Pentru a face acest lucru, pur și simplu rulați:
firebase init
Alegeți Gazduire ca facilitate pe care doriți să o configurați pentru proiect, deoarece suntem interesați doar de hostingul Firebase.
################################################################################ ### ## ## ## ## ## ## ## ##################################################################################### ################################################################################################# #### ## ## ######## ######## ## ## ############## Sunteți pe cale să inițializați un Firebase proiect în acest director: / home / vaatiesther / Desktop / bucketlist? Ce funcții CLI Firebase doriți să configurați pentru acest dosar? Apăsați Space pentru a selecta caracteristicile, apoi Enter pentru a vă confirma alegerile. Baza de date: Implementarea Firebas e Reguli baze de date în timp real, Gazduire: Configurarea și implementarea site-urilor Firebase Hosting === Instalarea proiectului Mai întâi, să asociem acest director de proiect cu un proiect Firebase. Aveți posibilitatea să creați mai multe aliasuri de proiecte prin rularea firebase - add, dar pentru moment vom seta doar un proiect implicit. ? Selectați un proiect Firebase implicit pentru acest director: Bucketlist (bucketlist-7 2e57) === Configurarea bazei de date Firebase Regulile bazei de date în timp real vă permit să definiți modul în care datele dvs. ar trebui să fie structurate și când datele dvs. pot fi citite și scrise la. ? Ce fișier ar trebui să fie utilizat pentru Regulile bazei de date? database.rules.json ✔ Regulile bazei de date pentru bucketlist-72e57 au fost descărcate la database.rules.json. Modificările viitoare la database.rules.json vor actualiza regulile bazei de date atunci când executați implementarea firebase-ului. === Setarea pentru Gazduire Directorul dvs. public este directorul (relativ la directorul de proiect) care va contine activele Gazduire care vor fi incarcate cu implementarea firebase-ului. Dacă aveți un proces de construire pentru activele dvs., utilizați directorul de ieșire al construirii. ? Ce doriți să utilizați ca adresă publică? public? Configurați ca aplicație de o singură pagină (rescrieți toate urlurile în /index.html)? Da ✔ A scris public / index.html i Scrierea informațiilor de configurare în firebase.json ... i Scrierea informațiilor despre proiect în .firebaserc ... ✔ Initializarea Firebase completă!
Această comandă va crea două fișiere:
Aceste două fișiere conțin configurările Firebase și câteva informații importante despre aplicația dvs..
Fișierul JSON ar trebui să arate astfel:
"hosting": "public": "public", "ignore": [ "sursă": "**", "destinație": "/index.html"]
Angular CLI oferă ng build --prod comandă, care inițiază o producție de producție. Această comandă creează o dist care conține toate fișierele pentru difuzarea aplicației. Acest proces este important pentru a face ca aplicația să fie mai ușoară și mai rapidă în încărcarea paginilor web. Pentru a face acest lucru, pur și simplu emite:
ng build --prod
Dacă ați urmat toți pașii până acum, aplicația noastră Angular locală este acum legată de Firebase și puteți împinge cu ușurință fișierele așa cum faceți cu Git. Pur și simplu executați firebase se desfășoară comanda pentru a implementa aplicația.
firebase deploy === Implementarea în 'bucketlist-72e57' ... implementarea bazei de date, gazduirea bazei de date i: verificarea sintaxei de reguli ... ✔ baza de date: sintaxa de reguli pentru baza de date bucketlist-72e57 este validă i hosting: pregătirea directorului public pentru încărcare ... fișiere încărcate cu succes bază de date i: reguli de publicare ... ✔ bază de date: reguli pentru baza de date bucketlist-72e57 lansate cu succes ✔ implementare completă!
Aplicația dvs. este acum implementată și o puteți vizualiza prin emiterea următoarei comenzi.
Accentsconagua
firebase open hosting: siteDupă cum ați văzut, este foarte ușor să începeți cu Firebase, deoarece este nevoie de o configurare foarte mică pentru a vă găzdui aplicația. Și este nevoie de mult mai puțin timp decât crearea unei găzduări tradiționale! Angular este un cadru excelent pentru dezvoltarea aplicațiilor - a evoluat cu adevărat de-a lungul anilor și fiecare actualizare vine cu funcții mai avansate și soluții de bug-uri.
Pentru mai multe informații, vizitați site-ul Official Angular și Firebase și explorați posibilitățile de utilizare a acestor două tehnologii împreună.
