Accentsconagua

Construiți un aplicație AngularJS Powered by Python EVE Partea 2

Cod
Share

În partea anterioară a acestei serii, am implementat procesul de conectare și înregistrare utilizând API-ul Eve pe care l-am creat în prima parte a seriei. Am folosit Node.js și AngularJS pentru a crea și a face ca aplicația să ruleze.

În acest tutorial, vom duce dezvoltarea aplicației noastre la nivelul următor, utilizând Adăuga, Editați | × și Șterge API-uri pentru a crea elemente în pagina de pornire a utilizatorului.

Noțiuni de bază

Pentru a începe, clonați codul sursă al tutorialului anterior de la GitHub.

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

După ce ați terminat, navigați la AngularEveApp_Part1 și instalați dependențele.

npm instalare instalare bower

Asigurați-vă că sunt pornite API-urile Python Eve REST. Porniți serverul de aplicații.

nod app.js

Punctați browser-ul dvs. la http: // localhost: 3000 și ar trebui să aveți aplicația să ruleze.

Crearea casei de utilizator

După ce utilizatorul semnează cu succes, vom duce utilizatorul la pagina de pornire. Deci, să începem prin a crea userHome.html. Navigați la public și creați un folder nou numit userHome. Interior userHome creați fișiere numite userHome.html și userHome.js. Deschis userHome.html și adăugați următorul cod HTML:

 
  
Acasă
 
 
Datele vor fi afișate aici !!
 
 
© Compania 2015

Interior userHome.js defini modulul userHome și șablon și controlor. Deschide-te userHome.js și adăugați următorul cod:

"utilizarea strictă"; ($ 'routeProvider', funcția ($ routeProvider) $ routeProvider.when ('/ userHome', templateUrl: '... /userHome/userHome.html ', controler:' UserHomeCtrl ');]) .controller (' UserHomeCtrl ', [' $ scope ', functie ($ scope) ]);

Adăugați o referință la userHome.js în index.html pagină.

Injectați modulul userHome în aplicație AplicațiaMea în index.js.

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

În conectare funcția în signin.js, cu privire la apelul de succes al $ http solicitați redirecționarea către / userHome vedere. 

$ Location.path ( '/ userHome');

Salvați modificările de mai sus și reporniți serverul de noduri. Punctați browser-ul dvs. la http: // localhost: 3000 și conectați-vă utilizând un nume de utilizator și o parolă valide. După ce ați fost conectat (ă) cu succes, ar trebui să puteți vizualiza pagina de pornire a utilizatorului cu afișarea implicită.

Crearea unei pagini de adăugare a tastei

Să adăugăm o vizualizare pentru a permite utilizatorului să adauge elemente. Navigați la public și creați un dosar numit adaugare element. În interiorul adaugare element folder, creați două fișiere numite addItem.html și addItem.js. Deschis addItem.html și adăugați următorul cod HTML:

 
  
Acasă
 
 
 
  
 
  
 
 
 
© Compania 2015

În continuare, deschideți-vă addItem.js și adăugați următorul cod pentru a defini ruta, șablonul și controlerul.

"utilizarea strictă"; "$ routeProvider", funcția ($ routeProvider) $ routeProvider.when ('/ addItem', templateUrl: '... /addItem/addItem.html (' addItem ',' ngRoute ' ', controler:' AddItemCtrl ');]) .controller (' AddItemCtrl ', [function () ]);

