”;
In this chapter, we will understand the basic layout display available in Mobile Angular UI.
The structure of basic layout is as follows
<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>
The screen of your mobile or desktop is divided into sections.
Sidebar
The body section starts with sidebar div containers, one for left side and the next one for the right side −
<!-- Sidebars --> <div class="sidebar sidebar-left"><!-- ... --></div> <div class="sidebar sidebar-right"><!-- ... --></div>
A sidebar helps well to utilize the space efficiently specially on mobile and that makes the UI very interactive and neat. By sidebar, the windows open from the left side and right side.
Navbars
The next section is the navbars. Following are the div containers for navbars to be shown −
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div> <div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>
They are shown at the top and at the bottom.
App Body Section
This section is the main place where your contents are displayed for the user to interact or read.
<div class=''app-body''>
<div class=''app-content''>
<ng-view></ng-view>
</div>
</div>
It makes use of <ng-view></ng-view> directive that will get replaced with actual contents based on user interaction on the UI. AngularJS NgRoute is used here to replace the views.
Modals and Overlays
The last section is the modals and overlays section. The div container to show modals and overlays are as follows −
<!-- Modals and Overlays --> <div ui-yield-to="modals"></div>
”;