Projet de démonstration AngularJS : comment créer une application avec AngularJS

Publié: 2020-09-10

Si vous apprenez le développement full-stack, vous devez avoir été confronté à la question « Comment exécuter le projet AngularJS ? » Ne vous inquiétez pas car, dans cet article, nous partagerons un tutoriel détaillé sur la création d'une application avec AngularJS.

Après avoir terminé ce projet, vous serez familiarisé avec les bases d'AngularJS, ses implémentations et disposerez d'une application fonctionnelle que vous pourrez montrer à vos amis. Vous pouvez mettre ce didacticiel en signet car nous avons répertorié les étapes des différentes étapes de développement avec le code.

Notez que vous devez comprendre le code avant de l'implémenter. C'est pourquoi nous vous déconseillons de copier et coller le code. Cependant, si vous savez comment fonctionne chaque ligne de code, vous pouvez librement la copier et la coller. Comprendre le fonctionnement du code vous assurerait d'apprendre plus efficacement.

Table des matières

Qu'est-ce qu'AngularJS ? Une brève introduction

Avant de discuter des projets AngularJS, parlons d'abord un peu de la technologie. AngularJS permet aux utilisateurs d'étendre le HTML pour les applications. Il s'agit d'un framework Web frontal basé sur JavaScript. HTML est à la traîne dans les vues dynamiques pour les applications Web, et Angular résout ce problème.

AngularJS a une communauté florissante d'utilisateurs et de développeurs où vous pouvez poser des questions et dissiper votre confusion. Angular fournit aux utilisateurs une liaison de données, des contrôleurs et de nombreux autres outils puissants pour améliorer le front-end d'une page Web. Vous découvrirez de nombreux concepts dans notre projet car nous les implémenterons dans notre tutoriel.

Prérequis aux projets AngularJS pour les débutants

Avant de commencer à travailler sur des projets AngularJS, vous devez être familiarisé avec les concepts suivants :

HTML

HTML signifie langage de balisage hypertexte. Il est responsable de la structure de toute page Web et constitue le premier élément constitutif du développement Web. Vous devez être familiarisé avec la syntaxe HTML, ses éléments et ses implémentations avant de commencer à travailler sur ce projet.

CSS

CSS signifie Cascading Style Sheets et est le langage principal pour ajouter des éléments visuels à une page Web. C'est tout aussi important que le HTML parce qu'il améliore l'apparence de la page Web et la rend plus accessible. Alors que HTML est nécessaire pour la première étape de notre projet AngularJS, vous devrez y ajouter CSS plus tard. C'est pourquoi vous devez le connaître avant de commencer à travailler sur des projets AngularJS pour débutants.

Javascript

AngularJS est basé sur JavaScript. Connaître la syntaxe, le code et ses implémentations JS simplifiera également de nombreux aspects techniques d'AngularJS pour vous. Assurez-vous de bien comprendre les bases de JS avant de commencer à travailler sur cette tâche.

Outre ces prérequis, vous devez également connaître les bases d'AngularJS. Ce projet suppose que vous avez une connaissance pratique de HTML, CSS, JS et AngularJS. Maintenant que nous avons éliminé cela, commençons.

Comment exécuter le projet AngularJS - Tutoriel

Dans ce didacticiel, nous allons créer une application de flux sportifs AngularJS. Une application de flux sportifs vous montre les statistiques d'un match ou d'un événement. Par exemple, vous pouvez créer une application qui affiche la carte de score des matchs ou un tableau de score de l'équipe IPL. Nous avons choisi de travailler sur une application de flux sportifs car elle ne nécessite pas beaucoup de développement back-end.

Le HTML

Nous allons d'abord commencer par créer le code HTML de notre application. Voici le modèle de notre code HTML.

<tête>

<tr><th colspan=”4″>Classement du championnat des pilotes</th></tr>

</thead>

<tbody>

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

<dt>

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

</td>

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

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

</tr>

</tbody>

</table>

</body>

Vous avez dû remarquer {{ et }}. Elles sont appelées expressions et vous permettent d'effectuer des tâches de calcul pour renvoyer la valeur requise. Par exemple, voici quelques expressions valides :

{{ 2 + 2 }}
{{ mon nom }}

Vous pouvez dire que ce sont des extraits de JavaScript. Cependant, il serait préférable que vous n'utilisiez pas d'expressions pour implémenter une logique de haut niveau. Pour ce faire, vous devez utiliser des directives. Les expressions ne conviennent qu'à une implémentation logique de bas niveau. La tâche principale des expressions est de lier les données d'application requises au HTML.

