如何在离子项目中设置起始页

Question

抱歉，如果这是一个愚蠢的问题，我对此还很陌生。我对导航如何使用 angular js 有基本的了解，但我不知道如何设置起始页。我想将我的登录页面设置为我的起始页面 url 显示登录页面已打开（“http://localhost:8100/#/template/login”）但它只显示一个空白 header 我怀疑它来自我的索引 (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
  };
});

Answer 1

您应该在 index.html 模板中为 <ion-nav-view> 命名。

例如<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-router 如此灵活的原因，因为你可以在路由时准确地告诉它应该更换哪些部件。

如果您不需要这种灵活性，只需编写没有 views 部分的路线，然后将 controller 和 templateUrl 直接添加到每个州。

你的后备方案可能应该是 $urlRouterProvider.otherwise('/login');

Answer 2

将您的 app.js 更改为

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

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

如果您将 login.html 放在正确的文件夹中，则不会有任何问题。

Answer 3

我一直在对您的代码发表评论，所以让我根据您希望遵循的一些步骤制定一个答案

1:

一旦你声明了你的控制器，你就会一团糟，尝试遵循像 this 这样的指南，至少以同样的方式声明你的 controllers/services/directives 等等，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，以防任何其他路由匹配

Answer 4

如果您想在登录时评估是否成功以显示某些视图不应处于相同状态。

这应该是真的：

.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>

Answer 5

我想问题出在您的默认路由中：

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

您已经根据摘要选项卡:

定义了它

$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">

我注意到的另一件事是，您对两个不同的视图使用相同的 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 和您的一些代码。

Answer 6

我遇到了类似的问题..只需打开您的 app.js 文件..然后在底部您会找到 $urlRouterProvider.otherwise('/app/tabs'); 例如，如果当前加载的页面是 "tabs" 只需将值选项卡更改为您喜欢的页面名称，以便该页面作为第一个默认页面加载。

Answer 7

有config.xml个文件。打开它，你会看到 'Start Page' 选项。然后输入任何你想开始的页面。

如何在离子项目中设置起始页

how to set a starting page in a ionic project

angularjs

cordova

angular-ui-router

ionic-framework