- Mobile Angular UI Tutorial
- Mobile Angular UI - Home
- Mobile Angular UI - Overview
- Mobile Angular UI - Installation
- Mobile Angular UI - Project Setup
- Mobile Angular UI - My First App
- Mobile Angular UI - Layouts
- Mobile Angular UI - Components
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Accordions
- Mobile Angular UI - Tabs
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Forms
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Sections
- Mobile Angular UI - Core Details
- Mobile Angular UI - Touch Events
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - APP Development
- Mobile Angular UI - Examples
- Mobile Angular UI Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Discussion
Mobile Angular UI - Layouts
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>
To Continue Learning Please Login
Login with Google