移动 Angular UI - 布局

在本章中，我们将了解 Mobile Angular UI 中可用的基本布局显示。

基本布局结构如下

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

您的移动设备或桌面设备的屏幕分为多个部分。

侧边栏

主体部分从侧边栏 div 容器开始，一个用于左侧，下一个用于右侧 -

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

侧边栏有助于有效地利用空间，特别是在移动设备上，这使得用户界面非常具有交互性和简洁性。通过侧边栏，窗口从左侧和右侧打开。

导航栏

下一部分是导航栏。以下是要显示的导航栏的 div 容器 -

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

它们显示在顶部和底部。

应用程序主体部分

此部分是显示内容以供用户交互或阅读的主要位置。

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

它使用<ng-view></ng-view>指令，该指令将根据 UI 上的用户交互替换为实际内容。这里使用 AngularJS NgRoute 来替换视图。

模态和叠加

最后一部分是模态和叠加部分。显示模态和叠加层的 div 容器如下 -

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