Mobile 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"><!-- 顶部导航栏 --></div> <div class="navbar navbar-app navbar-absolute-bottom"><!-- 底部导航栏 --></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>
