Progetto demo AngularJS: come creare un'app con AngularJS

Pubblicato: 2020-09-10

Se stai imparando lo sviluppo full-stack, devi aver affrontato la domanda "Come eseguire il progetto AngularJS?" Non preoccuparti perché, in questo articolo, condivideremo un tutorial dettagliato sulla creazione di un'app con AngularJS.

Dopo aver completato questo progetto, avresti familiarità con le basi di AngularJS, le sue implementazioni e avrai un'app funzionante che puoi mostrare ai tuoi amici. Puoi aggiungere questo tutorial ai segnalibri poiché abbiamo elencato i passaggi per le diverse fasi di sviluppo insieme al codice.

Nota che dovresti comprendere il codice prima di implementarlo. Ecco perché non consigliamo di copiare e incollare il codice. Tuttavia, se sai come funziona ogni riga di codice, puoi copiarla e incollarla liberamente. Capire come funziona il codice assicurerebbe un apprendimento più efficiente.

Sommario

Cos'è AngularJS? Una breve introduzione

Prima di discutere dei progetti AngularJS, parliamo prima un po' della tecnologia. AngularJS consente agli utenti di estendere l'HTML per le applicazioni. È un framework web front-end basato su JavaScript. L'HTML è in ritardo nelle visualizzazioni dinamiche per le app Web e Angular risolve questo problema.

AngularJS ha una fiorente comunità di utenti e sviluppatori in cui puoi porre domande e rimuovere la tua confusione. Angular fornisce agli utenti data binding, controller e molti altri potenti strumenti per migliorare il front-end di una pagina web. Scoprirai molti concetti nel nostro progetto man mano che li implementeremo nel nostro tutorial.

Prerequisiti per i progetti AngularJS per principianti

Prima di iniziare a lavorare su progetti AngularJS, dovresti avere familiarità con i seguenti concetti:

HTML

HTML sta per HyperText Markup Language. È responsabile della struttura di qualsiasi pagina Web ed è il primo elemento costitutivo dello sviluppo Web. Dovresti avere familiarità con la sintassi dell'HTML, i suoi elementi e le sue implementazioni prima di iniziare a lavorare su questo progetto.

CSS

CSS sta per Cascading Style Sheets ed è il linguaggio principale per aggiungere elementi visivi a una pagina web. È importante quanto l'HTML perché rende la pagina web migliore e più accessibile. Sebbene l'HTML sia necessario per la prima fase del nostro progetto AngularJS, dovresti aggiungere CSS ad esso in un secondo momento. Ecco perché dovresti conoscerlo prima di iniziare a lavorare su progetti AngularJS per principianti.

JavaScript

AngularJS è basato su JavaScript. Conoscere la sintassi, il codice e le sue implementazioni di JS semplificherà anche molti aspetti tecnici di AngularJS. Assicurati di aver compreso bene le basi di JS prima di iniziare a lavorare su questa attività.

Oltre a questi prerequisiti, dovresti anche avere familiarità con le basi di AngularJS. Questo progetto presuppone che tu abbia una conoscenza pratica di HTML, CSS, JS e AngularJS. Ora che l'abbiamo tolto di mezzo, iniziamo.

Come eseguire il progetto AngularJS – Tutorial

In questo tutorial creeremo un'app per feed sportivi AngularJS. Un'app di feed sportivo ti mostra le statistiche di una partita o di un evento. Ad esempio, puoi creare un'app che mostra lo scorecard delle partite o una tabella dei punteggi della squadra IPL. Abbiamo scelto di lavorare su un'app di feed sportivo perché non richiede molto sviluppo di back-end.

L'HTML

Inizieremo innanzitutto creando l'HTML per la nostra applicazione. Ecco il modello per il nostro codice HTML.

<testa>

<tr><th colspan="4″>Classifiche del Campionato Piloti</th></tr>

</thead>

<corpo>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</tabella>

</corpo>

Devi aver notato {{ e }}. Sono chiamate espressioni e consentono di eseguire attività di calcolo per restituire il valore richiesto. Ad esempio, ecco alcune espressioni valide:

{{ 2 + 2 }}
{{ il mio nome }}

Puoi dire che sono frammenti di JavaScript. Tuttavia, sarebbe meglio se non utilizzassi le espressioni per implementare la logica di alto livello. Per farlo, dovresti usare le direttive. Le espressioni sono adatte solo per l'implementazione logica di basso livello. Il compito principale delle espressioni è associare i dati dell'applicazione richiesti all'HTML.

Impara: Stipendio per sviluppatori HTML in India: per matricole ed esperti

