Giao diện người dùng góc di động - Bố cục
Trong chương này, chúng ta sẽ hiểu về cách hiển thị bố cục cơ bản có sẵn trong Mobile Angular UI.
Cấu trúc của bố cục cơ bản như sau
<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>Màn hình điện thoại di động hoặc máy tính để bàn của bạn được chia thành nhiều phần.
Thanh bên
Phần nội dung bắt đầu với các vùng chứa div của thanh bên, một cho bên trái và một cho bên phải -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Thanh bên giúp tận dụng không gian hiệu quả, đặc biệt trên thiết bị di động và điều đó làm cho giao diện người dùng rất tương tác và gọn gàng. Theo sidebar, các cửa sổ mở ra từ bên trái và bên phải.
Navbars
Phần tiếp theo là thanh điều hướng. Sau đây là các vùng chứa div cho các thanh điều hướng được hiển thị:
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Chúng được hiển thị ở trên cùng và ở dưới cùng.
Phần nội dung ứng dụng
Phần này là nơi chính hiển thị nội dung của bạn để người dùng tương tác hoặc đọc.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Nó sử dụng <ng-view></ng-view>chỉ thị sẽ được thay thế bằng nội dung thực tế dựa trên tương tác của người dùng trên giao diện người dùng. AngularJS NgRoute được sử dụng ở đây để thay thế các khung nhìn.
Chế độ và Lớp phủ
Phần cuối cùng là phần phương thức và lớp phủ. Vùng chứa div để hiển thị các phương thức và lớp phủ như sau:
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>