이온 프레임 워크에서 하위보기 및 경로 설정하기

이온보기에서 하위보기를 만들고 관리하고 싶지만 어떻게 작동하는지 파악할 수 없으며 로그인 및 대시 보드 페이지를 추상적으로 만들고 싶습니다. 페이지는 대시 보드의 하위 조회 수 :이온 프레임 워크에서 하위보기 및 경로 설정하기

예 : dashboard.fax 또는 dashboard.inbox 또는 dashboard.fax.send 내가 생각

내 문제는 내 루트 ion_nav_view 지시어하지만 난 모르겠어요, 어떤 제안 어떻게 작동 시키는가?

index.html을 >>

<body ng-app="modiran"> 

<ion-nav-view name="menuContent"></ion-nav-view> 
<!--<div data-ui-view="menuContent"></div>--> 

</body>

파셜/login.html >>

<ion-view view-title="login"> 
    <ion-pane> 
    <div class="login"> 
    <ion-content padding="true" scroll="false" ng-controller="SignInCtrl"> 
     <div style="margin-top: 90%"> 
     <div class="list list-inset login_inputs"> 
      <label class="item item-input item-icon-right item-input-wrapper"> 
      <i class="icon ion-person placeholder-icon"></i> 
      <input type="text" ng-model="user.username" placeholder="username" class="text-right"> 
      </label> 
     </div> 
     <div class="list list-inset login_inputs"> 
      <label class="item item-input item-icon-right item-input-wrapper"> 
      <i class="icon ion-locked placeholder-icon"></i> 
      <input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right"> 
      </label> 
     </div> 

     <button class="item button button-block button-dark" ng-disabled="!user.username || !user.password" 
       ng-click="signIn(user)">login 
     </button> 
     </div> 
    </ion-content> 
    </div> 
    </ion-pane> 
</ion-view>

파셜/dashboard.html >>

<ion-view view-title="dashboard"> 
    <ion-pane> 

    <ion-header-bar class="bar bar-header bar-dark" align-title="right"> 
     <button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button> 
     <h1 class="title">modiran</h1> 
    </ion-header-bar> 

    <ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl"> 
     <div style="margin-top: 90%" class="dashboard"> 
     <!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>--> 
     <img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;"> 
     <img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;"> 

     <div class='circle-container'> 
      <a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a> 
      <a class='deg0'> 
      <img src='img/3.png' 
       onmouseover="this.src='img/3sel.png'" 
       onmouseout="this.src='img/3.png'"> 
       <!--onmouseover="this.src='../img/3sel.png'"--> 

      </a> 
      <a class='deg45'> 
      <img src='img/4.png' 
       onmouseover="this.src='img/4sel.png'" 
       onmouseout="this.src='img/4.png'"> 
      </a> 
     </div> 

     </div> 


    </ion-content> 

    </ion-pane> 
</ion-view>

app.js >>

.config(function ($stateProvider, $urlRouterProvider) { 
    $stateProvider 
     .state('login', { 
     url: '/login', 
     abstract: true, 
     templateUrl: 'partials/login.html', 
     controller: 'SignInCtrl' 
     }) 

     .state('dashboard', { 
     url: '/dashboard', 
     abstract : true, 
     templateUrl: "partials/dashboard.html", 
     controller: 'DashboardCrtl' 
     }) 

     .state('dashboard.SmartOffice', { 
     url: '/SmartOffice', 
     views: { 
      'menuContent': { 
      templateUrl: "partials/SmartOffice.html", 
      controller: 'SmartOfficeCtrl' 
      } 
     } 
     }) 

     .state('dashboard.Fax', { 
     url: '/Fax', 
     views: { 
      'menuContent': { 
      templateUrl: "partials/fax/Fax.html", 
      controller: 'ّFaxCtrl' 
      } 
     } 
     }) 


    $urlRouterProvider.otherwise('/login'); 
    })

출처

2016-07-19 anonymox

는 다음과 같이 변경하십시오 :

가 <ion-nav-view>에서 name="menuContent"를 제거합니다. 왜? login 상태는 템플릿을로드해야하는 위치를 지정하지 않고 기본적으로 사용 가능한 <ion-nav-view>에 이름없이로드합니다.
```
views: { 
    'menuContent': { 
    templateUrl: "partials/login.html", 
    controller: 'SignInCtrl' 
    } 
} 
```
마찬가지로 dashboard을 위해 : 혹시, 추가 이런 식으로 추가 할. 간단하게 유지하려면 템플릿을로드 할 수있는 탐색보기가 둘 이상인 경우가 아니면 name을주지 마십시오.
로그인 페이지를 표시하려면 로그인 상태가 추상적이어서는 안됩니다.
사용자가 로그인했는지 여부를 확인하고 조건부로 login 또는 dashboard을 표시해야 할 수도 있습니다. app.run 블록에서이 작업을 수행 할 수 있습니다.

출처

2016-07-19 12:50:01

답장을 보내 주셔서 감사합니다. 언제 추상보기를 만들어야합니까? 하위 뷰를 어떻게 관리해야합니까? – anonymox

대시 보드가 추상 상태 및 하위 상태가 유효한 예입니다. [자세한 내용은 여기에 있습니다.] (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states). –

이온 프레임 워크에서 하위보기 및 경로 설정하기

답변

관련 문제