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>