web-dev-qa-db-ja.com

ionicプロジェクトで開始ページを設定する方法

これが馬鹿げた質問である場合は申し訳ありませんが、私はまだこれにかなり慣れていません。私はナビゲーションがangular jsでどのように機能するかについての基本的な理解を持っていますが、開始ページを設定する方法を理解できません。URLが示す開始ページとしてログインページを設定したいログインページは開いています（ " http：// localhost：8100 /＃/ template/login "）が、インデックス（ion-nav-bar）からの疑いがある空白のヘッダーのみを表示します。

ありがとうございました。

index.html

<body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view class="slide-left-right"></ion-nav-view>
  </body>
</html>

login.html

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
  <h1>lalalalala</h1>
     <div class="list">
         <label class="item item-input">
              <span class="input-label">Username</span>
              <input type="text">
         </label>
         <label class="item item-input">
              <span class="input-label">Password</span>
              <input type="password">
         </label>
      </div>
      <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.Apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

.state('tab.login', {
    url: '/login',
    views: {
      'login': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

  .state('tab.projects', {
      url: '/projects',
      views: {
        'tab-projects': {
          templateUrl: 'templates/tab-projects.html',
          controller: 'projectsCtrl'
        }
      }
    })
    .state('tab.projects-detail', {
      url: '/projects/:projectsId',
      views: {
        'tab-projects': {
          templateUrl: 'templates/projects-detail.html',
          controller: 'projectsDetailCtrl'
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('login');

});

controllers.js

angular.module('starter.controllers', [])

.controller('loginCtrl', function($scope) {})

.controller('DashCtrl', function($scope) {})

.controller('projectsCtrl', function($scope, Chats) {
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});
angularjscordovaangular-ui-routerionic-framework
17
user2413453

問題はデフォルトのルートにあると思います：

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

Abastracttabに応じて定義しました：

$stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

これはあなたのログインです：

.state('tab.login', {
    url: '/login',
    views: {
      'login': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })

状態名はtab.loginです。つまり、tabから継承します。

ルートは/ tab/loginです。

これはあなたのtabs.htmlでなければなりません：

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="Login" icon-off="ion-ios-Pulse" icon-on="ion-ios-Pulse-strong" href="#/tab/login">
    <ion-nav-view name="login"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Status" icon-off="ion-ios-Pulse" icon-on="ion-ios-Pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

</ion-tabs>

ion-nav-view名を見ることができるように：

<ion-nav-view name="login"></ion-nav-view>

州で定義されているものと一致する必要があります。

.state('tab.login', {
        url: '/login',
        views: {
          'login': {
            templateUrl: 'login.html',
            controller: 'loginCtrl'
          }
        }
      })

ここでビューの名前を設定する必要はありません（login.html）：

<ion-view view-title="Login" name="login-view">

もう1つ気づいたのは、2つの異なるビューに同じnameを使用していることです：tab-projects：

.state('tab.projects', {
      url: '/projects',
      views: {
        'tab-projects': {
          templateUrl: 'templates/tab-projects.html',
          controller: 'projectsCtrl'
        }
      }
    })
.state('tab.projects-detail', {
      url: '/projects/:projectsId',
      views: {
        'tab-projects': {
          templateUrl: 'templates/projects-detail.html',
          controller: 'projectsDetailCtrl'
        }
      }
    })

別のことは、慣習に関係しています。 tab-で始まるビュー名に使用する場合、おそらくlogin。

これが plunker とコードの一部です。

6
LeftyX

App.jsを次のように変更します

_.state('login', {
   url: '/login',
   controller: 'LoginCtrl',
   templateUrl: 'templates/login.html'
})
_

および$urlRouterProvider.otherwise('/login');

_login.html_を正しいフォルダーに配置すると、問題は発生しません。

2
Codelord

私はあなたのコードに関するコメントを入れていますので、あなたが従いたいいくつかのステップで答えを定式化させてください

1：

コントローラーを宣言したら混乱します。 this のようなガイドに従ってください。少なくとも同じ方法でコントローラー/サービス/ディレクティブなどを宣言し、LoginCtrlでなくloginCtrlおよび最初の文字が大文字でないその他のもの。それは私の友人に助言するだけです。

2：

.state('tab.login', {
    url: '/login',
    views: {
      'login': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })

ここで確認する必要があるもの、ビューの名前、loginがありますが、

<ion-view view-title="Login" name="login-view">
  ...
</ion-view>

loginのみに変更してください。 abstractルートでも同じことを行います。

このような

<ion-view view-title="Login" name="login">

そしてこれはとても重要です

$urlRouterProvider.otherwise('/login');

$stateProviderの最後にあります。 otherwiseメソッドは、他のルートが一致した場合に常に/loginにリダイレクトします

2
Non

_<ion-nav-view>_テンプレートで_index.html_に名前を付ける必要があります。

例えば_<ion-nav-view name="viewContent"></ion-nav-view>_

次に、ルートで、アプリのどの部分にテンプレートをレンダリングするかを指定します。例：

_.state('login', {
    url: '/login',
    views: {
      'viewContent': {
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'
      }
    }
  })
_

これは_templates/login.html_をviewContentエリアにレンダリングします。 UIルーターが非常に柔軟である理由は、ルーティング時にどの部品を交換する必要があるかを正確に伝えることができるためです。

柔軟性が必要ない場合は、views部分なしでルートを記述し、controllerとtemplateUrlを各状態に直接追加してください。

また、フォールバックはおそらく$urlRouterProvider.otherwise('/login');でなければなりません

1
tmaximini

Config.xmlファイルがあります。それを開くと、「スタートページ」オプションが表示されます。次に、開始するページを入力します。

0
Vincent Tang

私は同様の問題を抱えていました.app.jsファイルを単に開いてください..右下に$urlRouterProvider.otherwise('/app/tabs');がありますので、たとえば現在ロードしているページが「タブ」である場合、値タブを単に変更しますそのページが最初のデフォルトページとしてロードされるための、優先するページ名の順序。

0
RileyManda

ログイン時に特定のビューが同じ状態になっていないことを示すために成功を評価する場合。

これは正しいはずです：

.state('login',{
  url: "/login",
  views : {
    'menuContent' : {
      templateUrl : "login.html",
      controller : "LoginCtrl"
    }
  }
})

$urlRouterProvider.otherwise("/login");

App.jsの作成方法に関するアドバイスまたはガイドとして注文に従ってください

<script id="login.html" type="text/ng-template">
  <ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
  <h1>lalalalala</h1>
  <div class="list">
     <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text">
     </label>
     <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password">
     </label>
  </div>
  <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>
</script>
0
NHTorres