Le Direttive nel nostro Codice

Uno dei concetti più importanti che scopriresti lavorando su progetti AngularJS sono le direttive. Una direttiva è un marker su un elemento DOM per informare AngularJS che deve allegare un comportamento specifico al singolo elemento. La direttiva può dire ad Angular di eseguire varie attività come trasformare l'elemento DOM e i suoi figli, sostituendolo con un elemento DOM diverso. La maggior parte delle potenti direttive iniziano con "ng-" dove "ng" sta per Angular.

Ecco le diverse direttive che abbiamo usato nel nostro codice sopra, insieme alle loro applicazioni:

ng-app

Questa direttiva esegue il bootstrap dell'app e ne definisce l'ambito. È una direttiva essenziale perché puoi avere più app in AngularJS e indica al programma i punti di inizio e fine di ciascuna app.

ng-controller

Questa direttiva definisce quale controller avrebbe il potere della vista dell'utente. A questo proposito abbiamo indicato driverController, che fornirà l'elenco dei driver (driverList) nella nostra app.

ng-ripetere

Questa direttiva è una delle più comunemente utilizzate dagli sviluppatori Angular. Definisce l'ambito del modello durante il ciclo delle raccolte.

Angular ha molte direttive e, man mano che lavorerai su più progetti AngularJS per principianti, scoprirai più applicazioni per loro. Ecco perché consigliamo di lavorare su progetti diversi mentre impari una particolare abilità.

I controllori

Avere la vista sarebbe inutile a meno che non aggiungiamo un controller. Quindi, aggiungeremo il driverController qui:

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

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

$ ambito.lista driver = [

{

Autista: {

datoNome: 'Sebastian',

nome di famiglia: 'Vettel'

punti: 322,

nazionalità: “tedesca”,

Costruttori: [

{nome: "Red Bull"}

]

{

Autista: {

datoNome: 'Fernando',

nome di famiglia: 'Alonso'

punti: 207,

nazionalità: “spagnola”,

Costruttori: [

{nome: "Ferrari"}

]

}

];

});

Una variabile unica che potresti aver notato è $scope. Stiamo passando questa variabile come parametro al controller in quanto collegherebbe il controller alle viste. $scope contiene tutti i dati da utilizzare nel modello e tutti i dati aggiunti ad esso saranno accessibili nelle viste.

Per ora aggiungeremo un array di dati statici e lo sostituiremo in seguito man mano che avanzeremo nel nostro progetto.

Per prima cosa aggiungiamo il controller a app.js, che dovrebbe assomigliare a questo:

angular.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

Questa piccola riga di codice ha inizializzato la nostra app e registrato i moduli da cui dipende la nostra app. Ora dobbiamo aggiungere tutte queste informazioni al nostro file index.html:

<!DOCTYPE html>

<html>

<testa>

<title>Alimentatore F-1</title>

</testa>

<testa>

<tr><th colspan="4″>Classifiche del Campionato Piloti</th></tr>

</thead>

<corpo>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</tabella>

</corpo>

</html>

A questo punto, puoi avviare la tua app. Tuttavia, tieni presente che dovrai eseguire il debug dell'app. Un passaggio cruciale per imparare a eseguire il progetto AngularJS è il debug di un'app.

Carica dati dal server

Ora aggiungeremo la funzionalità di recupero dei dati in tempo reale da un server RESTful nella nostra app. Per comunicare con i server HTTP, AngularjS ha due servizi, $http e $resource. Nel nostro codice useremo $http in quanto offre un'astrazione di alto livello. Creeremo un servizio personalizzato per astrarre le nostre chiamate API del server. Recupererà i dati e sarà un wrapper attorno a $http. Quindi, aggiungeremo il seguente codice al nostro file services.js:

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

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

var ergastAPI = {};

ergastAPI.getDrivers = funzione() {

restituisce $http({

metodo: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

restituire ergastAPI;

});

Per prima cosa abbiamo creato un nuovo modulo chiamato F1FeederApp.services e aggiunto un servizio ergastAPIservice. Nota che abbiamo passato $http come parametro al servizio. Diremo anche ad Angular di aggiungere il nostro modulo nell'app. Per fare tutto ciò, dobbiamo sostituire il codice in app.js con il seguente:

angular.module('F1FeederApp', [

'F1FeederApp.controllers',

'F1FeederApp.services'

]);

Dovremo modificare leggermente controller.js e aggiungere ergastAPIservice sotto forma di dipendenza, quindi questo passaggio terminerà:

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

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

$ambito.nomeFiltro = nullo;

$scopo.lista driver = [];

ergastAPIservice.getDrivers().success(funzione (risposta) {

//Digita nella risposta per ottenere i dati rilevanti

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

});

Per verificare se il codice funziona o meno, ricarica l'applicazione. Noterai che non abbiamo modificato il modello ma abbiamo incluso solo la variabile nameFilter. Nella prossima sezione, useremo quella variabile:

Applica filtri

Finora, abbiamo aggiunto un controller funzionale alla nostra app. Ora aggiungeremo più funzionalità aggiungendo una barra di input per la ricerca di testo. Puoi includere il seguente codice nel tuo index.html sotto il tag <body>:

Stiamo usando la direttiva "ng-model" qui. Associa il campo di testo alla variabile "$ scope.nameFilter". La direttiva garantisce che il nostro valore variabile rimanga aggiornato in base al valore di input. Diciamo a "ng-repeat" che deve filtrare l'array "driversList" in base al valore presente in "nameFilter" prima che emetta i dati:

Stiamo eseguendo due diverse associazioni di dati qui. Innanzitutto, ogni volta che immetti un valore nel campo di ricerca, Angular assicurerà che la variabile $ scope.nameFilter venga aggiornata di conseguenza. In secondo luogo, non appena nameFilter aggiorna ng-repeat, la seconda direttiva allegata ottiene un nuovo valore e un aggiornamento.

Supponiamo di voler filtrare solo utilizzando Driver.familyName e Driver.givenName. Dovremo aggiungere driversController sotto $scope.driversList = [] in questo modo:

$ scope.searchFilter = funzione (driver) {

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

ritorna !$scope.nameFilter || keyword.test(driver.Driver.givenName) || parola chiave.test(driver.Driver.familyName);

};

Per finalizzare questo processo, dobbiamo solo aggiornare la riga con la direttiva ng-repeat:

Puoi ricaricare l'app per vedere se il codice funziona o meno. La nostra app ora ha una funzione di ricerca. Successivamente, aggiungeremo percorsi.

Aggiunta di percorsi

Dobbiamo creare una pagina che mostri i dettagli dei nostri driver. La pagina dovrebbe consentire a un utente di fare clic su un conducente e visualizzare le informazioni sulla sua carriera. Inizieremo aggiungendo il servizio $routeProvider nel file app.js. Ti aiuterà a gestire correttamente i diversi percorsi di applicazione.

Ora aggiungeremo un percorso per le informazioni sul pilota e un altro per il tabellone segnapunti del campionato. Ora, il nostro file app.js si presenta così:

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controllers',

'ngRoute'

]).