Apprendre : Salaire d'un développeur HTML en Inde : pour les débutants et les expérimentés

Les directives de notre code

L'un des concepts les plus importants que vous découvrirez en travaillant sur des projets AngularJS est celui des directives. Une directive est un marqueur sur un élément DOM pour informer AngularJS qu'il doit attacher un comportement spécifique à l'élément individuel. La directive peut dire à Angular d'effectuer diverses tâches telles que la transformation de l'élément DOM et de ses enfants, en le remplaçant par un élément DOM différent. La plupart des directives puissantes commencent par "ng-" où "ng" signifie Angular.

Voici les différentes directives que nous avons utilisées dans notre code ci-dessus, ainsi que leurs applications :

ng-app

Cette directive démarre l'application et définit sa portée. C'est une directive essentielle car vous pouvez avoir plusieurs applications dans AngularJS, et elle indique au programme les points de départ et d'arrivée de chaque application.

ng-contrôleur

Cette directive définit quel contrôleur aurait le pouvoir de la vue de l'utilisateur. Nous avons désigné le driversController à cet égard, qui fournira la liste des pilotes (driversList) dans notre application.

ng-répétition

Cette directive est l'une des plus utilisées par les développeurs Angular. Il définit la portée du modèle lors de la boucle dans les collections.

Angular a de nombreuses directives, et comme vous travaillerez sur plus de projets AngularJS pour les débutants, vous découvrirez plus d'applications pour eux. C'est pourquoi nous vous recommandons de travailler sur différents projets tout en apprenant une compétence particulière.

Les contrôleurs

Avoir la vue serait inutile à moins d'ajouter un contrôleur. Donc, nous allons ajouter le driversController ici :

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

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

$scope.driversList = [

{

Chauffeur: {

givenName: 'Sébastien',

Nom de famille : 'Vettel'

points : 322,

nationalité : "Allemande",

Constructeurs : [

{nom : "Red Bull"}

]

{

Chauffeur: {

givenName: 'Fernando',

Nom de famille : 'Alonso'

points : 207,

nationalité : « espagnole »,

Constructeurs : [

{nom : "Ferrari"}

]

}

] ;

});

Une variable unique que vous avez peut-être remarquée est $scope. Nous passons cette variable en tant que paramètre au contrôleur car cela lierait le contrôleur aux vues. $scope contient toutes les données à utiliser dans le modèle, et toutes les données que vous y ajoutez seront accessibles dans les vues.

Nous allons ajouter un tableau de données statiques pour le moment et le remplacer plus tard au fur et à mesure que nous progressons dans notre projet.

Commençons par ajouter le contrôleur au app.js, qui devrait ressembler à ceci :

angular.module('F1FeederApp', [

'F1FeederApp.contrôleurs'

]);

Cette petite ligne de code a initialisé notre application et enregistré les modules dont dépend notre application. Nous devons maintenant ajouter toutes ces informations à notre fichier index.html :

<!DOCTYPE html>

<html>

<tête>

<title>Chargeur F-1</title>

</head>

<tête>

<tr><th colspan=”4″>Classement du championnat des pilotes</th></tr>

</thead>

<tbody>

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

<dt>

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

</td>

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

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

</tr>

</tbody>

</table>

</body>

</html>

À ce stade, vous pouvez démarrer votre application. Cependant, gardez à l'esprit que vous devrez déboguer l'application. Une étape cruciale pour apprendre à exécuter le projet AngularJS consiste à déboguer une application.

Charger les données du serveur

Nous allons maintenant ajouter la fonctionnalité de récupération de données en direct à partir d'un serveur RESTful dans notre application. Pour communiquer avec les serveurs HTTP, AngularjS dispose de deux services, $http et $resource. Dans notre code, nous utiliserons $http car il offre une abstraction de haut niveau. Nous allons créer un service personnalisé pour résumer les appels de l'API de notre serveur. Il récupérera les données et sera un wrapper autour de $http. Nous allons donc ajouter le code suivant à notre fichier services.js :

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

usine('ergastAPIservice', fonction($http) {

var ergastAPI = {} ;

ergastAPI.getDrivers = fonction() {

renvoie $http({

méthode : 'JSONP',

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

});

}

renvoie ergastAPI ;

});

Nous avons d'abord créé un nouveau module appelé F1FeederApp.services et ajouté un service ergastAPIservice. Notez que nous avons passé $http en tant que paramètre au service. Nous dirons également à Angular d'ajouter notre module dans l'application. Pour faire tout cela, nous devons remplacer le code dans app.js par ce qui suit :

angular.module('F1FeederApp', [

'F1FeederApp.contrôleurs',

'F1FeederApp.services'

]);

Nous devrons modifier un peu controller.js et ajouter ergastAPIservice sous forme de dépendance, puis cette étape se terminera :

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

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

$scope.nameFilter = null;

$scope.driversList = [] ;

ergastAPIservice.getDrivers().success(fonction (réponse) {

// Creusez dans la réponse pour obtenir les données pertinentes

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

});

Pour vérifier si le code fonctionne ou non, rechargez votre application. Vous remarquerez que nous n'avons pas modifié le modèle, mais seulement inclus la variable nameFilter. Dans la section suivante, nous utiliserons cette variable :

Appliquer des filtres

Jusqu'à présent, nous avons ajouté un contrôleur fonctionnel à notre application. Nous allons maintenant lui ajouter plus de fonctionnalités en ajoutant une barre de saisie de recherche de texte. Vous pouvez inclure le code suivant dans votre index.html sous la balise <body> :

Nous utilisons ici la directive « ng-model ». Il liera le champ de texte à la variable "$scope.nameFilter". La directive garantit que notre valeur de variable reste mise à jour en fonction de la valeur d'entrée. Disons à "ng-repeat" qu'il doit filtrer le tableau "driversList" par la valeur présente dans le "nameFilter" avant de sortir les données :

Nous effectuons ici deux liaisons de données différentes. Tout d'abord, chaque fois que vous saisissez une valeur dans le champ de recherche, Angular s'assure que la variable $scope.nameFilter est mise à jour en conséquence. Deuxièmement, dès que nameFilter met à jour ng-repeat, la deuxième directive qui lui est attachée reçoit une nouvelle valeur et une mise à jour.

Supposons que nous voulions uniquement filtrer en utilisant Driver.familyName et Driver.givenName. Nous devrons ajouter driversController sous $scope.driversList = [] comme ceci :

$scope.searchFilter = fonction (pilote) {

var mot-clé = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || mot-clé.test(driver.Driver.givenName) || mot-clé.test(driver.Driver.familyName);

} ;

Pour finaliser ce processus, nous n'avons qu'à mettre à jour la ligne avec la directive ng-repeat :

Vous pouvez recharger l'application pour voir si le code fonctionne ou non. Notre application dispose désormais d'une fonction de recherche. Ensuite, nous allons ajouter des itinéraires.

Ajout d'itinéraires

Nous devons créer une page qui montre les détails de nos chauffeurs. La page devrait permettre à un utilisateur de cliquer sur un conducteur et de voir ses informations de carrière. Nous allons commencer par ajouter le service $routeProvider dans le fichier app.js. Cela vous aidera à gérer correctement les différentes routes d'application.

Nous allons maintenant ajouter un itinéraire pour les informations du pilote et un autre pour le tableau de bord du championnat. Maintenant, notre fichier app.js ressemble à ceci :

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.contrôleurs',

'ngRoute'

]).

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

