親と子の状態を持つ他のビューのログインページを設定する - Ionic

Question

私はUIルータを初めて使い、Ionicも新しくなっています。 私は単なるフォームでログインページを作成しようとしています。ダッシュボードなどのビューには、共通のメニューとその後の各ビューのヘッダーが含まれます。

configファンクションとindex.htmlで同じ構造をどのように処理するかわかりません。

ノート：各ビューで同じようなものに対して共通のヘッダー、メニュー、フッターのディレクティブを使用していたanglejsアプリケーションの構造については知っています。

更新 Anujの答え

マイmenu.htm後 - これは正しいですか？

<ion-view> 
<ion-content> 
    <ion-side-menus> 
     <ion-side-menu side='right'> 
      <ion-nav-bar class="bar-positive"> 
       <ion-nav-buttons side="right" 
       > 
        <button menu-toggle-right class="button button-icon icon ion-navicon"></button> 
       </ion-nav-buttons> 
      </ion-nav-bar> 
     </ion-side-menu> 
     <ion-side-menu-content> 

     </ion-side-menu-content> 
    </ion-side-menus> 
</ion-content> 

マイログインビュー

<ion-view> 
<ion-content> 
    <h3>{{msg}}</h3> 
    <h4>hflahfjasghf</h4> 
</ion-content> 
</ion-view> 

.config(function($stateProvider, $urlRouterProvider){ 
$stateProvider 
.state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.htm", 
    controller: "AppCtrl" 
}) 
.state('app.login', { 
    url: "/login", 
    templateUrl: "templates/login.htm", 
    controller: "LoginCtrl" 
}) 

.state('app.dashboard', { 
    url: "/dashboard", 
    templateUrl: "templates/dashboard.htm", 
    controller: "DashboardCtrl" 
}) 
$urlRouterProvider.otherwise('/app/login'); 
}) 
.controller('AppCtrl', function($scope){ 
    $scope.msg = "AppCtrl"; 
}); 

マイアプリはイオン性のテンプレートをダウンロード

Answer 1

空白のログインページを示してコンフィグ機能を定義した後。その中にstateProviderのようなapp.jsを設定してください

.config(function($stateProvider){ 
.state('app', { 
     url: "/app", 
     abstract: true, 
     templateUrl: "templates/social/menu.html", 
     controller: 'AppCtrl' 
    }).state('app.login', { 
    url: '/login', 
    views: { 
     'menuContent': { 
      templateUrl: 'templates/social/login.html', 
      controller: 'LoginCtrl' 
     } 
     } $urlRouterProvider.otherwise('/app/login'); 
});