, skabe en web - app fra bunden ved hjælp af angularjs og nul,,,,, 789,,,,,,,, 56,,,,,,, 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 2 i denne serie, vi vil bruge angularjs og nul for at skabe en enkelt webapplikationen fra bunden.det vil være en simpel blogge anvendelse, hvor brugeren kan underskrive eller tegn og offentliggøre en blog post.,, det pædagogiske tror, du har en grundlæggende viden om angularjs, men det burde ikke være svært at samle spørgsmål undervejs.,, indførelse angularjs,, angularjs er en af de mest efterspurgte javascript mvc rammer.det er en strukturel ramme til at skabe dynamiske web ansøgninger ved at udvide html kapacitet.træk som data, bindende og afhængighed injektion gør det lettere at udvikle applikationer med mindre kode.,, fra angularjs dokumentation:,, html er stor for at erklære statisk dokumenter, men det slår fejl, når vi forsøger at bruge det til at erklære dynamiske synspunkter i web - applikationer.angularjs kan man udvide html ordforråd til din ansøgning.den deraf følgende miljø er yderst aktive, læselig og hurtigt at udvikle.,, introduktion til nul, og forestille sig at skabe en webapplikation uden at skulle bekymre sig   om anden side.   nul gør det muligt at synkronisere data i realtid med vores anvendelse uden at bekymre sig om den anden.det eneste vi skal gøre er at fremsætte nogle api - opkald.,, nul er en magtfuld api til lagring og synkronisere data i realtid.ved at kombinere den magt af angularjs tovejs data bindende med nul resulterer i en trekant synkronisering, der er helt fantastisk.,, at komme i gang med at angularjs,,  , vinkel frø - projektet er et boilerplate til at komme i gang med at skabe net apps ved hjælp af angularjs.download eller klonen, vinkel frø, projekt fra arkivet.  , $git klon https: //github. kom /vinkel /vinkel frø. ud, sejle til projektet og installere den nødvendige over afhængighed, $cd - vinkel frø $new public management installere&## installere afhængighed, start knude - serveren:,, $new public management begynder&## start server, punkt din browser til  http: //localhost: 8000 /app /index en.html,   skulle du se misligholdelse app.,, sejle til, app, fortegnelse i, vinkel frø.det er, hvor ansøgningen kode er bosat.i  , app, mappe, du finder  , app.js, som er kernen i programmet.vi skal anmelde alle app niveau moduler og ruter   i denne sag.ved misligholdelse, vinkel, frø, projektet har to synspunkter, view1, og view2,.slette mapper, view1, og view2 fra app mappe.  , lad os starte forfra.åbne  , app.js, og fjerne de   eksisterende   kode.i app.js, vi skal definere vores ansøgning ruter, f.eks. hvordan man klarer en anmodning som /hjem.med henblik på at fastlægge ruter, får vi brug for en angularjs modul ringede ngroute.til brug ngroute, er det nødvendigt først at injicere det eller tilføje det til   vores anmodning.vi bruger angular.module at tilføje  , ngroute, modul til vores app som vist nedenfor:  ,, vinkel. - modul ('myapp "[" ngroute ']),  , ngroute, modul har en del kaldes $routeprovider, der er nyttigt for konfigureringen af ruter.vi vil have $routeprovider, i  , ud, metode, angular.module, og definere vores ruter i sin callback funktion som vist nedenfor:,,'use strenge; vinkel. - modul ('myapp "[" ngroute ']).ud (["$routeprovider, funktion ($routeprovider) (//ruter vil være her}]), næste, åbne,., og fjerne manuskriptet henvisninger til, view1, og view2,.fjern alt fra kroppen,., bortset fra manuskriptet henvisninger og   div   vist nedenfor   med   ngview direktiv.  , < div ng baggrund > < /div >,,, ngview, er et direktiv, som bidrager til at gøre den opfattelse, der er knyttet til en rute til den vigtigste /index.html.så hver gang den rute, ændringer i indholdet af ovennævnte vist div ændringer.,,, lad os skabe en ny holdning til brugeren skal underskrive.i  , app, statistik, skabe en ny mappe ringede hjem.indenfor, hjem, skaber to   filer, home.html og hjem. er.luk op, home.html, og omfatter følgende kode: http: //,, <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="http://getbootstrap.com/favicon.ico"> <title>AngularJS & Firebase Web App</title> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> <link href="justified-nav.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="jumbotron" style="padding-bottom:0px;"> <h2>AngularJS & Firebase App!</h2> </div> <form class="form-signin" role="form"> <input type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> </body></html>,,As seen in the above code, we'll be using Bootstrap to create our application views.,,Inside ,home.js,, we'll declare the routes for the application adgang til hjemmet synspunkt.- routeprovider,   har en metode, når det, som vi kan bruge til at skabe en rute for vores holdning.ved fastlæggelsen af en ny rute, vi sætter en, templateurl, som vil blive truffet i det, index.html,.sammen med den, vil vi også fastsætte en, finansinspektørens for nyoprettede, $anvendelsesområde, af den opfattelse.en flyveleder er en logik, der styrer en bestemt opfattelse.   her er, hvordan det skal se ud:,,'use strenge; vinkel. - modul ('myapp. hjem, ['ngroute ']) //angivet rute. ud (["$routeprovider, funktion ($routeprovider) ($routeprovider. når (" /home "(templateurl: hjem /home en.html" registeransvarlige: "homectrl'})}]) //home - controller. controller ('homectrl, [function() {}]);,, luk nu op, app.js og tager hjem   modul, myapp. hjem,   i app.desuden erklærer misligholdelse vej i vores anvendelse af  , $routeprovider.otherwise, metode   til hjemmet synspunkt.,,'use strenge; vinkel. - modul ('myapp "[" ngroute "," myapp. hjem "//tilføjede hjem modul]).ud (["$routeprovider, funktion ($routeprovider) (//fastsat defualt opfattelse af vores app til hjem $routeprovider. ellers ((redirectto: » /home"})}]), dernæst for at vise den hjemmeside, er vi nødt til at omfatte  , home.js, i vigtigste html skabelon fil af app.luk op,., og omfatte følgende:,, < manuskript src = "home /hjem. er" > < /manuskript >, genoptage serveren og punkt din browser til   http: //localhost: 8000 /app /index en.html  , og du bør se tegn på skærmen:,,,,, begyndt med nul, med henblik på at komme i gang, skal vi bruge til at registrere en fri   konto på nul.den vellykkede signup, får vi en skærm, som denne:   ,,,,, notere adressen på   app skabt og klik på, forvalte app,   knap.vi vil bruge det nul url til at interagere med nul - databasen.,, vi bruger til at bekræfte vores anmodning nul ved hjælp af en e - mail og kodeord.for at få det til at fungere, er vi nødt til at gøre det fra nul.fra instrumentbrættet, klik, login &), tab i venstre menu.In that screen, under the ,Email & Password, tab, check ,Enable Email & Password Authentication, as shown:,,,,,Add a new user with an ,Email, and ,Password, against which we'll authenticate after implementing the sign-in functionality.,,,,,Implementing Sign-In Functionality,,In order to get started with using Firebase, include the following scripts in ,app/index.html:,,,<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script> <script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>,,Next, we need to inject the ,firebase, module in ,home.js,. tilføje, nul, modul, home.js som vist nedenfor:,, vinkel. - modul ('myapp. hjem, ['ngroute,'firebase ']), nu er vi klar til at interagere med nul.luk op, home.js, og i  , homectrl, skabe en   nye funktion, signin, til at autentificere brugeren.vi vil bruge $anvendelsesområde, for at skabe nye   funktion.$anvendelsesområde, er et objekt, der henviser til anvendelsen model, og   fungerer også som lim mellem anvendelsen registeransvarlige og baggrund.derfor vil vi give de $anvendelsesområde, formål i, signin, fungerer således, at den genstand, model fra synspunkt er tilgængelige i den, signin, funktion, $scope.signin = funktion ($anvendelsesområde) {var brugernavn = $scope.user.email; var kodeord = $scope.user.password; //) logik vil være her). næste, indenfor, homectrl,   skabe et - nul - nul - f.eks. ved hjælp af url   som vist:,, var firebaseobj = nye nul (https: //////////////blistering-heat-2473. firebaseio. com ");  ,,  , $firebasesimplelogin, modul, der anvendes til at bekræfte mod nul ved hjælp af en e - mail - id og kodeord.for at bruge det, vi har brug for til at injicere  , $firebasesimplelogin, modul   i  , homectrl, som vist:,,. controller ('homectrl "[" $anvendelsesområde "," $firebasesimplelogin, funktion ($anvendelsesområde, $firebasesimplelogin) {, bruger firebaseobj, skabe en   $firebasesimplelogin, f.eks. vist:,, var loginobj = $firebasesimplelogin (firebaseobj), ved hjælp af   $login api, vi vil bekræfte den e - mail - id og kodeord mod nul., loginobj. $login, tager i   e - mail og kodeord som parametre.den vellykkede autentificering, får vi en succes og en fiasko callback autentificering, får vi en fejl callback.  , $scope.signin = funktion (tilfælde) {begivenhed. preventdefault(); //for at forhindre form genopfriske var brugernavn = $scope.user.email; var kodeord = $scope.user.password; loginobj. $login ('password, {e - mail - brugernavn, kodeord: kode}). (funktion (bruger) (//succes callback konsol. log ('authentication vellykket)}, funktion (fejl) (//fiasko callback konsol. log ('authentication fiasko ");})}, nu for alle ovennævnte registeransvarlige kode til at arbejde vi skal lægge den registeransvarlige tillyset.angularjs giver et direktiv, kaldet ngcontroller at vedlægge en registeransvarlige en udsigt.   åbne, home.html, og tilføje, ngcontroller, direktiv   den, et organ, et element til at knytte det til  , homectrl,.,, vi har brug for e - mail - og kodeord værdier skal være tilgængelige i, signin,   tilsynsførende funktion.angularjs giver et direktiv, kaldet ngmodel at binde sin værdi, $anvendelsesområde, således at det er tilgængelige i den  , signin, funktion.   omfatter, ngmodel direktiv til den e - mail - og kodeord, input, elementer, som vist:,, < krop ng registeransvarlige = "homectrl" > < div klasse = "beholder" > < div klasse = "går" stil = "fyld bunden: 0px;" > < h2 > angularjs & - nul - app.</h2> </div> <form class="form-signin" role="form"> <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus=""> <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required=""> <label class="checkbox"> <a href="#"> Sign Up</> </label> <button type="button" class="btn btn-lg btn-primary btn-block">SignIn</button> </form> </div> </body>,,Finally, add the ngClick directive to the sign-in button to call the ,SignIn, function:,,<button type="button" ng - klik = "signin ($begivenhed)" klasse = "btn btn lg btn primære btn block" > signin < /knap >,, at redde alle de ændringer og genoptage den server.punkt   din browser til   http: //localhost: 8000 /app /index en.html&#/home   og forsøge at underskrive efter   e - mail - id  , [email protected] og kodeord, jay.den vellykkede afsenderautentificering, du skulle se det budskab,  , autentificering succes,   i browseren konsol.,, konklusion i denne forelæsning, vi gennemgår, hvordan   komme i gang med at skabe en   angularjs webapplikation.vi gennemførte det tegn i funktioner og behørigt autentificeret bruger mod nul - databasen.  , i anden del af denne forelæsning, vil vi tage det næste   niveau ved at gennemføre valideringer, underskrive funktioner, og nogle andre elementer.   kode fra ovennævnte lektion er tilgængelig på   github.,, lad os vide, dine tanker i bemærkningerne nedenfor.