Proiect demonstrativ AngularJS: Cum să construiți o aplicație cu AngularJS

Publicat: 2020-09-10

Dacă înveți dezvoltarea full-stack, trebuie să te fi confruntat cu întrebarea „Cum să rulezi proiectul AngularJS?” Nu vă faceți griji pentru că, în acest articol, vom împărtăși un tutorial detaliat despre construirea unei aplicații cu AngularJS.

După finalizarea acestui proiect, veți fi familiarizat cu elementele de bază ale AngularJS, implementările sale și veți avea o aplicație funcțională pe care o puteți prezenta prietenilor tăi. Puteți marca acest tutorial, deoarece am enumerat pașii pentru diferite etape de dezvoltare împreună cu codul.

Rețineți că ar trebui să înțelegeți codul înainte de a-l implementa. De aceea, nu recomandăm să copiați și să lipiți codul. Cu toate acestea, dacă știți cum funcționează fiecare linie de cod, o puteți copia și lipi liber. Înțelegerea modului în care funcționează codul ar asigura că învățați cel mai eficient.

Cuprins

Ce este AngularJS? O scurtă introducere

Înainte de a discuta proiectele AngularJS, să vorbim mai întâi puțin despre tehnologie. AngularJS permite utilizatorilor să extindă HTML pentru aplicații. Este un cadru web front-end bazat pe JavaScript. HTML întârzie în vizualizările dinamice pentru aplicațiile web, iar Angular rezolvă această problemă.

AngularJS are o comunitate înfloritoare de utilizatori și dezvoltatori, unde puteți pune întrebări și vă puteți elimina confuzia. Angular oferă utilizatorilor legături de date, controlere și multe alte instrumente puternice pentru a îmbunătăți front-end-ul unei pagini web. Veți descoperi multe concepte în proiectul nostru, pe măsură ce le vom implementa în tutorialul nostru.

Cerințe preliminare pentru proiectele AngularJS pentru începători

Înainte de a începe să lucrați la proiecte AngularJS, ar trebui să vă familiarizați cu următoarele concepte:

HTML

HTML înseamnă HyperText Markup Language. Este responsabil pentru orice structură a paginii web și este primul bloc de construcție pentru dezvoltarea web. Ar trebui să vă familiarizați cu sintaxa HTML, elementele sale și implementările înainte de a începe să lucrați la acest proiect.

CSS

CSS înseamnă Cascading Style Sheets și este limbajul principal pentru adăugarea de elemente vizuale la o pagină web. Este la fel de important ca HTML, deoarece face ca pagina web să arate mai bine și să devină mai accesibilă. Deși HTML este necesar pentru prima etapă a proiectului nostru AngularJS, va trebui să adăugați CSS la acesta mai târziu. De aceea ar trebui să fii familiarizat cu el înainte de a începe să lucrezi la proiecte AngularJS pentru începători.

JavaScript

AngularJS se bazează pe JavaScript. Familiarizarea cu sintaxa, codul și implementările sale JS va simplifica și pentru dvs. multe aspecte tehnice ale AngularJS. Asigurați-vă că înțelegeți bine elementele de bază ale JS înainte de a începe să lucrați la această sarcină.

Pe lângă aceste cerințe preliminare, ar trebui să fiți familiarizat și cu elementele de bază ale AngularJS. Acest proiect presupune că aveți cunoștințe de lucru despre HTML, CSS, JS și AngularJS. Acum că am scos asta din drum, să începem.

Cum să rulați proiectul AngularJS - Tutorial

În acest tutorial, vom construi o aplicație AngularJS pentru feeduri sportive. O aplicație de feed-uri sportive vă arată statistici ale unui meci sau eveniment. De exemplu, puteți crea o aplicație care afișează tabelul de scor al meciurilor sau un tabel de scor al echipei IPL. Am ales să lucrăm la o aplicație pentru sport, deoarece nu necesită multă dezvoltare back-end.

