मोबाइल कोणीय यूआई - लेआउट
इस अध्याय में, हम मोबाइल कोणीय यूआई में उपलब्ध बुनियादी लेआउट डिस्प्ले को समझेंगे।
बुनियादी लेआउट की संरचना इस प्रकार है
<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>आपके मोबाइल या डेस्कटॉप की स्क्रीन वर्गों में विभाजित है।
साइडबार
बॉडी सेक्शन की शुरुआत साइडबार डिव कंटेनर से होती है, एक लेफ्ट साइड के लिए और दूसरा राइट साइड के लिए -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>एक साइडबार विशेष रूप से मोबाइल पर विशेष रूप से अंतरिक्ष का उपयोग करने में अच्छी तरह से मदद करता है और इससे यूआई बहुत इंटरैक्टिव और साफ-सुथरा हो जाता है। साइडबार के द्वारा, खिड़कियां बाईं ओर और दाईं ओर से खुलती हैं।
navbars
अगला खंड नावबार है। नवबारों को दिखाए जाने वाले डिव कंटेनर निम्नलिखित हैं -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></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>