build single page application using angularjs
Créez un SPA d'application à page unique à l'aide d'AngularJS:
Tout ce que nous devons savoir sur AngularJS a été expliqué dans notre tutoriel précédent. Dans ce didacticiel, nous en apprendrons davantage sur le développement d'une application d'une seule page à l'aide d'AngularJS.
Connaissez-vous Netflix? Avez-vous déjà visité son site Web?
Si votre réponse est «Oui», vous savez à quoi ressemble une application d’une seule page! Découvrez notre Guide complet d'AngularJS pour avoir une connaissance claire d'AngularJS.
Laissez-moi élaborer!
Netflix utilise AngularJS dans son framework côté client pour enrichir les fonctionnalités utilisateur dans leurs applications Web.
Ils ont rendu leur interface utilisateur très simple en en faisant un SPA (Application sur une seule page). Cela signifie que la navigation dans Netflix est effectuée sans actualiser toute la page.
Ce que vous apprendrez:
- Avantages des applications à page unique
- Pourquoi développer un SPA en utilisant AngularJS?
- Comment développer une application à page unique à l'aide d'AngularJS?
- Conclusion
- lecture recommandée
Avantages des applications à page unique
Voici quelques avantages des applications à page unique.
- Expérience utilisateur améliorée.
- Les pages Web s'actualisent plus rapidement car moins de bande passante est utilisée.
- Le déploiement de l'application - index.html, bundle CSS et bundle javascript - en production devient plus facile.
- Le fractionnement du code peut être effectué pour diviser les lots en plusieurs parties.
Pourquoi développer un SPA en utilisant AngularJS?
De nos jours, de nombreuses applications javascript sont disponibles sur le marché comme ember.js, backbone.js, etc. Mais encore, beaucoup d'applications Web intègrent AngularJS dans leur développement pour créer des SPA.
Voici quelques raisons expliquant pourquoi AngularJS est un gagnant clair:
# 1) Ne dépendez pas des dépendances
Contrairement à AngularJS, backbone.js a des dépendances sur underscore.js et jQuery. Tandis que, ember JS a des dépendances sur les guidons et jQuery.
comment ouvrir un fichier dat dans windows
# 2) Routage
La navigation entre les pages Web créées à l'aide d'AngularJS est très simple par rapport à celles créées à l'aide d'autres frameworks javascript. Les directives utilisées dans AngularJS sont légères, donc les métriques de performance d'AngularJS sont appréciables.
# 3) Test
Une fois l'application créée à l'aide d'AngularJS, des tests automatisés peuvent être effectués pour l'assurance qualité à l'aide de sélénium. C'est l'une des fonctionnalités impressionnantes des applications créées à l'aide du développement AngularJS.
[source de l'image edureka.co]
# 4) Liaison de données
AngularJS prend en charge la liaison de données bidirectionnelle, c'est-à-dire que chaque fois que le modèle est mis à jour, la vue est également mise à jour car AngularJS suit l'architecture MVC.
Par conséquent, les données peuvent être consultées par l'utilisateur, en fonction de ses préférences.
# 5) Prise en charge du navigateur
AngularJS est pris en charge dans la plupart des navigateurs, y compris IE version 9 et supérieure. Il peut également s'adapter au travail sur les mobiles, les tablettes et les ordinateurs portables.
# 6) Agilité
AngularJS prend en charge l'agilité, ce qui signifie qu'il peut répondre aux nouvelles demandes des entreprises au fur et à mesure qu'elles se retrouvent dans des environnements de travail compétitifs. Les contrôleurs peuvent être implémentés dans l'architecture MVC pour répondre à ces demandes.
Il existe environ 30000 modules dans AngularJS, qui sont facilement disponibles pour le développement rapide d'applications. Lorsqu'un développeur souhaite personnaliser une application existante, il peut utiliser les modules déjà disponibles et modifier le code au lieu de créer l'ensemble de l'application à partir de zéro.
De plus, les contributeurs et experts d'AngularJS sont nombreux, vous obtiendrez donc des réponses rapides à toutes les questions que vous postez sur les forums de discussion.
Comment développer une application à page unique à l'aide d'AngularJS?
Vous trouverez ci-dessous les différentes étapes impliquées dans le développement d'un SPA à l'aide d'AngularJS.
Étape 1: Créer un module
Nous savons tous que AngularJS suit l'architecture MVC. Par conséquent, chaque application AngularJS contient un module comprenant des contrôleurs, des services, etc.
var app = angular.module('myApp', []);
Étape 2: définir un contrôleur simple
app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });
Étape 3: inclure le script AngularJS dans le code HTML
Spécifiez le module (créé à l'étape 1) dans ng-app l'attribut et le contrôleur (défini à l'étape 2) dans le ng-controller attribut.
{{message}}
First Second Third
(Quand Angular détecte les modèles définis par les directives ng-template, il chargera son contenu dans le cache de modèles et n'exécutera pas de requête Ajax pour obtenir leur contenu.)
Une fois le HTML exécuté sur localhost, la page suivante s'affiche.
Notez que les hyperliens Premier Deuxième Troisième sur la page se trouvent des routeurs et lorsque vous cliquez dessus, la navigation vers les pages Web correspondantes s'effectue, sans actualisation.
C'est tout! J'espère que vous pourriez créer un SPA simple comme démontré dans ce blog. Une fois que vous obtenez la sortie avec succès, vous pouvez essayer des SPA complexes sur les mêmes lignes.
Conclusion
Les applications à page unique sont très populaires de nos jours, des marques comme Netflix les optant pour elles.
Si vous développez des SPA, AngularJS est le choix évident. Cependant, la nouvelle version d'AngularJS, c'est-à-dire Angular offre plus de fonctionnalités. Sinon, il existe diverses technologies telles que le développement d'applications Node JS, etc.
Restez à l'écoute de notre prochain tutoriel pour découvrir la mise à niveau de la version angulaire!
Tutoriel PREV | Tutoriel SUIVANT
lecture recommandée
- Différence entre les versions angulaires: Angular Vs AngularJS
- Directive AngularJS avec notre premier exemple AngularJS
- Tutoriels Eclipse détaillés pour les débutants
- Didacticiel AWS CodeBuild: extraction de code à partir de Maven Build
- Tutoriel AngularJS pour les débutants absolus (avec guide d'installation)
- Tutoriel AWS Elastic Beanstalk pour le déploiement d'une application Web .NET
- Comment tester la file d'attente de messagerie d'application: didacticiel IBM WebSphere MQ Intro
- Utilisation de Maven Build Automation Tool et Maven Project Setup for Selenium - Selenium Tutorial # 24