모바일 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>