모바일 Angular UI-레이아웃
이 장에서는 Mobile Angular UI에서 사용할 수있는 기본 레이아웃 표시를 이해합니다.
기본 레이아웃의 구조는 다음과 같습니다.
<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>모바일 또는 데스크톱의 화면은 섹션으로 나뉩니다.
사이드 바
본문 섹션은 사이드 바 div 컨테이너로 시작합니다. 하나는 왼쪽이고 다른 하나는 오른쪽입니다.
<!-- Sidebars -->
<div class="sidebar sidebar-left"><!-- ... --></div>
<div class="sidebar sidebar-right"><!-- ... --></div>사이드 바는 특히 모바일에서 공간을 효율적으로 활용하는 데 도움이되며 UI를 매우 상호 작용하고 깔끔하게 만듭니다. 사이드 바를 통해 창은 왼쪽과 오른쪽에서 열립니다.
Navbars
다음 섹션은 navbars입니다. 다음은 navbars가 표시되는 div 컨테이너입니다.
<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>