$routeProvider.

quand ("/drivers", {templateUrl : "partials/drivers.html", contrôleur : "driversController"}).

quand ("/drivers/:id", {templateUrl : "partials/driver.html", contrôleur : "driverController"}).

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

}]);

Après avoir ajouté ce code, lorsqu'un utilisateur accède à https://domain/#drivers, il charge le driversController et localise la vue partielle. Si vous avez suivi ce tutoriel jusqu'à présent, vous avez dû remarquer une chose. Nous n'avons pas ajouté les vues partielles ! Donc, notre prochaine étape serait d'ajouter la même chose à notre application :

Ajout de vues partielles

Une grande fonctionnalité d'AngularJS est qu'il vous permet de lier différentes routes à différentes vues et contrôleurs. Cependant, pour qu'AngularJS effectue cette action, il doit savoir où il peut rendre ces vues partielles.

Nous utilisons donc la directive ng-view et l'ajoutons à notre fichier index.html :

<!DOCTYPE html>

<html>

<tête>

<title>Chargeur F-1</title>

</head>

<ng-view></ng-view>

</body>

</html>

En raison de cette implémentation, lorsque nous naviguons sur une route d'application, Angular charge la vue appropriée et la rend. Il déterminerait l'emplacement du rendu via la balise <ng-view>. Maintenant, nous n'avons plus qu'à créer un fichier appelé partials/drivers.html et y mettre le code HTML du tableau de championnat. Pendant que nous y sommes, nous allons également lier notre itinéraire d'information du conducteur avec les noms du conducteur :

<tête>

<tr><th colspan=”4″>Classement du championnat des pilotes</th></tr>

</thead>

<tbody>

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

<dt>

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

</a>

