Mobile Angular UI - Tata Letak
Pada bab ini, kita akan memahami tampilan layout dasar yang tersedia di Mobile Angular UI.
Struktur tata letak dasarnya adalah sebagai berikut
<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>Layar ponsel atau desktop Anda dibagi menjadi beberapa bagian.
Sidebar
Bagian badan dimulai dengan wadah div bilah sisi, satu untuk sisi kiri dan yang berikutnya untuk sisi kanan -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Bilah sisi membantu memanfaatkan ruang secara efisien khususnya di seluler dan itu membuat UI sangat interaktif dan rapi. Dengan sidebar, jendela terbuka dari sisi kiri dan kanan.
Navbar
Bagian selanjutnya adalah navbar. Berikut adalah wadah div untuk navbar yang akan ditampilkan -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Mereka ditampilkan di atas dan di bawah.
Bagian Badan Aplikasi
Bagian ini adalah tempat utama di mana konten Anda ditampilkan bagi pengguna untuk berinteraksi atau membaca.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Itu memanfaatkan <ng-view></ng-view>direktif yang akan diganti dengan konten aktual berdasarkan interaksi pengguna di UI. AngularJS NgRoute digunakan di sini untuk menggantikan tampilan.
Modal dan Overlay
Bagian terakhir adalah bagian modals dan overlay. Penampung div untuk menampilkan modals dan overlay adalah sebagai berikut -
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>