config(['$provider di percorsi', funzione($provider di percorsi) {

$ provider di percorsi.

when(“/drivers”, {templateUrl: “partials/drivers.html”, controller: “driversController”}).

when(“/drivers/:id”, {templateUrl: “partials/driver.html”, controller: “driverController”}).

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

}]);

Dopo aver aggiunto questo codice, quando un utente passa a https://domain/#drivers, caricherà il driverController e individuerà la vista parziale. Se hai seguito questo tutorial finora, devi aver notato una cosa. Non abbiamo aggiunto le viste parziali! Quindi il nostro prossimo passo sarebbe aggiungere lo stesso alla nostra applicazione:

Aggiunta di viste parziali

Una grande caratteristica di AngularJS è che ti consente di associare percorsi diversi a varie viste e controller. Tuttavia, affinché AngularJS esegua questa azione, dovrebbe sapere dove può eseguire il rendering di quelle viste parziali.

Quindi stiamo usando la direttiva ng-view e la aggiungiamo al nostro file index.html:

<!DOCTYPE html>

<html>

<testa>

<title>Alimentatore F-1</title>

</testa>

<ng-view></ng-view>

</corpo>

</html>

A causa di questa implementazione, quando navighiamo attraverso un percorso dell'app, Angular caricherà la vista pertinente e la renderà. Determina la posizione per il rendering tramite il tag <ng-view>. Ora, dobbiamo solo creare un file chiamato parzialis/drivers.html e inserire lì il codice HTML della tabella del campionato. Già che ci siamo, collegheremo anche il nostro percorso informativo del conducente con i nomi del conducente:

<testa>

<tr><th colspan="4″>Classifiche del Campionato Piloti</th></tr>

</thead>

<corpo>

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

<td>

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

</a>

</td>

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

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

</tr>

</tbody>

</tabella>

Stiamo raggiungendo le fasi finali dello sviluppo. La nostra pagina delle informazioni sul conducente ha bisogno di dati, quindi è quello che aggiungeremo ad essa. Per farlo, dovremmo scrivere il seguente codice in services.js:

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

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

