Interface utilisateur mobile angulaire - Dispositions

Dans ce chapitre, nous allons comprendre l'affichage de la disposition de base disponible dans Mobile Angular UI.

La structure de la mise en page de base est la suivante

<body ng-app="myFirstApp" ng-controller="MainController">
      
   <!-- Sidebars -->
   <div class="sidebar sidebar-left"><!-- ... --></div>
   <div class="sidebar sidebar-right"><!-- ... --></div>
   
   <div class="app">
      <div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
      <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
      
      <!-- App body -->
      <div class='app-body'>
         <div class='app-content'>
            <ng-view></ng-view>
         </div>
      </div>
   </div><!-- ~ .app -->
      
   <!-- Modals and Overlays -->
   <div ui-yield-to="modals"></div>

</body>

L'écran de votre mobile ou de votre bureau est divisé en sections.

Barre latérale

La section du corps commence par les conteneurs div de la barre latérale, un pour le côté gauche et le suivant pour le côté droit -

<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>

Une barre latérale aide bien à utiliser efficacement l'espace, spécialement sur mobile, ce qui rend l'interface utilisateur très interactive et soignée. Par barre latérale, les fenêtres s'ouvrent du côté gauche et du côté droit.

Navbars

La section suivante concerne les barres de navigation. Voici les conteneurs div pour les barres de navigation à afficher -

<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>

Ils sont affichés en haut et en bas.

Section du corps de l'application

Cette section est le principal endroit où votre contenu est affiché pour que l'utilisateur puisse interagir ou lire.

<div class='app-body'>
   <div class='app-content'>
      <ng-view></ng-view>
   </div>
</div>

Il utilise <ng-view></ng-view>directive qui sera remplacée par le contenu réel en fonction de l'interaction de l'utilisateur sur l'interface utilisateur. AngularJS NgRoute est utilisé ici pour remplacer les vues.

Modaux et superpositions

La dernière section est la section des modaux et des superpositions. Le conteneur div pour afficher les modaux et les superpositions est le suivant:

<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>