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


Frequently Asked Questions

+
Ans: Mobile Angular UI - My First App view more..
+
Ans: Mobile Angular UI - Project Setup view more..
+
Ans: Mobile Angular UI - Installation view more..
+
Ans: Mobile Angular UI - Layouts view more..
+
Ans: Mobile Angular UI - Components view more..
+
Ans: Mobile Angular UI - Dropdowns view more..
+
Ans: Mobile Angular UI - Accordions view more..
+
Ans: Mobile Angular UI - Tabs view more..
+
Ans: Mobile Angular UI - Drag and Drop view more..
+
Ans: Mobile Angular UI - Scrollable Areas view more..
+
Ans: Mobile Angular UI - Forms view more..
+
Ans: Mobile Angular UI - Swipe Gestures view more..
+
Ans: Mobile Angular UI - Toggle Switch view more..
+
Ans: Mobile Angular UI - Sections view more..
+
Ans: Mobile Angular UI - Core Details view more..
+
Ans: Mobile Angular UI - Touch Events view more..
+
Ans: Mobile Angular UI - PhoneGap and Cordova view more..
+
Ans: Mobile Angular UI - Creating APK File view more..




Rating - NAN/5
466 views

Advertisements