var ergastAPI = {};

ergastAPI.getDrivers = funzione() {

restituisce $http({

metodo: 'JSONP',

URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = funzione(id) {

restituisce $http({

metodo: 'JSONP',

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

});

}

ergastAPI.getDriverRaces = funzione(id) {

restituisce $http({

metodo: 'JSONP',

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

});

}

restituire ergastAPI;

});

Ora modificheremo controllers.js. Miriamo a collegare l'ID di ogni conducente al servizio, quindi il nostro recupero delle informazioni rimane specifico per il conducente richiesto.

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

/* Controller driver */

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

$ambito.nomeFiltro = nullo;

$scopo.lista driver = [];

$ scope.searchFilter = funzione (driver) {

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

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

};

ergastAPIservice.getDrivers().success(funzione (risposta) {

//Analizzando la risposta per ottenere i dati rilevanti

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

});

}).

/* Controller del driver */

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

$ scope.id = $ routeParams.id;

$ ambito. gare = [];

$scopo.driver = nullo;

ergastAPIservice.getDriverDetails($ scope.id).success(funzione (risposta) {

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

});

ergastAPIservice.getDriverRaces($scope.id).success(funzione (risposta) {

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

});

Nota che abbiamo aggiunto il servizio $routePrams nel controller del driver. Ti permetterebbe di accedere ai parametri URL ed è un passaggio cruciale.

Ora creeremo un file chiamato partials/driver.html poiché abbiamo aggiunto tutti i dati necessari e dobbiamo solo affrontare il resto della vista parziale. Abbiamo usato la direttiva ng-show nel codice seguente. La direttiva assicurerà che la nostra app mostri l'elemento HTML necessario solo quando l'espressione è vera. Ciò significa che anche se la condizione è nulla, l'app non mostrerà l'elemento HTML. Ecco il codice:

</div>

Paese: {{driver.Driver.nationality}} <br/>

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

Nascita: {{driver.Driver.dateOfBirth}}<br/>

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

</div>

</nav>

<testa>

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

</thead>

<corpo>

<tr>

<td>Giro</td> <td>Gran Premio</td> <td>Team</td> <td>Griglia</td> <td>Gara</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>{{race.Results[0].position}}</td>

</tr>

</tbody>

</tabella>

</div>

</sezione>

Passi finali (CSS)

A questo punto, hai un'app di alimentazione sportiva correttamente funzionante. Come abbiamo discusso in precedenza, i CSS si concentrano sul rendere attraente la pagina web. Quindi, in questo passaggio, hai l'indipendenza per aggiungere CSS alla tua app e migliorarne l'aspetto. Puoi cambiare i caratteri, cambiare lo sfondo, aggiungere immagini diverse o animare alcune transizioni per migliorare l'interfaccia utente dell'applicazione. Le sezioni tecniche del nostro progetto sono complete.

Checkout: stipendio per sviluppatori Full Stack in India

Ulteriori informazioni sullo sviluppo

Ora hai creato un'app AngularJS! Ci auguriamo che questo tutorial ti sia piaciuto. Ricordati che

Angular è un framework piuttosto robusto con molte funzionalità. Quelli in questo articolo erano molto pochi rispetto alle cose di cui è capace Angular. Man mano che lavorerai su progetti AngularJS più avanzati, scoprirai più delle sue potenti capacità.

Se vuoi saperne di più sullo sviluppo full-stack, ti consigliamo di visitare il nostro blog. Troverai numerose risorse sui vari aspetti di questo campo. Eccone alcuni per ulteriori letture:

Le 10 migliori abilità per diventare uno sviluppatore full-stack
Perché diventare uno sviluppatore full-stack?
Come diventare una serie di sviluppatori full-stack

D'altra parte, puoi anche seguire un corso di sviluppo completo e imparare da esperti del settore attraverso progetti, video e incarichi.

Se sei interessato a saperne di più sullo sviluppo full-stack, dai un'occhiata al Diploma PG di upGrad & IIIT-B in Sviluppo software full-stack, progettato per i professionisti che lavorano e offre oltre 500 ore di formazione rigorosa, oltre 9 progetti e incarichi , status di Alumni IIIT-B, progetti pratici pratici e assistenza sul lavoro con le migliori aziende.

Atterra sul lavoro dei tuoi sogni

UPGRAD E DIPLOMA PG DI IIIT-BANGALORE IN SVILUPPO SOFTWARE

Iscriviti oggi