Deschis userHome.html și modificați linkul Adăugați href pentru a indica direcția corectă.

  • Adăuga

    • Adăugați o referință la addItem.js în index.html.

    Injectați modulul adaugare element în AplicațiaMea în index.js.

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

    Salvați următoarele modificări și reporniți serverul de noduri. După ce v-ați conectat, faceți clic pe Adăuga și ar trebui să puteți vedea pagina de adăugare a elementului.

    Adăugarea de elemente utilizând API-ul Eve

    Pentru a adăuga elemente, avem nevoie de ele base64 authdata. Deci, la conectarea reușită, vom păstra datele de utilizator și datele de autor într-un cont AngularJS serviciu. Navigați la public și creați un dosar numit serviciu. În interiorul serviciu folder crea un fișier numit service.js. Să creăm un nou modul de serviciu numit myAppService.

    angular.module ( 'myAppService', [])

    Adăugați un serviciu nou la myAppService modul.

    .serviciu ("CommonProp", funcție () );

    În interiorul CommonProp serviciu, vom defini câteva funcții pentru a obține și seta nume de utilizator și authData.

    .() user_value;, getUserAuth: function () var = user_value; ) retur userAuth;, setUserAuth: funcție (valoare) userAuth = value;;);

    Includeți o referință la serviciul din index.html.

    Apoi, injectați cele create mai sus myAppService în modulul conectare modul.

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

    Injectați cerințele CommonProp serviciu în SignInCtrl controlor.

    .controler ( 'SignInCtrl', [ 'domeniul de aplicare $', '$ http', '$ base64', '$ fereastra', '$ Locul de amplasare', 'CommonProp', funcția ($ domeniul de aplicare, $ http, $ base64, $ fereastră, $ localizare, CommonProp)

    Pe $ http reușită, adăugați următorul cod pentru a păstra numele de utilizator și authData în serviciu. 

    CommonProp.setUser (nume de utilizator); CommonProp.setUserAuth (authdata);

    Apoi, deschide-te addItem.js și injectați myAppService modul.

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

    Injectați CommonProp serviciu în AddItemCtrl.

    .controler ("AddItemCtrl", ['$ scope', 'CommonProp', '$ http', '$ location', funcție ($ scope, CommonProp, $ http, $ location)

    Deschide addItem.html și adăugați ngModel și ngClick directivă la caseta de text a sarcinii și, respectiv, la butonul Adăugare sarcină.

    Interior addItem.js defini o nouă funcție numită adaugare element.

    $ scope.addItem = funcția (titlu) // Adaugă logica elementului va fi aici!

    Interior adaugare element funcția să ne facem $ http sunați la Python Eve REST API. În primul rând, va trebui să obținem numele de utilizator și datele de autor de utilizator din serviciu.

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

    Să setăm anteturile necesare pentru a efectua apelul API.

    $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth;

    Odată ce setările au fost stabilite, hai să folosim $ http pentru a efectua apelul API pentru a adăuga elementul.

    $ http (metoda: 'POST', cache: false, url: 'http://127.0.0.1:5000/item', date: name: title, username: user). succes (funcția (date, stare, anteturi, config) $ location.path ('/ userHome');). eroare (funcție (date, stare, anteturi, config) console.log (date, status););

    Salvați modificările și reporniți serverul de noduri. Punctați browserul la http: // localhost: 3000 și conectați-vă. Faceți clic pe Adăuga link, introduceți o sarcină și dați clic pe Adăugați o sarcină. În cazul unui apel API reușit, trebuie să fiți redirecționat către pagina principală a utilizatorului.

    Obțineți activități din API-ul de la Eva

    Când pagina de pornire a utilizatorului este încărcată, vom efectua un apel API pentru a prelua elementele adăugate de utilizatorul respectiv. Pentru a face apelul API, avem nevoie de nume de utilizator si authData. Deci, injectați myAppService în modulul userHome modul.

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

    Injectați CommonProp serviciu la UserHomeCtrl.

    .controler ("UserHomeCtrl", ['$ scope', 'CommonProp', '$ http', '$ location', funcție ($ scope, CommonProp, $ http, $ location)

    Apoi, să-l preluăm nume de utilizator și authData din CommonProp.

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

    Setați antetele necesare pentru a efectua apelul API.

    $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth;

    Pentru a obține sarcinile create de un anumit utilizator, vom face o solicitare $ http GET pentru http://127.0.0.1:5000/item?where="username":"'+user+ "".

    $ http (metoda: 'GET', cache: false, url: 'http://127.0.0.1:5000/item?where="username': "+ user +" " '). succes (funcție (date, stare, antete, config) console.log (data);). eroare (funcție (date, stare, anteturi, config) console.log (date, status););

    În cazul unui apel API reușit, vom analiza datele returnate și vom seta datele într-un domeniul de aplicare $ variabil. 

    Mai întâi, să creăm o variabilă a sarcinilor:

    $ scope.tasks = [];

    Acum, să analizăm datele returnate și să le umplem sarcini variabil.

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

    În userHome.html, vom itera peste variabila sarcinilor și vom face sarcinile preluate pentru un anumit utilizator. Vom face uz de ngRepeat directive pentru a itera peste variabila sarcinilor.

      
    Task.title

    Salvați modificările de mai sus și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 și conectați-vă. La conectarea cu succes, ar trebui să puteți vedea sarcinile adăugate de utilizatorul conectat.

    Editarea și ștergerea unui element de activitate

    Editarea sarcinilor

    Să adăugăm un buton de editare și ștergere la lista de sarcini din pagina de pornire a utilizatorului, pentru a permite editarea și ștergerea respectivelor activități. Deschis userHome.html și adăugați următorul cod HTML la .Lista-grup div.

    Vom folosi modurile de bootstrap pentru a afișa sarcina care trebuie editată, astfel încât să includă jQuery și Bootstrap în index.html.

    Adăugați următorul cod HTML la userHome.html pentru pop-up modal pentru editare.

    În continuare deschideți userHome.js și să creeze o nouă funcție numită editTask care vor fi invocate la click pe butonul de editare.

    $ scope.edit = ; $ scope.editTask = funcție (titlu, id, etichetă) $ scope.edit.task = title; $ scope.edit.id = id; $ scope.edit.tag = tag; . $ ( '# EditModal') modal ( 'spectacol');

    Așa cum am văzut în codul de mai sus, am atribuit titlu, id și etichetă a înregistrării speciale către $ scope.edit.task variabil. Dacă utilizatorul alege să actualizeze înregistrarea specială, atunci vom folosi $ scope.edit date pentru actualizare. 

    Salvați toate modificările de mai sus și reporniți serverul. După ce v-ați conectat cu succes, faceți clic pe butonul de editare pentru a edita o activitate și ar trebui să aveți pop-up modal.

    Anterior, am făcut o $ http cererea din partea UserHomeCtrl. Să transformăm acest lucru într-o funcție corectă, pentru că va trebui să-l sunăm în viitor. Aici este getAllTask funcţie.

    var getAllTask ​​= funcția () $ scope.tasks = []; $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth; $ http (metoda: 'GET', cache: false, url: 'http://127.0.0.1:5000/item?where="username":"'+user+' ''). succes (funcție (date, stare, antete, config) pentru (var i = 0; i
    Apoi, creați o funcție numită Actualizați în userHome.js pe care o vom apela pentru a actualiza sarcina editată. În interiorul funcției de actualizare vom face o PLASTURE solicitați http://127.0.0.1:5000/item/(itemid) datele pe care trebuie să le actualizați. API-ul Eve așteaptă a id de etichetă antetul care trebuie transmis în momentul în care faceți o solicitare de actualizare, așa că vom trece și el id de etichetă în antetul solicitării. În interiorul funcției de actualizare, mai întâi vom declara anteturile necesare pentru $ http cerere.
    $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth; $ http.defaults.headers.common ['Dacă-meci'] = $ scope.edit.tag;
    După ce au fost definite anteturile, vom face PLASTURE $ request http.
    $ http (metoda: 'PATCH', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.edit.id, date: name: $ scope.edit.task ). succes (functie (date, status, headers, config) $ ('# editModal') modal ('ascunde'); getAllTask ​​(); eroare (funcție (date, stare, anteturi, config) console.log (date, status););
    Așa cum am văzut în codul de mai sus, la actualizarea cu succes am închis modul de editare și am reîncărcat toate sarcinile legate de utilizatorul respectiv.
    Salvați toate modificările și reporniți serverul. Punctați browser-ul dvs. la http: // localhost: 3000 și conectați-vă utilizând acreditări valide. După ce v-ați conectat, încercați să editați o anumită activitate făcând clic pe butonul de editare.
    Ștergerea sarcinilor
    Înainte de a șterge o sarcină, trebuie să afișăm un pop-up de confirmare. Deci, în userHome.html adăugați următorul cod HTML pentru fereastra pop-up de confirmare a ștergerii.
    Apoi, trebuie să definim o funcție numită confirmă ștergerea pe care deja am atașat la butonul Șterge folosind ngClick directivă. În interiorul confirmă ștergerea vom păstra ID-ul sarcinii și TAG-ul care vor fi necesare când sunăm API-ul Delete. Aici este confirmă ștergerea funcţie:
    $ scope.deletion = ; $ scope.confirmDelete = funcție (id, etichetă) $ scope.deletion.id = id; $ scope.deletion.tag = tag; $ ( '# DeleteModal') modal ( 'spectacol').; 
    Salvați modificările și reporniți serverul. Conectați-vă la aplicație și când faceți clic pe pagina de pornire a utilizatorului Șterge și ar trebui să puteți vedea fereastra pop-up Confirmare ștergere.
    Apoi, vom defini o funcție suplimentară pentru a efectua ștergerea sarcinii. Am atașat deja o funcție numită deleteTask la butonul Ștergere utilizând ngClick directivă. Acum, să definim deleteTask funcționează în interior userHome.js.
    Similar cu funcția de actualizare, apelarea cererii de ștergere din API-ul Eve necesită ID-ul TAG pentru a fi setat în antet. Deci, mai întâi setați anteturile cerute așa cum se arată:
    $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth; $ http.defaults.headers.common ['Dacă-meci'] = $ scope.deletion.tag;
    Apoi, vom face o solicitare DELETE către API-ul REST http://127.0.0.1:5000/item/(itemId). 
    $ http (metoda: 'DELETE', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.deletion.id). succes (functie (date, stare, antete, config) $ ('deleteModal') modal ('ascunde'); getAllTask ​​(); eroare (funcție (date, stare, anteturi, config) console.log (date, status););
    Așa cum am văzut în codul de mai sus, în cazul apelării reușite a solicitării DELETE, vom ascunde fereastra de confirmare modală și vom reîncărca intrările de sarcini sunând la getAllTask metodă. Aici este plinul deleteTask funcţie:
    $ scope.deleteTask = function () $ http.defaults.headers.common = "Access-Control-Request-Headers": "accept, origine, autorizare"; $ http.defaults.headers.common = "Access-Control-Expose-Headers": "Origine, X-solicitat-cu, Content-Type, Accept"; $ http.defaults.headers.common ["Cache-Control"] = "nu-cache"; $ http.defaults.headers.common.Pragma = "nu-cache"; $ http.defaults.headers.common ['Autorizare'] = 'Basic' + auth; $ http.defaults.headers.common ['Dacă-meci'] = $ scope.deletion.tag; $ http (metoda: 'DELETE', cache: false, url: 'http://127.0.0.1:5000/item/' + $ scope.deletion.id). succes (functie (date, stare, antete, config) $ ('deleteModal') modal ('ascunde'); getAllTask ​​(); eroare (funcție (date, stare, anteturi, config) console.log (date, status);); 
    Salvați modificările de mai sus și reporniți serverul. Punctați browserul la http: // localhost: 3000 și conectați-vă. Când faceți clic pe pagina principală a utilizatorului, faceți clic pe Șterge pentru a șterge câteva sarcini și ar trebui să funcționeze.
    Concluzie
    În această parte a seriei, am văzut cum să folosim API-urile Python Eve REST create în prima parte a seriei într-o aplicație AngularJS. Am implementat câteva operații CRUD simple din aplicația noastră AngularJS folosind API-urile Eve REST. Sper că acest tutorial va servi drept bază pentru crearea a ceva minunat.
    Nu ezitați să postați comentariile, corecțiile sau întrebările de mai jos. Dacă ați găsit acest tutorial util, vizitați pagina de instructor pentru alte tutoriale.
    Codul sursă din acest tutorial este disponibil pe GitHub. 
    



    
	
    	
			
	   
	
    

    



    
Cod
    ×