HTML-ul

Mai întâi vom începe prin a crea codul HTML pentru aplicația noastră. Iată șablonul pentru codul nostru HTML.

<tabel>

<cap>

<tr><th colspan="4″>Clasamentul Campionatului Piloților</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tabel>

</corp>

Trebuie să fi observat {{ și }}. Se numesc expresii și vă permit să efectuați sarcini de calcul pentru a returna valoarea necesară. De exemplu, iată câteva expresii valide:

{{ 2 + 2 }}
{{ numele meu }}

Puteți spune că sunt fragmente de JavaScript. Cu toate acestea, cel mai bine ar fi dacă nu ați folosi expresii pentru a implementa logica de nivel înalt. Pentru a face asta, ar trebui să utilizați directive. Expresiile sunt potrivite doar pentru implementarea logicii de nivel scăzut. Sarcina principală a expresiilor este de a lega datele aplicației necesare la HTML.

Aflați: Salariu pentru dezvoltatori HTML în India: pentru cei proaspăți și cu experiență

Directivele din Codul nostru

Unul dintre cele mai importante concepte pe care le-ați descoperi în timp ce lucrați la proiecte AngularJS este directivele. O directivă este un marker pe un element DOM pentru a informa AngularJS că trebuie să atașeze un anumit comportament elementului individual. Directiva îi poate spune lui Angular să efectueze diverse sarcini, cum ar fi transformarea elementului DOM și a copiilor acestuia, înlocuirea acestuia cu un alt element DOM. Majoritatea directivelor puternice încep cu „ng-”, unde „ng” înseamnă Angular.

Iată diferitele directive pe care le-am folosit în codul nostru de mai sus, împreună cu aplicațiile lor:

ng-app

Această directivă pornește aplicația și îi definește domeniul de aplicare. Este o directivă esențială, deoarece puteți avea mai multe aplicații în AngularJS și îi spune programului punctele de început și de sfârșit ale fiecărei aplicații.

ng-controller

Această directivă definește ce controler ar avea puterea de vedere a utilizatorului. Am notat driversController în acest sens, care va furniza lista de drivere (driversList) în aplicația noastră.

ng-repeat

Această directivă este una dintre cele mai frecvent utilizate în rândul dezvoltatorilor Angular. Acesta definește domeniul de aplicare a șablonului în timpul buclei prin colecții.

Angular are multe directive și, pe măsură ce veți lucra la mai multe proiecte AngularJS pentru începători, veți descoperi mai multe aplicații pentru acestea. De aceea, vă recomandăm să lucrați la diferite proiecte în timp ce învățați o anumită abilitate.

Controlorii