</td>

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

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

</tr>

</tbody>

</table>

Nous arrivons aux dernières étapes de développement. Notre page d'informations sur le conducteur a besoin de données, c'est donc ce que nous allons y ajouter. Pour ce faire, nous devrions écrire le code suivant dans services.js :

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

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

var ergastAPI = {} ;

ergastAPI.getDrivers = fonction() {

renvoie $http({

méthode : 'JSONP',

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

});

}

ergastAPI.getDriverDetails = fonction(id) {

renvoie $http({

méthode : 'JSONP',

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

});

}

ergastAPI.getDriverRaces = fonction (id) {

renvoie $http({

méthode : 'JSONP',

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

});

}

renvoie ergastAPI ;

});

Nous allons maintenant modifier controllers.js. Notre objectif est de connecter l'identifiant de chaque conducteur au service, de sorte que notre récupération d'informations reste spécifique au conducteur demandé.

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

/* Contrôleur de pilotes */

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

$scope.nameFilter = null;

$scope.driversList = [] ;

$scope.searchFilter = fonction (pilote) {

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

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

} ;

ergastAPIservice.getDrivers().success(fonction (réponse) {

//Creuser dans la réponse pour obtenir les données pertinentes

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

});

}).

/* Contrôleur de pilote */

contrôleur('driverController', fonction($scope, $routeParams, ergastAPIservice) {

$scope.id = $routeParams.id;

$scope.races = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(fonction (réponse) {

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

});

ergastAPIservice.getDriverRaces($scope.id).success(fonction (réponse) {

$scope.races = réponse.MRData.RaceTable.Races ;

});

Notez que nous avons ajouté le service $routePrams dans le contrôleur du pilote. Cela vous permettrait d'accéder aux paramètres d'URL et constitue une étape cruciale.

Nous allons maintenant créer un fichier appelé partials/driver.html car nous avons ajouté toutes les données nécessaires et n'avons plus qu'à nous occuper du reste de la vue partielle. Nous avons utilisé la directive ng-show dans le code ci-dessous. La directive garantira que notre application n'affiche que l'élément HTML nécessaire lorsque l'expression est vraie. Cela signifie que même si la condition est nulle, l'application n'affichera pas l'élément HTML. Voici le code :

</div>

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

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

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

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

</div>

</nav>

<tête>

<tr><th colspan=”5″>Résultats Formule 1 2013</th></tr>

</thead>

<tbody>

<tr>

<td>Tour</td> <td>Grand Prix</td> <td>Équipe</td> <td>Grille</td> <td>Course</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>

</table>

</div>

</section>

Étapes finales (CSS)

À présent, vous disposez d'une application d'alimentation sportive qui fonctionne correctement. Comme nous en avons déjà discuté, CSS se concentre sur l'attrait de la page Web. Ainsi, dans cette étape, vous avez l'indépendance d'ajouter du CSS à votre application et d'améliorer son apparence. Vous pouvez changer les polices, changer l'arrière-plan, ajouter différentes images ou animer certaines transitions pour améliorer l'interface utilisateur de l'application. Les sections techniques de notre projet sont terminées.

Paiement : salaire d'un développeur Full Stack en Inde

En savoir plus sur le développement

Vous avez maintenant créé une application AngularJS ! Nous espérons que vous avez apprécié ce tutoriel. Rappelez-vous que

Angular est un framework assez robuste avec de nombreuses fonctionnalités. Ceux de cet article étaient très peu nombreux par rapport aux choses dont Angular est capable. Au fur et à mesure que vous travaillerez sur des projets AngularJS plus avancés, vous découvrirez davantage de ses puissantes fonctionnalités.

Si vous souhaitez en savoir plus sur le développement full-stack, nous vous recommandons de vous rendre sur notre blog. Vous y trouverez de nombreuses ressources sur les différents aspects de ce domaine. En voici quelques-unes pour aller plus loin :

Top 10 des compétences pour devenir développeur Full-Stack
Pourquoi devenir développeur Full Stack ?
Comment devenir une série de développeurs Full-Stack

D'autre part, vous pouvez également suivre un cours de développement complet et apprendre des experts de l'industrie à travers des projets, des vidéos et des missions.

Si vous souhaitez en savoir plus sur le développement full-stack, consultez le diplôme PG upGrad & IIIT-B en développement logiciel full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets et affectations. , statut d'anciens élèves de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Décrochez le job de vos rêves

MISE À NIVEAU ET DIPLÔME PG DE L'IIIT-BANGALORE EN DÉVELOPPEMENT LOGICIEL

Inscrivez-vous aujourd'hui