, skabe en web - app fra bunden ved hjælp af angularjs og nul: del 6,,,,, 270,,,,,,,, 17,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie, "at skabe en web - app fra bunden ved hjælp af angularjs og nul. at skabe et web - app fra bunden ved hjælp af angularjs og nul: del 5creating en web - app fra bunden ved hjælp af angularjs og nul: del 7 i det foregående led i denne serie, vi så, hvordan der kan skabes en blog, post og udvise den blog i velkommen til side.i denne del, skal vi gennemføre redigere og slette efter funktioner.,, at begynde, lad os starte med kloning, den tidligere del af læren fra github., så klon https: //////////////////////github. kom jay3dec angularjs_firebase_part5. smut, efter kloning kildekoden, sejle til projektet fortegnelse og installere den nødvendige afhængighed, cd - angularjs_firebase_part5 new public management installere, når afhængighed er installeret, start den server.,, new public management start, punkt din browser til http: //localhost: 8000 /app /&#/home , og du burde have anvendelse.,, redigere postede,, trin 1: forøgelse af redigere og slette knapper, starter vi med at redigere og slette knapper til vores blog.i den sidste lektion, vi udviste den blog i velkommen til side.lad os tilføje, redigere og en , slette, knap til blog. ,, sejle til app /velkommen, og åbne, velkommen. html. brugte vi bootstrap liste gruppe komponent til at udvise blog.Add the following HTML code to the ,list-group, component to display an ,Edit, and a ,Delete, button.,,<div class="list-group" ng-repeat="article in articles"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">{{article.title}}</h4> <p class="list-group-item-text">{{article.post}}</p> <span class="pull-right"> <button class="btn btn-xs btn-info">EDIT</button> <button class="btn btn-xs btn-warning">DELETE</button> </span> </a> </div>,,Save the changes and restart the server. Log in using a valid email address and password and you should be able to see the below screen:,,,,,Step 2: Show the Edit Popup on Click ,,We'll be using a Bootstrap JavaScript component called Modal popup. In order to use Bootstrap JavaScript components, include the jQuery and Bootstrap scripts in ,index.html,.,,<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>,,Once the scripts references are included, add the following popup HTML code to ,app/welcome/welcome.html,.,,<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="editModalLabel">Update Post</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <label for="recipient-name" class="control-label">Title:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Post:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Publish</button> </div> </div> </div> </div>,,Next, modify det, redigere, knap html kode til at omfatte data greb, og data mål at gøre pop - up - program på klik.,, < knap klasse = "btn btn xs btn info" data greb = "modal" data mål = "# editmodal" > edit < ///////knap >,,, data, mål, tilskriver punkter til id af html element, som skal være angivet i modal pop - up -.,, også tilføje, onclick, begivenhed til, redigere, knap forælder anker, som vist:,, < en href = "#" onclick = "returner falske" klasse = "liste gruppe punkt aktive" >,, redde de ændringer, genstarte serveren, og prøver at logge ind.når du er på velkommen side, klik, redigere, knap, - - og du skal have pop - up - udviste.,,,,, trin 3: forsyne edit pop - up - , hver indsejling i nul har en unik id - kort, som vi kan bruge til at hente de særlige registrere oplysninger fra nul.for at kunne sætte spørgsmålstegn ved nul med unikke id - kort, er vi nødt til at have den. i den foregående forelæsning, vi satte spørgsmålstegn ved nul og gjort den returnerede resulterer i, at vi bifalder side.Here is how we rendered the result : ,,<div class="list-group" ng-repeat="article in articles"> <a href="#" onclick="return false;" class="list-group-item active"> <h4 class="list-group-item-heading">{{article.title}}</h4> <p class="list-group-item-text">{{article.post}}</p> <span class="pull-right"> <button class="btn btn-xs btn-info" data-toggle="modal" data-target="#editModal">EDIT</button> <button class="btn btn-xs btn-warning" >DELETE</button> </span> </a> </div>,,Now remove ,data-toggle="modal", from the ,Edit, button. vi vil udløse modal pop - up - fra vores registeransvarlige. , indenfor, app /hilser velkommen. det, tilføje en , editpost, funktion, som vi kalder den, redigere, knap klik.tidligere brugte vi nul url https: //blistering-heat-2473. firebaseio. kom /artikel for at hente alle artikler fra nul.for at hente en bestemt plade fra nul, vi bliver nødt til at sætte den unikke id af den artikel, som https: //////////////blistering-heat-2473. firebaseio. kom /artikel /- jdmk7tayjclzg9dfmjg. ,, så vi kan skabe nul objekt ved hjælp af den unikke id - specifikke url, og så henviser det til at hente artikel oplysninger, som et objekt.her er hvordan det ser ud, editpost funktion:,, $scope.editpost = funktion (id) (var - firebaseobj = nye nul ("https://blistering-heat-2473.firebaseio.com/articles/" + id) var syn = $nul (firebaseobj); $scope.posttoupdate = syn. $asobject(). $('# editmodal'). modal(); //udløser modal pop op}, luk op, welcome.html, og tilføje, en ngclick direktiv til, redigere, button.samtidig med at tilføje, ngclick, funktion opfordring til, editpost, går den unikke id af artikel som vist nedenfor:,, < knap klasse = "btn btn xs btn info" ng klik = "editpost (artikel. $id)" data mål = "# editmodal" > edit < /knap >,, så er vi nødt til at forsyne de nærmere oplysninger om de hentede artikler i modal pop - up -.da de oplysninger, der er i $anvendelsesområde. posttoupdate, vi binder det til modal ved hjælp af ngmodel direktiv.tilføje, ngmodel direktiv til, post, og afsnit, tekst - området som vist nedenfor:,, < input type = "tekst" klasse = "kontrol" ng model = "posttoupdate. titel" id = "navn" > < textarea klasse = "form for kontrol" "id =" besked tekst "ng model =" posttoupdate. post "> < /textarea >,, at redde alle de ændringer og genoptage den server.prøv at underskrive, ved hjælp af en gyldig, e - mail - adresse og kodeord.når undertegnet i, tryk , redigere, knap, - - og du skal have et pop - up - befolket med artikel detaljer.,,,,, trin 4: gennemføre ajourføringen funktionalitet, bagefter skal vi gennemføre de opdaterede funktionalitet.når artikel har været befolket i redigeringen af pop - up -, brugeren kan ændre titlen eller post - og klik, offentliggør.når offentliggøre har været sammen, er vi nødt til at ajourføre oplysningerne i nul.,,, tilføje, ngclick direktiv til at offentliggøre, button, < knap type = "knap" klasse = "btn btn primære" ng klik = "update()" > offentliggøre < ///////knap >,, åben, app /velkommen /welcome.js, og tilføje en , ajourføre, funktion opfordring, der anmodes om, offentliggør knap klik.i opdateringen funktion, er vi nødt til at skabe et - nul - nul objekt ved hjælp af den unikke id url tilføjet artikel, var fb = nye nul (https: //////////////blistering-heat-2473. firebaseio. kom /artikel /"+ $anvendelsesområde. posttoupdate. $id), ved hjælp af, fb, genstand, skabe en - nul, objekt.,, var artikel = $nul (fb), med artikel genstand, vi ringer til ajourføring af api - at ajourføre de ændringer til nul.,, artikel. $ajourføring ((afsnit: $scope.posttoupdate.title, post: $scope.posttoupdate.post, emailid: $scope.posttoupdate.emailid}). (funktion (dommer) (//ajourføring vellykket}, funktion (fejl) (konsol. log (" fejl "fejl)});,, når ajourføringen er vellykket, tæt på den modale pop - up -.der tilføjes følgende kode til at ajourføre succes callback. $('# editmodal). modal (gem), her er fuld, ajourføre, funktion:,, $scope.update = function() {var fb = nye nul ("https://blistering-heat-2473.firebaseio.com/articles/" + $anvendelsesområde. posttoupdate. $id), var artikel = $nul (fb); artikel. $ajourføring ((afsnit: $scope.posttoupdate.title, post: $scope.posttoupdate.post, emailid: $scope.posttoupdate.emailid}). (funktion (dommer) ($('&#editmodal). modal (gem)}, funktion (fejl) (konsol. log ("fejl:" fejl)})), medmindre alle de ændringer og genoptage den server.prøv at underskrive, ved hjælp af en gyldig, e - mail - adresse og kodeord.når undertegnet i, udarbejdelse og ajourføring en post.,,, at postede, næste, lad os gennemføre de slette post - funktionalitet.for at slette en stilling, er det passende at vise en bekræftelse af pop - up -, så lad os begynde med det.,, trin 1: vise slette bekræftelse pop - up -, også her, vi vil bruge en bootstrap modal viser en bekræftelse af pop - up -.tilføje følgende: kode for, velkommen. html,:,, < div klasse = "modal" "id =" deletemodal "tabindex =" - 1 "rolle =" dialog "aria labelledby =" deletemodallabel "aria skjult =" ægte "> < div klasse =" modal dialog "> < div klasse =" modal indhold "> < div klasse =" modal overskrift "stil =" tekst tilpasse: center; "> < h4 klasse =" modal titel "stil =" farve: rød; "id =" deletemodallabel "> og du vil slette denne post for evigt!!</h4> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" ng-click="update()">Delete</button> </div> </div> </div> </div>,,Now, modify the ,Delete, button to add a ,data-toggle, and ,data-target, attribute as shown below:,,<button class="btn btn-xs btn-warning" data-toggle="modal" data-target="#deleteModal" >DELETE</button>,,The ,data-toggle, attribute triggers the modal popup, and the ,data-target, attribute identifies which HTML block to show as the modal popup. , redde de ændringer og genoptage den server.skriv under og klik, slette, knap og du skulle se det pop - up - bekræftelse.,,,,, trin 2: slette den post, for at slette postede, vi er nødt til at hente artikel fra nul.når vi har id, hvis brugeren klik slette fra modal pop - up -, skal vi fjerne artikel fra nul.,, så først fjerne data greb, tilskriver fra, slette, knap, da vi vil udløse modal pop - up - fra registeransvarlige, når artikel har været ude.også tilføje en , ngclick direktiv til, slette, knap.,, < knap klasse = "btn btn xs btn advarsel" ng klik = "confirmdelete (artikel. $id)" data mål = "# deletemodal" > slette < /knap >, indenfor, app /hilser velkommen. det skaber en ny funktion, hedder, confirmdelete,, som vil udløse den modale pop - up - og også hente artikel fra nul.her er, hvad de, confirmdelete, funktion ligner:,, $scope.confirmdelete = funktion (id) {var fb = nye nul ("https://blistering-heat-2473.firebaseio.com/articles/" + id), var artikel = $nul (fb); $scope.posttodelete = artikel. $asobject(). $('# deletemodal'). modal();},, som det fremgår af ovenstående kode, vi har skabt, nul, objekt ved hjælp af artikel id med $nul, har vi fået artikel objekt.ved anvendelse af denne artikel genstand, vi vil være i stand til at fjerne artikel fra nul.,, tilføje en anden funktion kaldes , deletepost,, som vi kalder, når brugeren bekræfter artikel sletning.i, confirmdelete, funktion, vi allerede har tildelt artikel imod $anvendelsesområde. posttodelete,.i , deletepost, funktion, vi vil bruge $scope.posttodelete, formål at henvise til den artikel, og fjerne den fra nul.her er hvordan det , deletepost, funktion er:,, $scope.deletepost = function() {var fb = nye nul ("https://blistering-heat-2473.firebaseio.com/articles/" + $anvendelsesområde. posttodelete. $id), var artikel = $nul (fb); artikel. $remove(). så (funktion (dommer) ($('# deletemodal "). modal (gem)}, funktion (fejl) (konsol. log (" fejl "fejl)})}, har vi brugt $fjerne api - metode til at fjerne artikel fra nul.den vellykkede sletning, har vi også toggled synligheden af de slette bekræftelse pop - up -.,, tilføje, ngclick, direktiv om , slette, knap i slette modal pop - up -.,, < knap type = "knap" klasse = "btn btn primære" ng klik = "deletepost()" > og slette < /knap >,, at redde alle de ændringer og genoptage den server.tegn på ved hjælp af en gyldig, e - mail - adresse og kodeord.når logget ind, prøv at slette en artikel,.,, indpakning, i denne forelæsning, vi så, hvordan at redigere og slette blog indsættes i nul ved hjælp af api - metoder.i næste del af ministeriet, vil vi forsøge at integrere ladda - indikatorer i vores anvendelse.vi kan også ordne nogle små problemer, der findes i vores anvendelse.,, lad os høre deres mening i bemærkningerne nedenfor.,, kildekode fra denne lektion er tilgængelig på github.,
