Accentsconagua

Bouw een AngularJS-app aangedreven door Python EVE deel 2

Code
Share

In het vorige deel van deze serie hebben we het aanmeldings- en aanmeldingsproces geïmplementeerd met behulp van de Eve API die we in het eerste deel van de serie hebben gemaakt. We gebruikten Node.js en AngularJS om onze app te laten draaien en te laten werken.

In deze zelfstudie nemen we onze app-ontwikkeling naar het volgende niveau door gebruik te maken van de Toevoegen, Bewerk en Verwijder API's om items te maken op de startpagina van de gebruiker.

Ermee beginnen

Om te beginnen, klone de broncode van de vorige tutorial vanuit GitHub.

git clone https://github.com/jay3dec/AngularEveApp_Part1.git

Eens gedaan, navigeer naar AngularEveApp_Part1 en installeer de afhankelijkheden.

npm installeer prieel installeren

Zorg ervoor dat de Python Eve REST API's actief zijn. Start de app-server.

knooppunt app.js

Richt uw browser op http: // localhost: 3000 en u zou de applicatie moeten laten draaien.

Gebruikershome maken

Nadat de gebruiker zich heeft aangemeld, nemen we de gebruiker mee naar de startpagina. Laten we beginnen met het maken van userHome.html. Navigeer naar de openbaar map en maak een nieuwe map met de naam userHome. Binnen userHome maak bestanden aan genaamd userHome.html en userHome.js. Open userHome.html en voeg de volgende HTML-code toe:

 
  
Huis
 
 
Gegevens worden hier weergegeven !!
 
 
© Bedrijf 2015

Binnen userHome.js definieer de module userHome en zijn sjabloon en controller. Dus, open userHome.js en voeg de volgende code toe:

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

Voeg een verwijzing toe aan userHome.js in de index.html pagina.

Injecteer de module userHome in de app myApp in index.js.

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

In de aanmelden functie in signin.js, over het succes callback van de $ http verzoek omleiding naar de / userHome uitzicht. 

$ Location.path ( '/ userHome');

Sla de bovenstaande wijzigingen op en start de knooppuntserver opnieuw op. Richt uw browser op http: // localhost: 3000 en log in met een geldige gebruikersnaam en wachtwoord. Nadat u zich hebt aangemeld, kunt u de startpagina van de gebruiker bekijken met de standaardweergave.

Een pagina met een taak toevoegen

Laten we een weergave toevoegen om de gebruiker toe te staan ​​items toe te voegen. Navigeer naar de openbaar map en maak een map aan met de naam Voeg item toe. Binnen in de Voeg item toe map, maak twee bestanden genaamd addItem.html en addItem.js. Open addItem.html en voeg de volgende HTML-code toe:

 
  
Huis
 
 
 
  
 
  
 
 
 
© Bedrijf 2015

Open vervolgens addItem.js en voeg de volgende code toe om de route, het sjabloon en de controller te definiëren.

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

