Share
I denne serien bruker vi AngularJS og Firebase for å lage et enkelt webprogram fra begynnelsen. Det blir en enkel blogging-applikasjon der brukeren kan logge på eller registrere seg og publisere et blogginnlegg.
Denne opplæringen antar at du har grunnleggende kunnskaper om AngularJS, men det bør ikke være vanskelig å hente opp emnene underveis. Hvis du sliter med feil eller feil som du ikke kan synes å fikse, kan du prøve en av ekspertbugfixerne på Envato Studio.
AngularJS er en av de mest etterspurte JavaScript MVC rammene. Det er et strukturelt rammeverk for å skape dynamiske webapplikasjoner ved å utvide HTML-evner. Funksjoner som datainnbinding og avhengighetsinjeksjon gjør det enklere å utvikle programmer med mindre kode.
Fra AngularJS dokumentasjonen:
HTML er flott for å deklarere statiske dokumenter, men det falter når vi prøver å bruke det for å erklære dynamiske visninger i webapplikasjoner. AngularJS lar deg forlenge HTML-ordforråd for din søknad. Det resulterende miljøet er ekstraordinært uttrykksfulle, lesbare og raske til å utvikle.
Tenk deg å lage et webprogram uten å måtte bekymre deg om baksiden. Firebase gjør det mulig å synkronisere data i sanntid med vår søknad uten å plage om back-end. Alt vi trenger å gjøre er å gjøre noen API-anrop.
Firebase er en kraftig API for å lagre og synkronisere data i sanntid. Kombinere kraften til AngularJS toveis databinding med Firebase resulterer i en treveis synkronisering som er ganske fantastisk.
De vinkel-frø prosjektet er en boilerplate for å komme i gang med å lage webapps ved hjelp av AngularJS. Last ned eller klon på vinkel-frø prosjekt fra depotet.
$ git klon https://github.com/angular/angular-seed.git
Naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
$ cd vinkelfrø $ npm installere ## Installer avhengighetene
Start nodeserveren:
$ npm start ## Start serveren
Pek nettleseren din til http: // localhost: 8000 / app / index.html og du bør se standard app som kjører.
Naviger til app katalog inni vinkel-frø. Dette er hvor søknadskoden ligger. Inne i app mappe finner du app.js som er kjernen i appen. Vi vil erklære alle app-nivå moduler og ruter inne i denne filen. Som standard er vinkel-frø prosjektet har to visninger, view1 og view2. Slett mappene view1 og view2 fra appmappen.
La oss starte fra bunnen av. Åpne opp app.js og fjern eksisterende kode. I app.js Vi skal definere programruter, for eksempel hvordan du håndterer en forespørsel som /hjem. For å definere ruter, trenger vi en AngularJS-modul kalt ngRoute. Å bruke ngRoute vi må først injisere den eller legge den inn i vår søknad. Vi bruker angular.module for å legge til ngRoute modul til vår app som vist nedenfor:
Accentsconagua
angular.module ('myApp', ['ngRoute'])De ngRoute Modulen har en komponent som kalles $ routeProvider som er nyttig for å konfigurere ruter. Vi skal injisere $ routeProvider inn i det config Metode av angular.module og definer våre ruter i tilbakeringingsfunksjonen som vist nedenfor:
'bruk streng'; angular.module ('myApp', ['ngRoute']). config (['$ routeProvider', funksjon ($ routeProvider) // Ruter vil være her]);Deretter åpner du opp index.html og fjern skriptreferansene til view1 og view2. Fjern alt fra kroppen til index.html bortsett fra skriptreferanser og div som er vist nedenfor med ngView-direktivet.
ngView er et direktiv som bidrar til å gjøre visningen knyttet til en bestemt rute til hovedoppsettet, index.html. Så hver gang ruten endres, endres innholdet av den viste diven.
La oss nå opprette en ny visning for brukeren å logge på. Innenfor app katalog opprette en ny mappe som heter hjem. Innsiden hjem, opprett to filer kalt home.html og home.js. Åpne opp home.html og ta med følgende HTML-kode:
AngularJS & Firebase Web App AngularJS & Firebase App!
Som vist i koden ovenfor bruker vi Bootstrap for å lage våre programvisninger.
Innsiden home.js, Vi vil erklære ruter for søknaden for å få tilgang til startvisningen. $ routeProvider har en metode kalt når, som vi skal bruke til å lage en rute for vårt hjemvisning. Når vi definerer en ny rute, setter vi inn en templateUrl som ville bli gjengitt i index.html. Sammen med det, vil vi også sette en kontrolleren for den nyopprettede $ omfang av hjemmet. En kontroller er en logikk som styrer en bestemt visning. Slik ser det ut:
'bruk streng'; angular.module ('myApp.home', ['ngRoute']) // Deklarert rute .config (['$ routeProvider', funksjon ($ routeProvider) $ routeProvider.when ('/ home', templateUrl: 'home /home.html ', kontroller:' HomeCtrl ';]) // Home controller .controller (' HomeCtrl ', [funksjon () ]);Åpne nå opp app.js og inkludere hjemmemodulen myApp.home i appen. Oppgi også standard ruten for applikasjonen vår ved hjelp av $ routeProvider.otherwise metode til hjemmevisningen.
'bruk streng'; angular.module ('myApp', ['ngRoute', 'myApp.home' // Ny lagt hjemmemodul]). config (['$ routeProvider', funksjon ($ routeProvider) // Angi defualt visning av vår app til hjemme $ routeProvider.otherwise (redirectTo: '/ home');]);For å vise hjemmesiden må vi derfor inkludere home.js inne i hoved HTML-malfilen til appen. Åpne opp index.html og inkludere følgende:
Start serveren på nytt og pek nettleseren din til http: // localhost: 8000 / app / index.html, og du bør se påloggingsskjermen:
For å komme i gang må vi registrere oss for en gratis konto på Firebase. Ved vellykket påmelding får vi en skjerm som dette:
Legg merke til nettadressen til appen som ble opprettet, og klikk på Administrer app knapp. Vi bruker denne brannbasen URL til å samhandle med Firebase databasen.
Vi bruker Firebase til å godkjenne programmet vårt ved hjelp av en e-post og et passord. For å få det til å fungere, må vi aktivere det fra Firebase. Fra dashbordet klikker du på Logg inn og Auth fanen på venstre side. I den skjermen, under Epost Passord fanen, sjekk Aktiver e-post og passordautentisering som vist:
Legg til en ny bruker med en e-post og Passord som vi vil godkjenne etter implementering av påloggingsfunksjonaliteten.
For å komme i gang med å bruke Firebase, ta med følgende skript i app / index.html:
Deretter må vi injisere Fire modul i home.js. Legg til Fire modul i home.js som vist under:
angular.module ('myApp.home', ['ngRoute', 'firebase'])Nå er vi klare til å samhandle med Firebase. Åpne opp home.js og innvendig HomeCtrl, opprett en ny funksjon kalt Logg inn å autentisere brukeren. Vi skal bruke $ omfang å opprette den nye funksjonen. $ omfang er et objekt som refererer til applikasjonsmodellen, og fungerer også som lim mellom programstyreren og visningen. Derfor injiserer vi $ omfang objekt inn i Logg inn fungere slik at objektmodellen fra visning er tilgjengelig inne i Logg inn funksjon.
$ scope.SignIn = funksjon ($ omfang) var brukernavn = $ scope.user.email; var passord = $ scope.user.password; // Auth Logic vil være her
Deretter inne HomeCtrl opprett en Firebase-forekomst ved å bruke Firebase-URLen som vist:
var firebaseObj = ny Firebase ("https://blistering-heat-2473.firebaseio.com"); De $ firebaseSimpleLogin Modulen brukes til å godkjenne mot Firebase ved hjelp av e-post-ID og passord. For å bruke det, må vi injisere $ firebaseSimpleLogin modul i HomeCtrl som vist:
.controller ('HomeCtrl', ['$ scope', '$ firebaseSimpleLogin', funksjon ($ omfang, $ firebaseSimpleLogin) Ved hjelp av firebaseObj lage en $ firebaseSimpleLogin eksempel som vist:
var loginObj = $ firebaseSimpleLogin (firebaseObj);
Nå, ved hjelp av API-innloggingen for $, godkjenner vi e-post-ID og passord mot Firebase. loginObj $ innlogging. tar inn e-post og passord som parametere. Ved vellykket autentisering får vi en tilbakekalling tilbakebetaling, og ved mislykket autentisering mottar vi en tilbakekalling av feil.
$ scope.SignIn = funksjon (hendelse) event.preventDefault (); // For å forhindre skjemaoppdatering var brukernavn = $ scope.user.email; var passord = $ scope.user.password; login (logg inn), passord Feil tilbakeringing console.log ('Autentiseringsfeil');); Nå, for alle ovennevnte kontrollerkoder skal fungere, må vi feste kontrolleren til visningen. AngularJS gir et direktiv kalt ngController for å feste en kontroller til en visning. Åpne opp home.html og legg til ngController direktiv til kropp element for å feste det til HomeCtrl.
Vi trenger e-postadressene og passordverdiene for å være tilgjengelige i Logg inn kontrolleren funksjon. AngularJS gir et direktiv kalt ngModel for å binde sin verdi til $ omfang slik at den er tilgjengelig inne i Logg inn funksjon. Inkluder ngModel Direktiv til e-post og passord inngang elementer som vist:
AngularJS & Firebase App!
Til slutt legger du ngClick-direktivet til påloggingsknappen for å ringe Logg inn funksjon:
Lagre alle endringene og start serveren på nytt. Pek nettleseren din til http: // localhost: 8000 / app / index.html # / home, og prøv å logge på med e-post-IDen [email protected] og passord jay. Ved vellykket brukerautentisering bør du se meldingen Godkjenning godkjent i nettleserkonsollen.
I denne opplæringen har vi gjennomgått hvordan du kommer i gang med å lage et AngularJS-webprogram. Vi implementerte påloggingsfunksjonaliteten og godkjente brukeren godt mot Firebase-databasen.
I den andre delen av denne opplæringen tar vi dette til neste nivå ved å implementere valideringer, påloggingsfunksjonalitet og noen andre funksjoner. Kode fra ovenstående veiledning er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker i kommentarene nedenfor.
Vær også sikker på å sjekke ut det brede utvalget av AngularJS-ressurser på Envato Market. Det er alt fra CRUD-tabelldirektiver til billettsystemer og mer.
AngularJS ressurser på Envato Market
