Interfaz de usuario angular móvil: diseños

En este capítulo, entenderemos la visualización de diseño básica disponible en la interfaz de usuario angular móvil.

La estructura del diseño básico es la siguiente

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

La pantalla de tu móvil o escritorio está dividida en secciones.

Barra lateral

La sección del cuerpo comienza con contenedores div de la barra lateral, uno para el lado izquierdo y el siguiente para el lado derecho -

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

Una barra lateral ayuda a utilizar el espacio de manera eficiente, especialmente en dispositivos móviles, y eso hace que la interfaz de usuario sea muy interactiva y ordenada. Por barra lateral, las ventanas se abren desde el lado izquierdo y desde el lado derecho.

Navbars

La siguiente sección son las barras de navegación. A continuación se muestran los contenedores div para que se muestren las barras de navegación:

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

Se muestran en la parte superior e inferior.

Sección del cuerpo de la aplicación

Esta sección es el lugar principal donde se muestran sus contenidos para que el usuario interactúe o lea.

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

Hace uso de <ng-view></ng-view>directiva que será reemplazada con contenido real basado en la interacción del usuario en la interfaz de usuario. AngularJS NgRoute se usa aquí para reemplazar las vistas.

Modales y superposiciones

La última sección es la sección de modales y superposiciones. El contenedor div para mostrar modales y superposiciones es el siguiente:

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