A avea vedere ar fi inutil dacă nu adăugăm un controler. Deci, vom adăuga driversController aici:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope) {

$scope.driversList = [

{

Conducător auto: {

givenName: „Sebastian”,

Nume de familie: „Vettel”

puncte: 322,

naționalitate: „germană”,

Constructori: [

{nume: „Red Bull”}

]

{

Conducător auto: {

Nume dat: „Fernando”,

Nume de familie: „Alonso”

puncte: 207,

naționalitate: „spaniolă”,

Constructori: [

{nume: „Ferrari”}

]

}

];

});

O variabilă unică pe care ați observat-o este $scope. Transmitem această variabilă ca parametru controlerului, deoarece ar lega controlerul cu vizualizările. $scope deține toate datele de utilizat în șablon, iar toate datele pe care le adăugați la acesta vor fi accesibile în vizualizări.

Vom adăuga o matrice de date statice pentru moment și o vom înlocui mai târziu, pe măsură ce progresăm în proiectul nostru.

Să adăugăm mai întâi controlerul la app.js, care ar trebui să arate astfel:

angular.module('F1FeederApp', [

„F1FeederApp.controllers”

]);

Această mică linie de cod a inițializat aplicația noastră și a înregistrat modulele de care depinde aplicația noastră. Acum trebuie să adăugăm toate aceste informații în fișierul nostru index.html:

<!DOCTYPE html>

<html>

<cap>

<title>F-1 Feeder</title>

</cap>

<tabel>

<cap>

<tr><th colspan="4″>Clasamentul Campionatului Piloților</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tabel>

</corp>

</html>

În această etapă, puteți porni aplicația. Cu toate acestea, rețineți că va trebui să depanați aplicația. Un pas crucial pentru a învăța cum să rulați proiectul AngularJS este depanarea unei aplicații.

Încărcați date de pe server

Acum vom adăuga funcționalitatea de preluare a datelor live de la un server RESTful în aplicația noastră. Pentru a comunica cu serverele HTTP, AngularjS are două servicii, $http și $resource. În codul nostru, vom folosi $http, deoarece oferă abstractizare la nivel înalt. Vom crea un serviciu personalizat pentru a abstra apelurile API ale serverului nostru. Acesta va prelua datele și va fi un înveliș în jurul $http. Deci, vom adăuga următorul cod în fișierul nostru services.js:

angular.module('F1FeederApp.services', []).

factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

returnează $http({

metoda: „JSONP”,

url: „http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK”

});

}

return ergastAPI;

});

Mai întâi am creat un nou modul numit F1FeederApp.services și am adăugat un serviciu ergastAPIservice. Rețineți că am transmis $http ca parametru serviciului. De asemenea, îi vom spune lui Angular să adauge modulul nostru în aplicație. Pentru a face toate acestea, trebuie să înlocuim codul din app.js cu următoarele:

angular.module('F1FeederApp', [

„F1FeederApp.controllers”,

„F1FeederApp.services”

]);

Va trebui să modificăm puțin controller.js și să adăugăm ergastAPIservice sub formă de dependență, iar apoi acest pas se va termina:

