Mobilny interfejs użytkownika Angular - układy
W tym rozdziale poznamy podstawowy układ wyświetlania dostępny w interfejsie Mobile Angular.
Struktura podstawowego układu jest następująca
<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>Ekran twojego telefonu komórkowego lub komputera jest podzielony na sekcje.
Pasek boczny
Sekcja ciała zaczyna się od kontenerów div z paskiem bocznym, jeden po lewej stronie, a drugi po prawej stronie -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Pasek boczny pomaga efektywnie wykorzystać przestrzeń, szczególnie na urządzeniach mobilnych, dzięki czemu interfejs użytkownika jest bardzo interaktywny i schludny. Przy pasku bocznym okna otwierają się z lewej i prawej strony.
Paski nawigacyjne
Następna sekcja to navbary. Poniżej znajdują się kontenery DIV dla paska nawigacyjnego, które mają być pokazane -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Są pokazane na górze i na dole.
Sekcja treści aplikacji
Ta sekcja jest głównym miejscem, w którym Twoje treści są wyświetlane, aby użytkownik mógł się z nimi zapoznać lub przeczytać.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Wykorzystuje <ng-view></ng-view>dyrektywy, która zostanie zastąpiona rzeczywistą treścią na podstawie interakcji użytkownika z interfejsem użytkownika. Do zamiany widoków służy tutaj AngularJS NgRoute.
Modały i nakładki
Ostatnia sekcja to sekcja modali i nakładek. Kontener DIV do wyświetlania modali i nakładek jest następujący -
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>