Mobile Angular UI Tutorial
Selected Reading
- Mobile Angular UI - Discussion
- Mobile Angular UI - Useful Resources
- Mobile Angular UI - Quick Guide
- Mobile Angular UI - Examples
- Mobile Angular UI - APP Development
- Mobile Angular UI - Creating APK File
- Mobile Angular UI - PhoneGap & Cordova
- Mobile Angular UI - Touch Events
- Mobile Angular UI - Core Details
- Mobile Angular UI - Sections
- Mobile Angular UI - Toggle Switch
- Mobile Angular UI - Swipe Gestures
- Mobile Angular UI - Forms
- Mobile Angular UI - Scrollable Areas
- Mobile Angular UI - Drag and Drop
- Mobile Angular UI - Tabs
- Mobile Angular UI - Accordions
- Mobile Angular UI - Dropdowns
- Mobile Angular UI - Components
- Mobile Angular UI - Layouts
- Mobile Angular UI - My First App
- Mobile Angular UI - Project Setup
- Mobile Angular UI - Installation
- Mobile Angular UI - Overview
- Mobile Angular UI - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Mobile Angular UI - Layouts
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 -->
<span class="sidebar sidebar-left"><!-- ... --></span>
<span class="sidebar sidebar-right"><!-- ... --></span>
<span class="app">
<span class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></span>
<span class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></span>
<!-- App body -->
<span class= app-body >
<span class= app-content >
<ng-view></ng-view>
</span>
</span>
</span><!-- ~ .app -->
<!-- Modals and Overlays -->
<span ui-yield-to="modals"></span>
</body>
The screen of your mobile or desktop is spanided into sections.
Sidebar
The body section starts with sidebar span containers, one for left side and the next one for the right side −
<!-- Sidebars --> <span class="sidebar sidebar-left"><!-- ... --></span> <span class="sidebar sidebar-right"><!-- ... --></span>
A sidebar helps well to utipze 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 span containers for navbars to be shown −
<span class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></span> <span class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></span>
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.
<span class= app-body >
<span class= app-content >
<ng-view></ng-view>
</span>
</span>
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 span container to show modals and overlays are as follows −
<!-- Modals and Overlays --> <span ui-yield-to="modals"></span>Advertisements