Open userHome.html en wijzig de koppeling Toevoegen href om naar de juiste route te wijzen.

  • Toevoegen

    • Voeg een verwijzing toe aan addItem.js in index.html.

    Injecteer de module Voeg item toe in de myApp in index.js.

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

    Sla de volgende wijzigingen op en start de knooppuntserver opnieuw op. Nadat u bent ingelogd, klikt u op de Toevoegen link en je zou de pagina met het toevoegen van items kunnen zien.

    Items toevoegen met behulp van de Eve API

    Om items toe te voegen, hebben we de base64 authdata. Dus bij een succesvolle aanmelding bewaren we de gebruikersnaam en auth-gegevens in een angularjs service. Navigeer naar de openbaar map en maak een map aan met de naam service. Binnen in de service map maak een bestand met de naam service.js. Laten we een nieuwe servicemodule maken met de naam myAppService.

    angular.module (myAppService ', [])

    Voeg een nieuwe service toe aan de myAppService module.

    .service ('CommonProp', functie () );

    Binnen in de CommonProp service, zullen we enkele functies definiëren om de. te krijgen en in te stellen gebruikersnaam en authData.

    .service ('CommonProp', function () var user = "; var userAuth ="; return getUser: function () return user;, setUser: function (value) user = value;, getUserAuth: function ( ) return userAuth;, setUserAuth: function (value) userAuth = value;;);

    Voeg een verwijzing naar de service toe in index.html.

    Injecteer vervolgens het bovenstaande gemaakt myAppService module in de aanmelden module.

    angular.module ('signin', ['base64', 'ngRoute', 'myAppService'])

    Injecteer de vereiste CommonProp service in de SignInCtrl controleur.

    .controller (SignInCtrl '[ '$ scope', '$ http', '$ base64', '$ venster',' $ locatie, 'CommonProp' functie ($ scope, $ http, $ base64, $ venster, $ locatie, CommonProp)

    Op $ http succes callback, voeg de volgende code toe om de gebruikersnaam en authData in de service te behouden. 

    CommonProp.setUser (gebruikersnaam); CommonProp.setUserAuth (authdata);

    Open vervolgens addItem.js en injecteer de myAppService module.

    angular.module ('addItem', ['ngRoute', 'myAppService'])

    Injecteer de CommonProp service in de AddItemCtrl.

    .controller ('AddItemCtrl', ['$ scope', 'CommonProp', '$ http', '$ location', function ($ scope, CommonProp, $ http, $ location)

    Doe open addItem.html en voeg de ngModel en ngClick opdracht naar respectievelijk het taakvak en de taakknop Toevoegen.

    Binnen addItem.js definieer een nieuwe functie genaamd Voeg item toe.

    $ scope.addItem = functie (titel) // Toevoegen artikellogica zal hier zijn!

    Binnen Voeg item toe functie laten we onze maken $ http oproep naar de Python Eve REST API. Ten eerste moeten we de gebruikersnaam en de gebruikersauthenticatiegegevens van de service ontvangen.

    var auth = CommonProp.getUserAuth (); var user = CommonProp.getUser ();

    Laten we de vereiste headers instellen om de API aan te roepen.

    $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth;

    Zodra headers zijn ingesteld, laten we gebruiken $ http om de API aanroep te doen om het item toe te voegen.

    $ http (methode: 'POST', cache: false, url: 'http://127.0.0.1:5000/item', data: name: title, username: user). success (functie (data, status, headers, config) $ location.path ('/ userHome');). error (functie (data, status, headers, config) console.log (data, status););

    Sla de wijzigingen op en start de knooppuntserver opnieuw op. Richt uw browser op http: // localhost: 3000 en meld u aan. Klik op Toevoegen koppeling, voer een taak in en klik op Voeg taak toe. Na een succesvolle API-aanroep moet u worden doorgestuurd naar de startpagina van de gebruiker.

    Haal taken uit de Eve API

    Wanneer de startpagina van de gebruiker is geladen, voeren we een API-aanroep uit om de items op te halen die door de betreffende gebruiker zijn toegevoegd. Om de API aanroep te doen, hebben we de gebruikersnaam en de authData. Dus injecteer de myAppService module in de userHome module.

    angular.module ('userHome', ['ngRoute', 'myAppService'])

    Injecteer de CommonProp service aan UserHomeCtrl.

    .controller ('UserHomeCtrl', ['$ scope', 'CommonProp', '$ http', '$ location', function ($ scope, CommonProp, $ http, $ location)

    Laten we vervolgens het volgende ophalen gebruikersnaam en authData van CommonProp.

    var auth = CommonProp.getUserAuth (); var user = CommonProp.getUser ();

    Stel de vereiste headers in om de API aan te roepen.

    $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth;

    Om de taken te krijgen die door een bepaalde gebruiker zijn gemaakt, maken we een $ http GET-verzoek naar http://127.0.0.1:5000/item?where="username":"'+user+ '"'.

    $ http (methode: 'GET', cache: false, url: 'http://127.0.0.1:5000/item?where="username ":"' + user + '"'). success (functie (data, status, headers, config) console.log (data);). error (functie (data, status, headers, config) console.log (data, status););

    Na een succesvolle API-aanroep zullen we de geretourneerde gegevens parseren en de gegevens in a instellen $ scope veranderlijk. 

    Laten we eerst een takenvariabele maken:

    $ scope.tasks = [];

    Laten we nu de geretourneerde gegevens parseren en de taken veranderlijk.

    for (var i = 0; i < data._items.length; i++)  $scope.tasks.push( 'title': data._items[i].name );

    In userHome.html, we herhalen de taakvariabele en zorgen ervoor dat de taken voor een bepaalde gebruiker worden opgehaald. We zullen gebruik maken van de ngRepeat richtlijn om de taakvariabele te herhalen.

      
     Task.title

    Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 3000 en meld u aan. Na een succesvolle aanmelding moet u de taken kunnen zien die door de aangemelde gebruiker zijn toegevoegd.

    Een taakitem bewerken en verwijderen

    Taken bewerken

    Laten we een knop voor bewerken en verwijderen toevoegen aan de lijst met taken op de startpagina van de gebruiker om respectievelijk de taken te bewerken en te verwijderen. Open userHome.html en voeg de volgende HTML-code toe aan de .list-groep div.

    We zullen bootstrap-modals gebruiken om de taak te tonen die moet worden bewerkt, dus voeg jQuery en Bootstrap in index.html.

    Voeg de volgende HTML-code toe aan userHome.html voor modale pop-up voor bewerken.

    Open daarna userHome.js en maak een nieuwe functie genaamd editTask die wordt aangeroepen bij het klikken op de knop Bewerken.

    $ scope.edit = ; $ scope.editTask = function (title, id, tag) $ scope.edit.task = title; $ scope.edit.id = id; $ scope.edit.tag = tag; . $ ( '# EditModal') modale ( 'Toon');

    Zoals te zien is in de bovenstaande code, hebben we de titel, ID kaart en label van de specifieke record naar de $ scope.edit.task variabel. Als de gebruiker ervoor kiest de specifieke record bij te werken, gebruiken we de $ scope.edit gegevens voor update. 

    Sla alle bovenstaande wijzigingen op en start de server opnieuw op. Nadat u succesvol bent ingelogd, klikt u op de knop Bewerken om een ​​taak te bewerken en moet u de modale pop-up hebben.

    Eerder hebben we een gemaakt $ http verzoek van de UserHomeCtrl. Laten we dat omzetten in een juiste functie, aangezien we dat in de toekomst moeten noemen. Hier is de getAllTask functie.

    var getAllTask ​​= function () $ scope.tasks = []; $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth; $ http (methode: 'GET', cache: false, url: 'http://127.0.0.1:5000/item?where="username" :"'+user+' " '). succes (functie (data, status, headers, config) for (var i = 0; i
    Maak vervolgens een functie genaamd bijwerken in userHome.js die we zullen bellen om de bewerkte taak bij te werken. Binnen de updatefunctie maken we een PATCH vraag naar http://127.0.0.1:5000/item/(item-id) met de gegevens die moeten worden bijgewerkt. De Eve API verwacht een tag id koptekst die moet worden doorgegeven bij het maken van een updateaanvraag, dus we zullen ook de tag id in de verzoekkop. Binnen de updatefunctie zullen we eerst de vereiste headers declareren voor de $ http verzoek.
    $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth; $ http.defaults.headers.common ['If-Match'] = $ scope.edit.tag;
    Zodra headers zijn gedefinieerd, maken we de PATCH $ http-verzoek.
    $ http (methode: 'PATCH', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.edit.id, data: name: $ scope.edit.task ). success (functie (data, status, headers, config) $ ('# editModal'). modal ('hide'); getAllTask ​​();). error (functie (data, status, headers, config) console.log (data, status););
    Zoals te zien is in de bovenstaande code, hebben we bij succesvolle update de modal edit voltooid en alle taken gerelateerd aan de specifieke gebruiker herladen.
    Sla alle wijzigingen op en start de server opnieuw op. Richt uw browser op http: // localhost: 3000 en log in met geldige legitimatiegegevens. Nadat u bent ingelogd, probeert u een bepaalde taak te bewerken door op de knop Bewerken te klikken.
    Taken verwijderen
    Voordat we een taak verwijderen, moeten we een bevestigingspop-up laten zien. Dus, in userHome.html voeg de volgende HTML-code toe voor de pop-up voor het verwijderen van de verwijdering.
    Vervolgens moeten we een functie definiëren met de naam bevestig verwijderen die we al hebben toegevoegd aan de knop Verwijderen met behulp van de ngClick richtlijn. Binnen in de bevestig verwijderen functie houden we de taak-ID en TAG die nodig zijn wanneer we de verwijder-API aanroepen. Hier is de bevestig verwijderen functie:
    $ scope.deletion = ; $ scope.confirmDelete = function (id, tag) $ scope.deletion.id = id; $ scope.deletion.tag = tag; $ ( '# DeleteModal') modale ( 'vertonen.'); 
    Sla de wijzigingen op en start de server opnieuw op. Meld u aan bij de toepassing en klik op de startpagina van de gebruiker op Verwijder knop en u zou de verwijderbevestiging pop-up moeten kunnen bekijken.
    Vervolgens definiëren we nog een functie om de taak te verwijderen. We hebben al een functie gekoppeld genaamd deleteTask naar de knop Verwijderen met behulp van de ngClick richtlijn. Laten we nu het definiëren deleteTask functie binnen userHome.js.
    Net als bij de updatefunctie heeft het aanroepen van de verwijderingsverzoek op de Eve API het volgende nodig TAG ID in te stellen in de kop. Dus, stel eerst de vereiste headers in zoals getoond:
    $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth; $ http.defaults.headers.common ['If-Match'] = $ scope.deletion.tag;
    Vervolgens maken we een VERWIJDEREN verzoek naar de REST API http://127.0.0.1:5000/item/(itemId). 
    $ http (methode: 'DELETE', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.deletion.id). success (functie (data, status, headers, config) $ ('# deleteModal'). modal ('hide'); getAllTask ​​();). error (functie (data, status, headers, config) console.log (data, status););
    Zoals u kunt zien in de bovenstaande code, verbergen we bij succesvol DELETE verzoek terugbellen de modaliteit pop-up verwijderen bevestigen en herladen de taakitems door de getAllTask methode. Hier is het vol deleteTask functie:
    $ scope.deleteTask = function () $ 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"; $ http.defaults.headers.common ['Autorisatie'] = 'Basic' + auth; $ http.defaults.headers.common ['If-Match'] = $ scope.deletion.tag; $ http (methode: 'DELETE', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.deletion.id). success (functie (data, status, headers, config) $ ('# deleteModal'). modal ('hide'); getAllTask ​​();). error (functie (data, status, headers, config) console.log (data, status);); 
    Sla de bovenstaande wijzigingen op en start de server opnieuw. Richt uw browser op http: // localhost: 3000 en meld u aan. Klik op de startpagina van de gebruiker op Verwijder om een ​​paar taken te verwijderen en het zou moeten werken.
    Conclusie
    In dit deel van de serie zagen we hoe de Python Eve REST API's gemaakt in het eerste deel van de serie in een AngularJS-applicatie te gebruiken. We hebben enkele eenvoudige CRUD-bewerkingen geïmplementeerd vanuit onze AngularJS-applicatie met behulp van de Eve REST API's. Ik hoop dat deze tutorial zal dienen als basis voor het creëren van iets geweldigs.
    Aarzel niet om uw opmerkingen, correcties of vragen hieronder te plaatsen. Als je deze tutorial nuttig vond, ga dan naar mijn instructeurspagina voor andere tutorials.
    Broncode van deze tutorial is beschikbaar op GitHub. 
    



    
	
    	
			
	   
	
    

    



    
Code
    ×