Share
In questa serie, utilizzeremo AngularJS e Firebase per creare da zero un'applicazione web semplice. Sarà una semplice applicazione di blogging in cui l'utente può accedere o iscriversi e pubblicare un post sul blog.
Questo tutorial presume che tu abbia una conoscenza di base di AngularJS, ma non dovrebbe essere difficile raccogliere gli argomenti lungo il percorso. Se hai problemi con bug o errori che non riesci a risolvere, prova uno degli esperti bug fixer su Envato Studio.
AngularJS è uno dei framework MVC JavaScript più richiesti. È un framework strutturale per la creazione di applicazioni Web dinamiche estendendo le capacità HTML. Funzionalità come l'associazione dati e l'integrazione delle dipendenze facilitano lo sviluppo di app con meno codice.
Dalla documentazione AngularJS:
L'HTML è ottimo per dichiarare documenti statici, ma vacilla quando proviamo a usarlo per dichiarare viste dinamiche nelle applicazioni web. AngularJS ti consente di estendere il vocabolario HTML per la tua applicazione. L'ambiente risultante è straordinariamente espressivo, leggibile e veloce da sviluppare.
Immagina di creare un'applicazione web senza doversi preoccupare del lato back-end. Firebase consente di sincronizzare i dati in tempo reale con la nostra applicazione senza preoccuparci del back-end. Tutto quello che dobbiamo fare è fare alcune chiamate API.
Firebase è una potente API per archiviare e sincronizzare i dati in tempo reale. Combinando la potenza del collegamento dati bidirezionale AngularJS con Firebase si ottiene una sincronizzazione a tre vie che è davvero fantastica.
Il angolare seme il progetto è una ricetta per iniziare a creare applicazioni web usando AngularJS. Scarica o clona il angolare seme progetto dal repository.
$ git clone https://github.com/angular/angular-seed.git
Passare alla directory del progetto e installare le dipendenze richieste.
$ cd angular-seed $ npm install ## Installa le dipendenze
Avvia il server del nodo:
$ npm start ## Avvia il server
Indirizza il tuo browser a http: // localhost: 8000 / app / index.html e dovresti vedere l'applicazione predefinita in esecuzione.
Vai a App directory all'interno angolare seme. Qui è dove risiede il codice dell'applicazione. Dentro il App cartella che troverai app.js che è il cuore dell'app. Dichiareremo tutti i moduli e le rotazioni a livello di app all'interno di questo file. Di default, il angolare seme progetto ha due punti di vista, view1 e view2. Elimina le cartelle view1 e view2 dalla cartella dell'app.
Iniziamo da zero. Aprire app.js e rimuovere il codice esistente. Nel app.js definiremo i nostri percorsi applicativi, ad esempio, come gestire una richiesta come /casa. Per definire i percorsi, abbiamo bisogno di un modulo AngularJS chiamato ngRoute. Usare ngRoute per prima cosa è necessario iniettarlo o aggiungerlo alla nostra applicazione. Useremo angular.module per aggiungere il ngRoute modulo alla nostra app come mostrato di seguito:
Accentsconagua
angular.module ('myApp', ['ngRoute'])Il ngRoute il modulo ha un componente chiamato $ routeProvider che è utile per la configurazione dei percorsi. Ci inietteremo $ routeProvider nel config metodo di angular.module e definire i nostri percorsi nella sua funzione di callback come mostrato di seguito:
'usare rigoroso'; angular.module ('myApp', ['ngRoute']). config (['$ routeProvider', function ($ routeProvider) // Routes sarà qui]);Quindi, apri index.html e rimuovere i riferimenti di script a view1 e view2. Rimuovi tutto dal corpo di index.html tranne i riferimenti di script e il div mostrato di seguito con la direttiva ngView.
ngView è una direttiva che aiuta a rendere la vista collegata con una particolare rotta nel layout principale, index.html. Quindi, ogni volta che il percorso cambia, il contenuto del div mostrato sopra cambia.
Ora creiamo una nuova vista per consentire all'utente di accedere. All'interno di App directory crea una nuova cartella chiamata casa. Dentro casa, crea due file chiamati home.html e home.js. Aprire home.html e includi il seguente codice HTML:
AngularJS & Firebase Web App AngularJS & Firebase App!
Come visto nel codice sopra, useremo Bootstrap per creare le nostre viste dell'applicazione.
Dentro home.js, dichiareremo i percorsi per l'applicazione per accedere alla vista home. $ routeProvider ha un metodo chiamato quando, che useremo per creare un percorso per la nostra vista home. Quando definiamo un nuovo percorso, imposteremo a TemplateURL quale sarebbe reso nel index.html. Insieme a ciò, stabiliremo anche un controllore per il nuovo creato $ portata della vista iniziale. Un controller è una logica che controlla una vista particolare. Ecco come dovrebbe apparire:
'usare rigoroso'; angular.module ('myApp.home', ['ngRoute']) // Route dichiarata .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ home', templateUrl: 'home /home.html ', controller:' HomeCtrl ');]) // Home controller .controller (' HomeCtrl ', [function () ]);Ora apri app.js e includere il modulo di casa myApp.home nell'app. Dichiara anche il percorso predefinito della nostra applicazione usando il $ routeProvider.otherwise metodo per la visualizzazione iniziale.
'usare rigoroso'; angular.module ('myApp', ['ngRoute', 'myApp.home' // Modulo home appena aggiunto]). config (['$ routeProvider', function ($ routeProvider) // Imposta la vista defualt della nostra app su home $ routeProvider.otherwise (redirectTo: '/ home');]);Successivamente, per visualizzare la homepage, dobbiamo includere home.js all'interno del file di modello HTML principale dell'app. Aprire index.html e includere quanto segue:
Riavvia il server e indirizza il browser a http: // localhost: 8000 / app / index.html e dovresti visualizzare la schermata di accesso:
Per iniziare, è necessario registrarsi per un account gratuito su Firebase. Se la registrazione è andata a buon fine, otterremo una schermata come questa:
Prendere nota dell'URL dell'app creata e fare clic su Gestisci app pulsante. Useremo questo URL Firebase per interagire con il database Firebase.
Useremo Firebase per autenticare la nostra applicazione tramite e-mail e password. Per farlo funzionare, dobbiamo abilitarlo da Firebase. Dalla dashboard, fai clic su Login e autenticazione scheda nel menu di sinistra. In quello schermo, sotto il Email e password scheda, controllare Abilita autenticazione email e password come mostrato:
Aggiungi un nuovo utente con un E-mail e Parola d'ordine contro cui verificheremo dopo l'implementazione della funzionalità di accesso.
Per iniziare a utilizzare Firebase, includere i seguenti script in app / index.html:
Successivamente, abbiamo bisogno di iniettare il Firebase modulo in home.js. Aggiungi il Firebase modulo in home.js come mostrato di seguito:
angular.module ('myApp.home', ['ngRoute', 'firebase']))Ora siamo pronti per interagire con Firebase. Aprire home.js e dentro HomeCtrl, creare una nuova funzione chiamata Registrati per autenticare l'utente. Useremo $ portata per creare la nuova funzione. $ portata è un oggetto che fa riferimento al modello dell'applicazione e funge anche da collante tra il controller dell'applicazione e la vista. Quindi inietteremo il $ portata oggetto nel Registrati funzione in modo che il modello a oggetti dalla vista sia accessibile all'interno di Registrati funzione.
$ scope.SignIn = function ($ scope) var nomeutente = $ scope.user.email; var password = $ scope.user.password; // Logica dell'autore sarà qui
Avanti, dentro HomeCtrl crea un'istanza di Firebase utilizzando l'URL di Firebase come mostrato:
var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); Il $ firebaseSimpleLogin il modulo viene utilizzato per l'autenticazione con Firebase utilizzando un ID e una password. Per usarlo, dovremo iniettare il $ firebaseSimpleLogin modulo nella HomeCtrl come mostrato:
.controller ('HomeCtrl', ['$ scope', '$ firebaseSimpleLogin', function ($ scope, $ firebaseSimpleLogin) utilizzando firebaseObj creare un $ firebaseSimpleLogin esempio come mostrato:
var loginObj = $ firebaseSimpleLogin (firebaseObj);
Ora, utilizzando l'API di accesso $, autenticeremo l'ID e la password e-mail contro Firebase. loginObj. $ login accetta l'email e la password come parametri. In caso di autenticazione riuscita, otteniamo una callback riuscita e su un'autenticazione non riuscita, otteniamo una richiamata di errore.
$ scope.SignIn = function (event) event.preventDefault (); // Per impedire l'aggiornamento del modulo var username = $ scope.user.email; var password = $ scope.user.password; loginObj. $ login ('password', email: username, password: password) .then (funzione (utente) // Success callback console.log ('Autenticazione riuscita');, funzione (errore) // Failure callback console.log ('Authentication failure');); Ora che tutto il codice del controller sopra funziona, è necessario collegare il controller alla vista. AngularJS fornisce una direttiva chiamata ngController per collegare un controller a una vista. Aprire home.html e aggiungi il ngController direttiva al corpo elemento per collegarlo a HomeCtrl.
Abbiamo bisogno che i valori di email e password siano accessibili all'interno di Registrati funzione del controller. AngularJS fornisce una direttiva chiamata ngModel per associare il suo valore a $ portata in modo che sia accessibile all'interno del Registrati funzione. Includi il ngModel direttiva per e-mail e password ingresso elementi come mostrato:
AngularJS & Firebase App!
Infine, aggiungi la direttiva ngClick al pulsante di accesso per chiamare il Registrati funzione:
Salva tutte le modifiche e riavvia il server. Indirizza il browser a http: // localhost: 8000 / app / index.html # / home e prova ad accedere utilizzando l'ID email [email protected] e password ghiandaia. In caso di autenticazione utente riuscita, dovresti vedere il messaggio Autenticazione riuscita nella console del browser.
In questo tutorial, abbiamo esaminato come iniziare a creare un'applicazione web AngularJS. Abbiamo implementato la funzionalità di accesso e l'utente è stato autenticato correttamente rispetto al database Firebase.
Nella seconda parte di questo tutorial, porteremo questo al livello successivo implementando convalide, funzionalità di registrazione e alcune altre funzionalità. Il codice dell'esercitazione precedente è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto.
Inoltre, assicurati di controllare la vasta gamma di risorse AngularJS su Envato Market. C'è tutto dalle direttive del tavolo CRUD ai sistemi di bigliettazione e altro.
Risorse AngularJS sul mercato Envato
