Interfaccia utente angolare mobile - Layout

In questo capitolo, comprenderemo la visualizzazione del layout di base disponibile nell'interfaccia utente di Mobile Angular.

La struttura del layout di base è la seguente

<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>

Lo schermo del tuo cellulare o desktop è diviso in sezioni.

Sidebar

La sezione del corpo inizia con i contenitori div della barra laterale, uno per il lato sinistro e il successivo per il lato destro -

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

Una barra laterale aiuta a utilizzare lo spazio in modo efficiente specialmente sui dispositivi mobili e ciò rende l'interfaccia utente molto interattiva e ordinata. Dalla barra laterale, le finestre si aprono dal lato sinistro e dal lato destro.

Navbar

La sezione successiva sono le navbar. Di seguito sono riportati i contenitori div per le barre di navigazione da mostrare:

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

Sono mostrati in alto e in basso.

Sezione corpo app

Questa sezione è il luogo principale in cui i tuoi contenuti vengono visualizzati per consentire all'utente di interagire o leggere.

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

Fa uso di <ng-view></ng-view>direttiva che verrà sostituita con i contenuti effettivi in base all'interazione dell'utente sull'interfaccia utente. AngularJS NgRoute viene utilizzato qui per sostituire le viste.

Modali e sovrapposizioni

L'ultima sezione è la sezione modali e sovrapposizioni. Il contenitore div per mostrare modali e sovrapposizioni è il seguente:

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