Interface utilisateur mobile angulaire - Présentation

Mobile Angular UI est un framework open-source pour le développement d'applications mobiles hybrides. L'interface utilisateur mobile angulaire utilise Twitter Bootstrap et AngularJS qui permet de créer des applications mobiles et de bureau hybrides HTML5 attrayantes.

Caractéristiques de l'interface utilisateur angulaire mobile

Mobile Angular UI a quelques composants sympas qui sont listés ci-dessous -

Navbars- Navbars utilise la partie supérieure et inférieure de l'écran de l'appareil. Nous pouvons utiliser la barre de navigation supérieure pour afficher les éléments de menu ou la section d'en-tête. La barre de navigation inférieure peut être utilisée pour afficher la section de pied de page.

Scrollable Areas- Cette fonctionnalité rend l'application plus conviviale. Ajout de classes css. scrollable-header / .scrollable-footer , ajoutera un en-tête / pied de page fixe à la zone de défilement souhaitée. Vous n'avez pas à vous soucier de la hauteur et du positionnement, le css s'occupe de tout.

Accordion- Les accordéons sont principalement utilisés lorsque le contenu est censé être dans une vue de type section et qu'une section est visible à la fois. Vous pouvez masquer et ouvrir la section suivante pour en afficher le contenu.

Dropdowns - Travailler avec des listes déroulantes, ajouter le menu déroulant css au conteneur sert le but.

Modals and Overlays- Modals et Overlays afficheront une fenêtre de type pop-up sur votre écran. Les superpositions diffèrent du mode modal uniquement par la manière dont le conteneur est affiché.

Sections- Les sections sont des conteneurs qui sont affichés à l'intérieur du corps. Vous pouvez modifier la disposition de votre affichage dans l'appareil avec des classes disponibles avec des sections. Vous pouvez utiliser les classes comme.section-default, .section-primary, .section-success, .section-info, .section-warning or .section-danger pour changer la mise en page.

Sidebars- Les barres latérales occupent les côtés gauche et droit de l'écran. Ils sont toujours masqués et activés lorsque l'élément connecté au côté gauche ou au côté droit est cliqué. C'est la meilleure façon d'utiliser l'espace sur l'écran.

Toggle Switch - L'interface utilisateur mobile angulaire propose des éléments de commutation à ui-switchdirectif. La directive ui-switch effectue une bascule lorsqu'elle est appliquée à une valeur booléenne ngModel.

Tabs- Les onglets sont des composants utiles disponibles dans l'interface utilisateur mobile angulaire. Les onglets sont disponibles dans le même wrapper et affichent votre contenu dans un volet séparé, tout comme la façon dont les onglets sont ouverts dans le navigateur. Un seul onglet est affiché à la fois pour l'utilisateur.

Avantages de l'interface utilisateur angulaire mobile

Voici les avantages de l'interface utilisateur angulaire mobile -

  • Mobile Angular UI fournit des composants mobiles d'interface utilisateur sympas tels que la barre de navigation, les barres latérales, les modaux et les superpositions, les commutateurs, etc.

  • Facile à créer des applications hybrides car il utilise AngularJS et Twitter Bootstrap qui est très facile à apprendre et à démarrer. En outre, c'est un framework open source gratuit.

  • Il est possible d'utiliser des composants ioniques avec des composants Mobile Angular UI.

Inconvénients de l'interface utilisateur angulaire mobile

Voici les inconvénients de l'interface utilisateur mobile angulaire -

  • Étant un framework JavaScript uniquement, les applications écrites en AngularJS ne sont pas sûres. L'authentification et l'autorisation côté serveur sont indispensables pour garantir la sécurité d'une application.

  • À mesure que les directives AngularJS sont ajoutées au balisage HTML, le débogage devient un peu difficile lorsque l'erreur survient.