Mobil Açısal Kullanıcı Arayüzü - Düzenler
Bu bölümde, Mobile Angular UI'de bulunan temel düzen görüntüsünü anlayacağız.
Temel düzen yapısı aşağıdaki gibidir
<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>Cep telefonunuzun veya masaüstünüzün ekranı bölümlere ayrılmıştır.
Kenar çubuğu
Gövde bölümü, biri sol taraf ve diğeri sağ taraf için olmak üzere kenar çubuğu div kaplarıyla başlar -
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>Bir kenar çubuğu, alanı özel olarak mobil cihazlarda verimli bir şekilde kullanmaya yardımcı olur ve bu, kullanıcı arayüzünü çok etkileşimli ve temiz hale getirir. Kenar çubuğunda, pencereler sol ve sağ taraftan açılır.
Navbars
Sonraki bölüm navbarlardır. Aşağıda, gezinti çubuklarının gösterileceği div kapsayıcıları verilmiştir -
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar --></div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar --></div>Üstte ve altta gösterilirler.
Uygulama Gövde Bölümü
Bu bölüm, kullanıcının etkileşime girmesi veya okuması için içeriğinizin görüntülendiği ana yerdir.
<div class='app-body'>
<div class='app-content'>
<ng-view></ng-view>
</div>
</div>Kullanır <ng-view></ng-view>Kullanıcı arabirimindeki kullanıcı etkileşimine bağlı olarak gerçek içeriklerle değiştirilecek olan yönerge. AngularJS NgRoute, burada görünümleri değiştirmek için kullanılır.
Modaller ve Kaplamalar
Son bölüm, modals ve overlays bölümüdür. Modları ve kaplamaları gösteren div kapsayıcısı aşağıdaki gibidir -
<!-- Modals and Overlays -->
<div ui-yield-to="modals"></div>