Bouw een AngularJS-app van Scratch, mogelijk gemaakt door Python EVE

In het vorige deel van deze serie zagen we hoe aan de slag te gaan met Eve, een Python REST API-framework, en een aantal API's te maken. In dit deel van de serie maken we gebruik van die API's om een toepassing te maken die mogelijk wordt gemaakt door Node.js en AngularJS.

We zullen de aanmeldingsfunctionaliteit implementeren met behulp van Node.js en andere functionaliteiten toevoegen door de REST API's van AngularJS aan te roepen.

Ermee beginnen

Om te beginnen, kloont u de broncode van de vorige zelfstudie en voert u de API's uit.

git clone https://github.com/jay3dec/REST_API_EVE_Part-1

Nadat je de broncode hebt gekloond, zorg je ervoor dat MongoDB actief is. Navigeer naar de REST_API_EVE_Part-1 map en voer de app uit:

cd REST_API_EVE_Part-1 python app.py

Nu moet je je API laten draaien op http: // localhost: 5000 /.

De NodeJS-app maken

Stap 1: De basisapp maken

Maak een projectmap met de naam AngularNodeApp. We gebruiken Express, een minimalistisch webtoepassingsraamwerk voor het maken van Node.js-toepassingen. Dus laten we installeren uitdrukken in ons project.

npm install express

Een keer uitdrukken is geïnstalleerd, maak een bestand aan met de naam app.js. Binnen app.js we zullen onze uitdrukkelijke applicatie maken en de routes voor de applicatie definiëren.

Laten we beginnen met het importeren van express in app.js en een express-app maken.

var express = require ('express'), app = express (); app.get ('/', functie (req, res) res.send ('welcome !!');); app.listen (3000)

We hebben zojuist een uitdrukkelijke app gemaakt en een route gedefinieerd, /, die zal terugkeren Welkom wanneer gevraagd. Start de server.

knooppunt app.js

Richt uw browser op http: // localhost: 3000 / en u zou het bericht moeten hebben Welkom !!.

Laten we een startpagina maken voor onze applicatie. Navigeer naar de projectmap en maak een nieuwe map met de naam openbaar. Binnen public / index maak een bestand aan met de naam index.html. Voeg de volgende HTML-code toe aan index.html.

   Angular Node App         Huis 
 Aanmelden 
 Inschrijven 
 
 
 Angular Node App
 
  Angular Node App
  Schrijf je vandaag in 
 
  © Bedrijf 2015

Laten we vervolgens het bestaande aanpassen / verzoek handler om te laten zien index.html. Bepaal het pad naar de openbaar map in app.js.

app.use (express.static (__ dirname + '/ public'));

Wijzig de / aanvraag handler zoals getoond:

app.get ('/', functie (req, res) res.sendFile ('index.html', 'root': __dirname + '/ public / index'););

Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 / en u zou de applicatiepagina kunnen zien.

Maak vervolgens een pagina met de naam signin / signin.html en voeg de volgende HTML-code toe:

   Python Flask Bucket Lijst App          Huis 
 Aanmelden 
 Inschrijven 
 
 
 Python Flask-app
 
  Bucketlijst-app
  E-mailadres  Wachtwoord   
 
  © Bedrijf 2015

In app.js voeg een verzoekbehandelaar toe die is genoemd /Aanmelden welke de signin.html pagina.

app.get ('/ signIn', functie (req, res) res.sendFile ('signin.html', 'root': __dirname + '/ public / signin'););

Voeg ook een toe signup.html naar de public / aanmelden map met de volgende HTML-code:

   Python Flask Bucket Lijst App          Huis 
 Aanmelden 
 Inschrijven 
 
 
 Python Flask-app
 
  Bucketlijst-app
  Voornaam  Achternaam  Gebruikersnaam  Wachtwoord  Wachtwoord   
 
  © Bedrijf 2015

Voeg een verzoekbehandelaar toe met de naam inschrijven in app.js.

app.get ('/ signUp', functie (req, res) res.sendFile ('signup.html', 'root': __dirname + '/ public / signup'););

Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 en u zou de applicatie moeten laten draaien. Klik op de inlog- en aanmeldingskoppelingen op de pagina en de respectieve pagina's moeten worden weergegeven.

Stap 2: Implementatie van de sign-upfunctionaliteit

Om de aanmeldingsfunctionaliteit te implementeren, bellen we de Python Eve REST API. We zullen deze API vanuit het Node.js back-end omdat het vereist dat de gebruikersnaam en het wachtwoord van de serviceverificatie worden doorgegeven. Dus om te voorkomen dat de gebruikersnaam en het wachtwoord van de authenticatie van de scripts worden blootgesteld, maken we deze call Node.js.

