Share
În această serie, vom folosi AngularJS și Firebase pentru a crea o aplicație web simplă de la zero. Acesta va fi o aplicație de bloguri simplu în care utilizatorul se poate conecta sau se poate înscrie și publica un post pe blog.
Acest tutorial presupune că aveți cunoștințe de bază despre AngularJS, dar nu ar trebui să fie greu să ridicați subiectele de-a lungul drumului. Dacă vă confruntați cu erori sau erori pe care nu le puteți rezolva, încercați unul dintre experții de remediere a erorilor de pe Envato Studio.
AngularJS este unul dintre cele mai căutate cadre MVC JavaScript. Este un cadru structural pentru crearea de aplicații web dinamice prin extinderea capabilităților HTML. Caracteristici cum ar fi legarea datelor și injecția de dependență ușurează dezvoltarea de aplicații cu un cod mai mic.
Din documentația AngularJS:
HTML este excelent pentru declararea documentelor statice, dar se estompează atunci când încercăm să-l folosim pentru a declara vizualizări dinamice în aplicațiile web. AngularJS vă permite să extindeți vocabularul HTML pentru aplicația dvs. Mediul rezultat este extraordinar de expresiv, lizibil și rapid de dezvoltat.
Imaginați-vă crearea unei aplicații web fără să vă faceți griji cu privire la partea din spate. Firebase permite sincronizarea datelor în timp real cu aplicația noastră, fără a ne deranja despre back-end. Tot ce trebuie să facem este să efectuăm anumite apeluri API.
Firebase este un API puternic pentru stocarea și sincronizarea datelor în timp real. Combinând puterea AnglareJS legată de date cu Firebase duce la o sincronizare în trei direcții, care este destul de minunată.
unghiular de semințe proiectul este o boilerplate pentru a începe să creați aplicații web folosind AngularJS. Descărcați sau clonați unghiular de semințe proiect din depozit.
$ git clone https://github.com/angular/angular-seed.git
Navigați la directorul proiectului și instalați dependențele necesare.
$ cd unghiul-noun $ npm install ## Instalați dependențele
Porniți serverul de noduri:
$ npm start ## Porniți serverul
Punctați browserul dvs. la http: // localhost: 8000 / app / index.html și ar trebui să vedeți ca aplicația implicită să fie difuzată.
Navigați la aplicaţia directorul interior unghiular de semințe. Aici se află codul aplicației. În interiorul aplicaţia dosarul pe care îl veți găsi app.js care este nucleul aplicației. Vom declara toate modulele și rutele de nivel de aplicație din interiorul acestui fișier. În mod implicit, funcția unghiular de semințe proiectul are două puncte de vedere, view1 și view2. Ștergeți folderele view1 și view2 din dosarul aplicației.
Să începem de la zero. Deschide app.js și eliminați codul existent. În app.js vom defini traseele noastre de aplicații, cum ar fi, de exemplu, modul de gestionare a unei cereri ca /Acasă. Pentru a defini rutele, vom avea nevoie de un modul AngularJS numit ngRoute. A folosi ngRoute trebuie mai întâi să-l injectăm sau să-l adăugăm în aplicația noastră. Vom folosi angular.module pentru a adăuga ngRoute modulul de la aplicația noastră, după cum se arată mai jos:
Accentsconagua
angular.module ("myApp", ['ngRoute]) ngRoute modulul are o componentă denumită $ routeProvider, care este utilă pentru configurarea rutelor. Vom injecta $ routeProvider în config Metodă de angular.module și să definească rutele în funcția de apel invers așa cum se arată mai jos:
"utilizarea strictă"; angular.module ("myApp", ['ngRoute']). config (['$ routeProvider', funcție ($ routeProvider) // Rutele vor fi aici]);Apoi, deschide-te index.html și eliminați referințele de script view1 și view2. Eliminați totul de la corpul lui index.html cu excepția referințelor de script și div prezentate mai jos cu directiva ngView.
ngView este o directivă care ajută la a face viziunea atașată unui anumit traseu în structura principală, index.html. Deci, de fiecare dată când traseul se schimbă, conținutul modificărilor de mai sus arată schimbări.
Acum, să creăm o nouă vizualizare pentru conectarea utilizatorului aplicaţia director crea un nou folder numit Acasă. Interior Acasă, creați două fișiere numite home.html și home.js. Deschide home.html și includeți următorul cod HTML:
Aplicația AngularJS & Firebase Web AngularJS & Firebase App!
După cum se vede în codul de mai sus, vom folosi Bootstrap pentru a crea vizualizările aplicațiilor noastre.
Interior home.js, vom declara rutele pentru aplicație pentru a accesa vizualizarea de acasă. $ routeProvider are o metodă numită cand, pe care o vom folosi pentru a crea un traseu pentru vizualizarea noastră de acasă. Când definim un nou traseu, vom seta a templateUrl care ar fi prestate în index.html. Împreună cu asta, vom seta și a controlor pentru nou-creat domeniul de aplicare $ din viziunea la domiciliu. Un controler este o logică care controlează o anumită imagine. Iată cum ar trebui să arate:
"utilizarea strictă"; (* 'home', templateUrl: 'home route'), (*) /home.html ", controler: 'HomeCtrl');]) // controler de acasă .controller ('HomeCtrl', [function () ]);Deschide acum app.js și include modulul de acasă myApp.home în aplicație. De asemenea, declarați calea implicită a aplicației noastre utilizând $ routeProvider.otherwise la vizualizarea la domiciliu.
"utilizarea strictă"; angular.module ("myApp", ['ngRoute', 'myApp.home' // Modul acasă nou adăugat]). config (['$ routeProvider', funcție ($ routeProvider) // Setați vizualizarea defualt a aplicației noastre la domiciliul $ routeProvider.otherwise (redirectTo: '/ home');]);Apoi, pentru a afișa pagina de pornire, trebuie să includeți home.js în interiorul fișierului HTML principal al aplicației. Deschide index.html și includ următoarele:
Reporniți serverul și îndreptați-l la http: // localhost: 8000 / app / index.html și ar trebui să vedeți ecranul de conectare:
Pentru a începe, trebuie să vă înregistrați pentru un cont gratuit pe Firebase. În cazul înscrierii reușite, vom primi un ecran de genul:
Notați adresa URL a aplicației create și faceți clic pe Gestionați aplicația buton. Vom folosi această adresă URL Firebase pentru a interacționa cu baza de date Firebase.
Vom utiliza Firebase pentru a vă autentifica aplicația utilizând un e-mail și o parolă. Pentru ca aceasta să funcționeze, trebuie să o activați de Firebase. Din tabloul de bord, faceți clic pe Autentificare & Auth în meniul din stânga. În ecranul respectiv, în cadrul ecranului Email și parolă fila, verificați Activați autentificarea prin e-mail și parolă așa cum se arată:
Adăugați un utilizator nou cu un E-mail și Parola împotriva căruia ne vom autentifica după implementarea funcționalității de conectare.
Pentru a începe să utilizați Firebase, includeți următoarele scripturi: app / index.html:
Apoi, trebuie să injectăm firebase modul în home.js. Adaugă firebase modul în home.js așa cum se arată mai jos:
angular.module ("myApp.home", ['ngRoute', 'firebase'])Acum suntem gata să interacționăm cu Firebase. Deschide home.js și înăuntru HomeCtrl, creați o nouă funcție numită Conectare pentru a autentifica utilizatorul. Vom folosi domeniul de aplicare $ pentru a crea noua funcție. domeniul de aplicare $ este un obiect care se referă la modelul de aplicație și, de asemenea, acționează ca un adeziv între controlerul aplicației și vizualizare. Prin urmare, vom injecta domeniul de aplicare $ obiect în Conectare astfel încât modelul obiect din vizualizare să fie accesibil în interiorul Conectare funcţie.
$ scope.SignIn = funcție (domeniul $) var username = $ scope.user.email; var parola = $ scope.user.password; // Auth Logic va fi aici
În continuare, înăuntru HomeCtrl creați o instanță Firebase folosind URL-ul Firebase după cum se arată:
var firebaseObj = noua Firebase ("https://blistering-heat-2473.firebaseio.com"); $ firebaseSimpleLogin modulul este utilizat pentru autentificarea împotriva Firebase folosind un ID de e-mail și o parolă. Pentru ao folosi, va trebui să injectăm $ firebaseSimpleLogin modul în HomeCtrl așa cum se arată:
.controler ("HomeCtrl", ['$ scope', '$ firebaseSimpleLogin', functie ($ scope, $ firebaseSimpleLogin) Utilizarea firebaseObj creeaza o $ firebaseSimpleLogin exemplu:
var loginObj = $ FirebaseSimpleLogin (firebaseObj);
Acum, folosind API-ul de autentificare $, vom autentifica ID-ul de e-mail și parola împotriva Firebase. loginObj. $ de conectare ia parametrii e-mail și parola. În cazul autentificării reușite, primim un apel de succes și, pe o autentificare nereușită, primim un apel de eroare.
$ scope.SignIn = funcție (eveniment) event.preventDefault (); // Pentru a preveni refresh form var username = $ scope.user.email; var parola = $ scope.user.password; [email protected] login ('parola', email: nume utilizator, parola: parola) .then (functie (utilizator) // Succes callback console.log ('Authentication successful'); Retur apel console.log ("Eroare de autentificare"););
Acum, pentru ca toate codurile controlerului de mai sus să funcționeze, trebuie să atașăm controlerul la vizualizare. AngularJS oferă o directivă numită ngController pentru a atașa un controler la o vizualizare. Deschide home.html și adăugați ngController directivă corp element pentru al atașa HomeCtrl.
Avem nevoie ca valorile e-mail și parola să fie accesibile în interiorul Conectare funcția de controler. AngularJS oferă o directivă numită ngModel pentru a-și lega valoarea domeniul de aplicare $ astfel încât să fie accesibilă în interiorul lui Conectare funcţie. Includeți ngModel directivă la adresa de e-mail și parola intrare elemente ilustrate:
AngularJS & Firebase App!
În cele din urmă, adăugați directiva ngClick la butonul de conectare pentru a apela Conectare funcţie:
Salvați toate modificările și reporniți serverul. Punctați browserul la adresa http: // localhost: 8000 / app / index.html # / home și încercați să vă conectați utilizând ID-ul de e-mail [email protected] și parola gaiță. La autentificarea cu succes a utilizatorului, ar trebui să vedeți mesajul Autentificarea a avut succes în consola browserului.
În acest tutorial, am analizat modul în care puteți începe crearea unei aplicații Web AngularJS. Am implementat funcția de conectare și am autentificat cu succes utilizatorul împotriva bazei de date Firebase.
În a doua parte a acestui tutorial, vom trece la următorul nivel prin implementarea validărilor, a funcționalității de înscriere și a altor funcții. Codul din tutorialul de mai sus este disponibil pe GitHub.
Spuneți-ne gândurile dvs. în comentariile de mai jos.
De asemenea, asigurați-vă că aveți o gamă largă de resurse AngularJS pe Envato Market. Există totul, de la directivele tabelului CRUD la sistemele de ticketing și multe altele.
Resursele AngularJS pe Envato Market