angular.module('F1FeederApp.controllers', []).

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(funcție (răspuns) {

// Sapă în răspuns pentru a obține datele relevante

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

Pentru a verifica dacă codul funcționează sau nu, reîncărcați aplicația. Veți observa că nu am modificat șablonul, ci am inclus doar variabila nameFilter. În secțiunea următoare, vom folosi acea variabilă:

Aplicați filtre

Până acum, am adăugat un controler funcțional la aplicația noastră. Acum îi vom adăuga mai multe funcționalități prin adăugarea unei bare de introducere a căutării textului. Puteți include următorul cod în index.html sub eticheta <body>:

Utilizăm directiva „ng-model” aici. Acesta va lega câmpul de text la variabila „$scope.nameFilter”. Directiva asigură că valoarea variabilei noastre rămâne actualizată în funcție de valoarea de intrare. Să îi spunem lui „ng-repeat” că trebuie să filtreze matricea „driversList” după valoarea prezentă în „nameFilter” înainte de a scoate datele:

Efectuăm două legături de date diferite aici. În primul rând, ori de câte ori ați introdus o valoare în câmpul de căutare, Angular se va asigura că variabila $scope.nameFilter este actualizată în consecință. În al doilea rând, de îndată ce nameFilter actualizează ng-repeat, a doua directivă atașată primește o nouă valoare și o actualizare.

Să presupunem că vrem să filtram doar folosind Driver.familyName și Driver.givenName. Va trebui să adăugăm driversController sub $scope.driversList = [] astfel:

$scope.searchFilter = funcție (driver) {

var cuvânt cheie = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || cuvânt cheie.test(driver.Driver.givenName) || cuvânt cheie.test(driver.Driver.familyName);

};

Pentru a finaliza acest proces, trebuie doar să actualizăm linia cu directiva ng-repeat:

Puteți reîncărca aplicația pentru a vedea dacă codul funcționează sau nu. Aplicația noastră are acum o funcție de căutare. În continuare, vom adăuga rute.

Adăugarea rutelor

Trebuie să creăm o pagină care să arate detaliile driverelor noastre. Pagina ar trebui să permită unui utilizator să facă clic pe un șofer și să vadă informațiile despre cariera acestuia. Vom începe prin a adăuga serviciul $routeProvider în fișierul app.js. Vă va ajuta să gestionați corect diferitele rute de aplicare.

Acum vom adăuga un traseu pentru informații despre șofer și altul pentru tabloul de bord al campionatului. Acum, fișierul nostru app.js arată astfel:

angular.module('F1FeederApp', [

„F1FeederApp.services”,

„F1FeederApp.controllers”,

„ngRoute”

]).

config(['$routeProvider', function($routeProvider) {

$routeProvider.

când(„/drivers”, {templateUrl: „partials/drivers.html”, controler: „driversController”}).

când(„/drivers/:id”, {templateUrl: „partials/driver.html”, controler: „driverController”}).

altfel({redirectTo: '/drivers'});

}]);

După adăugarea acestui cod, când un utilizator ar naviga la https://domain/#drivers, va încărca driversController și va localiza vizualizarea parțială. Dacă ați urmat acest tutorial până acum, trebuie să fi observat un lucru. Nu am adăugat vizualizările parțiale! Deci următorul nostru pas ar fi să adăugăm același lucru în aplicația noastră:

Adăugarea de vizualizări parțiale

O caracteristică excelentă a AngularJS este că vă permite să legați diferite rute la diferite vizualizări și controlere. Cu toate acestea, pentru ca AngularJS să efectueze această acțiune, ar trebui să știe unde poate reda acele vederi parțiale.

Deci folosim directiva ng-view și o adăugăm la fișierul nostru index.html:

<!DOCTYPE html>

<html>

<cap>

<title>F-1 Feeder</title>

</cap>

<ng-view></ng-view>

</corp>

</html>

Datorită acestei implementări, atunci când vom naviga printr-o rută a aplicației, Angular va încărca vizualizarea relevantă și o va reda. Ar determina locația pentru redare prin eticheta <ng-view>. Acum, trebuie doar să facem un fișier numit partials/drivers.html și să punem acolo codul HTML al tabelului de campionat. În timp ce ne aflăm, vom lega, de asemenea, ruta noastră de informații despre șofer cu numele șoferului:

<tabel>

<cap>

<tr><th colspan="4″>Clasamentul Campionatului Piloților</th></tr>

</thead>

<tbody>

<td>{{$index + 1}}</td>

<td>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</a>

</td>

<td>{{driver.Constructors[0].name}}</td>

<td>{{driver.points}}</td>

</tr>

</tbody>

</tabel>

Ajungem la etapele finale de dezvoltare. Pagina noastră cu informații despre șofer are nevoie de date, așa că asta vom adăuga la ea. Pentru a face asta, ar trebui să scriem următorul cod în services.js:

angular.module('F1FeederApp.services', [])

.factory('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = function() {

returnează $http({

metoda: „JSONP”,

url: „http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK”

});

}

ergastAPI.getDriverDetails = function(id) {

returnează $http({

metoda: „JSONP”,

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = function(id) {

returnează $http({

metoda: „JSONP”,

url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'

});

}

return ergastAPI;

});

Acum vom edita controllers.js. Ne propunem să conectăm ID-ul fiecărui șofer la serviciu, astfel încât recuperarea informațiilor noastre să rămână specifică șoferului solicitat.

angular.module('F1FeederApp.controllers', []).

/* Controler de driver */

controller('driversController', function($scope, ergastAPIservice) {

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = funcție (driver) {

var re = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers().success(funcție (răspuns) {

//Săpând în răspuns pentru a obține datele relevante

$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;

});

}).

/* Controler driver */

controller('driverController', function($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$scope.races = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(funcție (răspuns) {

$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];

});

ergastAPIservice.getDriverRaces($scope.id).success(funcție (răspuns) {

$scope.races = response.MRData.RaceTable.Races;

});

Rețineți că am adăugat serviciul $routePrams în controlerul driverului. Vă va permite să accesați parametrii URL și este un pas crucial.

Acum vom crea un fișier numit partials/driver.html, deoarece am adăugat toate datele necesare și trebuie să ne ocupăm doar de restul vizualizării parțiale. Am folosit directiva ng-show în codul de mai jos. Directiva se va asigura că aplicația noastră arată doar elementul HTML necesar atunci când expresia este adevărată. Aceasta înseamnă că, chiar dacă condiția este nulă, aplicația nu va afișa elementul HTML. Iată codul:

<secțiunea id="principal">

</div>

Țara: {{driver.Driver.nationality}} <br/>

Echipa: {{driver.Constructors[0].name}}<br/>

Naștere: {{driver.Driver.dateOfBirth}}<br/>

<a href="{{driver.Driver.url}}” target="_blank”>Biografie</a>

</div>

</nav>

<cap>

<tr><th colspan="5″>Rezultatele Formula 1 2013</th></tr>

</thead>

<tbody>

<tr>

<td>Echipă</td> <td>Marele Premiu</td> <td>Echipă</td> <td>Grilă</td> <td>Cursă</td>

</tr>

<td>{{race.round}}</td>

<td><img src="img/flags/{{race.Circuit.Location.country}}.png” />{{race.raceName}}</td>

<td>{{race.Results[0].Constructor.name}}</td>

<td>{{race.Results[0].grid}}</td>

<td>{{cursa.Rezultate[0].poziție}}</td>

</tr>

</tbody>

</tabel>

</div>

</section>

Pasi finali (CSS)

Până acum, aveți o aplicație de alimentație sportivă care funcționează corespunzător. După cum am discutat înainte, CSS se concentrează pe a face pagina web să arate atractiv. Deci, în acest pas, aveți independența de a adăuga CSS la aplicația dvs. și de a îmbunătăți aspectul acesteia. Puteți schimba fonturile, puteți schimba fundalul, puteți adăuga imagini diferite sau puteți anima unele tranziții pentru a îmbunătăți interfața de utilizare a aplicației. Secțiunile tehnice ale proiectului nostru sunt complete.

Checkout: Full Stack Developer Salariul în India

Aflați mai multe despre dezvoltare

Acum ați construit o aplicație AngularJS! Sperăm că v-a plăcut acest tutorial. Sa nu uiti asta

Angular este un cadru destul de robust, cu multe funcționalități. Cei din acest articol au fost foarte puțini în comparație cu lucrurile de care este capabil Angular. Pe măsură ce veți lucra la proiecte AngularJS mai avansate, veți descoperi mai multe dintre capabilitățile sale puternice.

Dacă doriți să aflați mai multe despre dezvoltarea full-stack, atunci vă recomandăm să accesați blogul nostru. Veți găsi numeroase resurse despre diferitele aspecte ale acestui domeniu. Iată câteva pentru lectură suplimentară:

Top 10 abilități pentru a deveni un dezvoltator Full-Stack
De ce să devii un dezvoltator Full-Stack?
Cum să devii o serie Full-Stack Developer

Pe de altă parte, puteți urma și un curs de dezvoltare complet și puteți învăța de la experții din industrie prin proiecte, videoclipuri și sarcini.

Dacă sunteți interesat să aflați mai multe despre dezvoltarea full-stack, consultați UpGrad & IIIT-B PG Diploma în Full-stack Software Development, care este concepută pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte și misiuni. , Statut de absolvenți IIIT-B, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.

Aterizează la locul de muncă visat

UPGRAD SI DIPLOMA PG IN DEZVOLTARE DE SOFTWARE LUI IIIT-BANGALORE

Înscrie-te azi