Share
In deze serie zullen we AngularJS en Firebase gebruiken om een eenvoudige webtoepassing helemaal opnieuw te maken. Het zal een eenvoudige blogtoepassing zijn waarbij de gebruiker kan inloggen of zich kan aanmelden en een blogpost kan publiceren.
Deze tutorial veronderstelt dat je basiskennis hebt van AngularJS, maar het zou niet moeilijk moeten zijn om de onderwerpen onderweg op te pikken. Als je worstelt met bugs of fouten die je niet lijkt op te lossen, probeer dan een van de expert bug fixers op Envato Studio.
AngularJS is een van de meest gewilde JavaScript MVC-frameworks. Het is een structureel raamwerk voor het creëren van dynamische webtoepassingen door HTML-mogelijkheden uit te breiden. Functies zoals databinding en afhankelijkheidsinjectie maken het gemakkelijker om apps te ontwikkelen met minder code.
Uit de AngularJS-documentatie:
HTML is geweldig voor het declareren van statische documenten, maar het blijft hangen wanneer we het gebruiken om dynamische weergaven in webtoepassingen te declareren. Met AngularJS kunt u de HTML-woordenschat uitbreiden voor uw toepassing. De resulterende omgeving is buitengewoon expressief, leesbaar en snel te ontwikkelen.
Stel je voor dat je een webtoepassing maakt zonder je zorgen te hoeven maken over de achterkant. Firebase maakt het mogelijk om gegevens in realtime te synchroniseren met onze applicatie zonder zich zorgen te maken over de back-end. Het enige wat we moeten doen is een aantal API-aanroepen doen.
Firebase is een krachtige API om gegevens in realtime op te slaan en te synchroniseren. Het combineren van de kracht van AngularJS bidirectionele datumbinding met Firebase resulteert in een driewegsynchronisatie die vrij ontzagwekkend is.
De hoekige zaden project is een standaardplaatje om te beginnen met het maken van webapps met AngularJS. Download of kloont de hoekige zaden project van de repository.
$ git clone https://github.com/angular/angular-seed.git
Navigeer naar de projectdirectory en installeer de vereiste afhankelijkheden.
$ cd angular-seed $ npm install ## Installeer de afhankelijkheden
Start de knoopserver:
$ npm start ## Start de server
Richt uw browser op http: // localhost: 8000 / app / index.html en je zou de standaard app moeten zien draaien.
Navigeer naar de app map naar binnen hoekige zaden. Dit is waar de applicatiecode zich bevindt. Binnen in de app map die je zult vinden app.js wat de kern van de app is. We zullen alle modules en routes op app-niveau binnen dit bestand declareren. Standaard is de hoekige zaden project heeft twee opvattingen, view1 en view2. Verwijder de mappen view1 en view2 vanuit de app-map.
Laten we bij nul beginnen. Doe open app.js en verwijder de bestaande code. In app.js we zullen onze toepassingsroutes definiëren, bijvoorbeeld hoe een aanvraag als te behandelen /huis. Voor het definiëren van routes hebben we een AngularJS-module ngRoute nodig. Gebruiken ngRoute we moeten het eerst injecteren of toevoegen aan onze applicatie. We gebruiken angular.module om de. Toe te voegen ngRoute module voor onze app zoals hieronder getoond:
Accentsconagua
angular.module ('myApp', ['ngRoute'])De ngRoute module heeft een component genaamd $ routeProvider, wat handig is voor het configureren van routes. We zullen injecteren $ routeProvider in de config methode van angular.module en definieer onze routes in zijn callback-functie zoals hieronder getoond:
'gebruik strikt'; angular.module ('myApp', ['ngRoute']). config (['$ routeProvider', functie ($ routeProvider) // Routes zijn hier]);Open vervolgens index.html en verwijder de scriptverwijzingen naar view1 en view2. Verwijder alles uit het lichaam van index.html behalve de scriptreferenties en de div die hieronder wordt getoond met de opdracht ngView.
ngView is een richtlijn die ertoe bijdraagt dat het aanzicht met een bepaalde route in de hoofdlay-out wordt weergegeven, index.html. Dus elke keer dat de route verandert, verandert de inhoud van de hierboven getoonde div.
Laten we nu een nieuwe weergave maken voor de gebruiker om in te loggen. Binnen de app map maak een nieuwe map genaamd huis. Binnen huis, maak twee bestanden genaamd home.html en home.js. Doe open home.html en neem de volgende HTML-code op:
AngularJS & Firebase Web App AngularJS & Firebase-app!
Zoals te zien is in de bovenstaande code, zullen we Bootstrap gebruiken om onze applicatie-views te maken.
Binnen home.js, we verklaren de routes voor de toepassing om toegang te krijgen tot de startweergave. $ routeProvider heeft een methode genaamd wanneer, die we gebruiken om een route te maken voor onze thuisweergave. Wanneer u een nieuwe route definieert, stellen we een templateUrl welke zou worden gerenderd in de index.html. Samen met dat zullen we ook een instellen controleur voor de nieuw gecreëerde $ scope van de thuisweergave. Een controller is een logica die een bepaalde weergave bestuurt. Hier is hoe het eruit zou moeten zien:
'gebruik strikt'; angular.module ('myApp.home', ['ngRoute']) // Opgegeven route .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ home', templateUrl: 'home /home.html ', controller:' HomeCtrl ');]) // Home controller .controller (' HomeCtrl ', [function () ]);Open nu app.js en neem de thuismodule op myApp.home in de app. Verklaar ook de standaardroute van onze applicatie met behulp van de $ routeProvider.otherwise methode voor de thuisweergave.
'gebruik strikt'; angular.module ('myApp', ['ngRoute', 'myApp.home' // Nieuw toegevoegde thuismodule]). config (['$ routProvider', function ($ routeProvider) // Stel de standaardweergave van onze app in op home $ routeProvider.otherwise (redirectTo: '/ home');]);Vervolgens moeten we de startpagina opnemen om de startpagina weer te geven home.js in het HTML-hoofdsjabloonbestand van de app. Doe open index.html en omvatten het volgende:
Start de server opnieuw op en wijs uw browser naar http: // localhost: 8000 / app / index.html en u zou het inlogscherm moeten zien:
Om aan de slag te kunnen gaan, moeten we registreren voor een gratis account op Firebase. Na een geslaagde aanmelding ontvangen we een scherm zoals dit:
Noteer de URL van de gemaakte app en klik op de App beheren knop. We gebruiken deze Firebase-URL om te communiceren met de Firebase-database.
We gebruiken Firebase om onze toepassing te verifiëren met een e-mailadres en wachtwoord. Om het werkend te krijgen, moeten we het inschakelen vanuit Firebase. Klik vanuit het dashboard op de Inloggen en authenticeren tab in het menu aan de linkerkant. In dat scherm, onder de Email Wachtwoord tab, vink aan Schakel e-mail en wachtwoordverificatie in zoals getoond:
Voeg een nieuwe gebruiker toe met een E-mail en Wachtwoord waartegen we zullen authenticeren na implementatie van de sign-in functionaliteit.
Voer de volgende scripts in om aan de slag te gaan met het gebruik van Firebase app / index.html:
Vervolgens moeten we de firebase module in home.js. Voeg de toe firebase module in home.js zoals hieronder getoond:
angular.module ('myApp.home', ['ngRoute', 'firebase'])Nu zijn we klaar om te communiceren met Firebase. Doe open home.js en van binnen HomeCtrl, maak een nieuwe functie aan genaamd Aanmelden om de gebruiker te authenticeren. We zullen gebruiken $ scope om de nieuwe functie te maken. $ scope is een object dat verwijst naar het applicatiemodel en ook fungeert als lijm tussen de applicatiecontroller en de weergave. Daarom injecteren we de $ scope object in de Aanmelden functioneer zodat het objectmodel vanuit het zicht toegankelijk is binnen de Aanmelden functie.
$ scope.SignIn = function ($ scope) var gebruikersnaam = $ scope.user.email; var wachtwoord = $ scope.user.password; // Auth Logic is here
Vervolgens naar binnen HomeCtrl maak een Firebase-instantie met de Firebase-URL zoals weergegeven:
var firebaseObj = nieuwe Firebase ("https://blistering-heat-2473.firebaseio.com"); De $ firebaseSimpleLogin module wordt gebruikt om te authenticeren tegen Firebase met behulp van een e-ID en wachtwoord. Om het te gebruiken, moeten we de $ firebaseSimpleLogin module in HomeCtrl zoals getoond:
.controller ('HomeCtrl', ['$ scope', '$ firebaseSimpleLogin', function ($ scope, $ firebaseSimpleLogin) Gebruik makend van firebaseObj Maak een $ firebaseSimpleLogin voorbeeld zoals getoond:
var loginObj = $ firebaseSimpleLogin (firebaseObj);
Nu gebruiken we de $ login API om de e-mail-ID en het wachtwoord voor Firebase te verifiëren. loginObj. $ login neemt de e-mail en het wachtwoord op als parameters. Na succesvolle authenticatie krijgen we een callback voor succes en bij een niet-geslaagde authenticatie krijgen we een foutmelding.
$ scope.SignIn = function (event) event.preventDefault (); // Om formuliervernieuwing te voorkomen var gebruikersnaam = $ scope.user.email; var wachtwoord = $ scope.user.password; loginObj. $ login ('wachtwoord', email: gebruikersnaam, wachtwoord: wachtwoord) .then (functie (gebruiker) // callback console.log ('Authentication successful');, function (error) // Failure callback console.log ('Authentication failure');); Nu dat de bovenstaande controllercode werkt, moeten we de controller aan de weergave koppelen. AngularJS biedt een instructie genaamd ngController om een controller aan een weergave te koppelen. Doe open home.html en voeg de ngController richtlijn voor de lichaam element om aan te hechten HomeCtrl.
We hebben de e-mail- en wachtwoordwaarden nodig om toegankelijk te zijn binnen de Aanmelden regelaar functie. AngularJS biedt een richtlijn met de naam ngModel om de waarde ervan te binden $ scope zodat het toegankelijk is binnen de Aanmelden functie. Omvat de ngModel richtlijn voor de e-mail en het wachtwoord invoer elementen zoals getoond:
AngularJS & Firebase-app!
Voeg ten slotte de ngClick-richtlijn toe aan de aanmeldknop om de Aanmelden functie:
Sla alle wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 8000 / app / index.html # / home en probeer in te loggen met de e-mail-ID [email protected] en wachtwoord vlaamse gaai. Na succesvolle gebruikersauthenticatie zou u het bericht moeten zien Authenticatie succesvol in de browserconsole.
In deze zelfstudie hebben we bekeken hoe u aan de slag kunt gaan met het maken van een AngularJS-webtoepassing. We hebben de inlogfunctionaliteit geïmplementeerd en de gebruiker succesvol geverifieerd tegen de Firebase-database.
In het tweede deel van deze zelfstudie nemen we dit naar het volgende niveau door validaties, aanmeldingsfunctionaliteit en enkele andere functies te implementeren. Code van de bovenstaande tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder.
Bekijk ook het uitgebreide aanbod aan AngularJS-bronnen op Envato Market. Er is alles van CRUD-tabelrichtlijnen tot ticketingsystemen en meer.
AngularJS-middelen op Envato Market