Laten we eerst een maken registreren aanvraag handler om de sign-up functionaliteit af te handelen.

app.post ('/ register', functie (req, resp) // Code is hier);

We zullen vereisen body-parser om de gegevens gepost van het formulier te ontleden. Installeren body-parser met behulp van NPM-pakketbeheerder.

npm body-parser installeren

Een keer body-parser is geïnstalleerd, binnenin nodig app.js.

bodyParser = require ('body-parser')

Gebruiken body-parser om de geposte formuliergegevens te ontleden, moeten we deze in onze app gebruiken.

app.use (bodyParser.urlencoded (extended: true));

Binnen in de /registreren handler we kunnen de formuliergegevens ontleden zoals getoond:

var _firstName = req.body.inputFirstName; var _lastName = req.body.inputLastName; var _username = req.body.inputUsername; var _password = req.body.inputPassword; var _phone = req.body.inputPhone;

We zullen gebruiken verzoek om de oproep naar de Eve API's te maken. Dus installeer verzoek in de applicatie.

npm installatie verzoek

Vereisen verzoek in app.py.

request = require ('request')

Maak de opties voor het aanroepen van de API zoals getoond:

var options = url: 'http://127.0.0.1:5000/user/', methode: 'POST', auth: user: 'admin', password: 'admin', formData: firstname: _firstName, achternaam: _lastName, gebruikersnaam: _username, wachtwoord: _password, telefoon: _phone

We hebben de details voor de POST verzoek in de opties. admin_username en administrator wachtwoord zijn de gebruikersnaam en het wachtwoord voor verificatie vereist om toegang te krijgen tot de API voor het maken van Eve-gebruikers.

Laten we vervolgens gebruiken verzoek om te bellen.

request (opties, functie (err, res, body) if (err) console.log (err); return; console.log ('Response:', res) console.log ('Retourgegeven gegevens:', body ))

Sla de wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 en navigeer naar het aanmeldingsscherm. Voer de details in en klik op de aanmeldknop. Controleer het terminalvenster op de respons en gebruikerscreatie details die zijn geretourneerd door de API-aanroep.

Stap 3: Aanmeldingsfout afhandelen

Wanneer een fout optreedt tijdens het aanmeldingsproces, zullen we het foutbericht doorgeven aan de aanmeldingspagina. We gebruiken een template-engine genaamd EJS. Laten we eerst EJS installeren.

npm installeer ejs

Eenmaal klaar met de installatie van EJS, voeg de volgende regel code toe om de view-map en de view-engine in te stellen.

var path = require ('path'); app.set ('views', path.join (__ dirname + '/ public / signup')); app.set ('view engine', 'ejs');

Hernoem signup.html naar signup.ejs en voeg een reeks toe om een fout weer te geven na de verzendknop.

<%= error %>

Wijzig ook de inschrijven behandelaar aanvragen.

app.get ('/ signUp', functie (req, res) res.render ('signup', error: "));

Vervolgens, als er een fout optreedt in het aanmeldingsantwoord, geven we dit door aan de aanmeldingspagina. Als het aanmeldingsproces geen fout retourneert, leiden we de gebruiker door naar de inlogpagina.

request (opties, functie (err, res, body) if (err) return resp.render ('signup', error: err) var result = JSON.parse (body) if (result._status == 'ERR') if (result._error.code == '400') return resp.render ('signup', error: 'Username Already Exist!') Retest resp.render ('signup',  error: result._issues.username) else console.log ('All good'); resp.redirect ('/ signIn');)

Sla alle wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 / signUp en probeer u te registreren met een bestaande gebruikersnaam. Aangezien de gebruikersnaam al bestaat, zou u een foutmelding moeten krijgen.

De AngularJS-app maken

Implementeren van de aanmeldfunctionaliteit

AngularJS biedt een service genaamd $ http die helpt bij het maken van REST API-aanroepen. Van de AngularJS-documenten,

De $ http service is een core Angular-service die communicatie met de externe HTTP-servers mogelijk maakt via het XMLHttpRequest-object van de browser of via JSONP.

Kopieer de inhoud van het lichaam van index.html en maak een nieuw bestand met de naam public / home / home.html.

    Huis
 Aanmelden
 Inschrijven
 
 
 Angular Node App
 
  Angular Node App
  Schrijf je vandaag in
 
  © Bedrijf 2015

Maak in de basismap een bestand met de naam home.js en definieer de huis module en routes config zoals getoond:

'gebruik strikt'; angular.module ('home', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ home', templateUrl: '... /home/home.html ', controller:' HomeCtrl ');]) .controller (' HomeCtrl ', [function () ]);

Vervang op dezelfde manier de HTML-code van signin.html met de inhoud van het lichaam van signin.html. We verwerken routering van inlogpagina's via de AngularJS-app.

Binnen in de aanmelden map, maak een bestand aan met de naam signin.js en voeg de volgende route-configuratiegegevens toe.

'gebruik strikt'; angular.module ('signin', ['base64', 'ngRoute', 'myAppService']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ signin', templateUrl: '... /signin/signin.html', controller: 'SignInCtrl');])

In index.html we zullen gebruiken ngView en route de AngularJS applicatieaanzichten. Hier is hoe index.html zal kijken:

   Angular Node App

Binnen in de inhoudsopgave map, maak een bestand aan met de naam index.js welke als het rootbestand zal dienen. In index.js we injecteren de verschillende modules die zijn gemaakt in de myApp app. Hier is de index.js het dossier:

angular.module ('myApp', ['ngRoute', 'home', 'signin']). config (['$ routProvider', function ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ home');]);

Installeren hoekig-route gebruik van prieel en voeg de referentie toe in index.html.

prieel installeer hoekige route

We moeten ook de gebruikersnaam en het wachtwoord converteren naar base64, dus installeer hoekig-base64.

prieel installeren angular-base64

Voeg na installatie een verwijzing toe naar hoekig-base64 in index.html.

Stel het statische pad in op bower_components in app.js.

app.use ('/ bower_components', express.static (__ dirname + '/ bower_components'));

Binnen signin.js, laten we een controller maken genaamd SignInCtrl.

'gebruik strikt'; angular.module ('signin', ['base64', 'ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ signin', templateUrl: '... / aanmelden /signin.html ', controller:' SignInCtrl ');]) .controller (' SignInCtrl ', [' $ scope ',' $ http ',' $ base64 ', function ($ scope, $ http, $ base64 ) ]);

We hebben zojuist een controller gemaakt met de naam SignInCtrl in signin.js. We hebben de base64 module voor de SignInCtrl.

Klik op Aanmeldknop en we bellen het bovenstaande aanmelden functie om de gebruiker te authenticeren. Dus laten we eerst de ngModel naar het veld gebruikersnaam en wachtwoord op de inlogpagina.

Voeg de toe ngClick naar de knop Aanmelden in signin.html.

Binnen in de aanmelden functie lees de gebruikersnaam en het wachtwoord van $ scope. Zodra we de gebruikersnaam en het wachtwoord hebben, maken we de base64 string gebruiken hoekig-base64.

$ scope.signIn = function () var gebruikersnaam = $ scope.username; var wachtwoord = $ scope.password; var authdata = $ base64.encode (gebruikersnaam + ':' + wachtwoord);

Voordat we de REST API's bellen, moeten we de benodigde headers instellen. We moeten de Access-Control-Request-Headers en Access-Control-Expose-Headers.

$ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origin, authorization"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origin, X-Requested-With, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "geen cache"; $ http.defaults.headers.common.Pragma = "no-cache";

We moeten ook de machtiging koptekst in de $ http. De ... gebruiken base64 authData gemaakt met gebruikersnaam en wachtwoord, stel de autorisatieheader in.

$ http.defaults.headers.common ['Autorisatie'] = 'Basic' + authdata;

Maak vervolgens de $ http Krijg een oproep naar de Python Eve REST API's.

$ http (methode: 'GET', url: 'http://127.0.0.1:5000/user/' + gebruikersnaam). success (functie (data, status, headers, config) console.log (data);). error (functie (data, status, headers, config) console.log (data, status););

Sla alle wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 / signin. Probeer in te loggen met een geldige gebruikersnaam en wachtwoord. Controleer de browserconsole en je zou de gebruikersgegevens moeten hebben. Als de authenticatie mislukt, zou u een authenticatiefoutfout moeten hebben.

Conclusie

In deze zelfstudie hebben we gezien hoe we de REST-API's die in de vorige zelfstudie zijn gemaakt, kunnen gebruiken in onze angularjs en Node.js app. We hebben de inlog- en aanmeldfunctionaliteit geïmplementeerd in deze zelfstudie.

In het volgende deel van deze serie gebruiken we de andere API's om onze AngularJS-app te voltooien.

Broncode van deze tutorial is beschikbaar op GitHub.

Code