Как установить стартовую страницу в ионном проекте

Ответ 1

Я думаю, что проблемы есть в вашем маршруте по умолчанию:

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

Вы определили его в зависимости от abastract вкладки:

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

Еще одна вещь, которую я заметил, вы используете одно и то же имя для двух разных видов: 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'
        }
      }
    })

другая вещь имеет больше общего с конвенциями. Если вы используете имена ваших имен, начиная с вкладки -, возможно, вы должны сделать то же самое для login.

Вот plunker с некоторым кодом.

Ответ 2

Измените приложение app.js на

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

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

Если вы поместите свой login.html в правильную папку, тогда проблем не будет.

Ответ 3

Я размещал комментарии относительно вашего кода, поэтому позвольте мне сформулировать ответ с некоторыми шагами, которые вы хотели бы выполнить

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 в случае, если любой другой маршрут был сопоставлен

Ответ 4

Вы должны указать имя <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');

Ответ 5

Если вы хотите оценить успех при входе в систему, чтобы показать, что определенные представления не должны находиться в одном состоянии.

Это должно быть правдой:

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

Ответ 6

У меня была аналогичная проблема... просто откройте файл app.js..так, внизу внизу вы найдете $urlRouterProvider.otherwise('/app/tabs');, так, например, если загружаемая на данный момент страница является "вкладками", просто измените вкладки значений на предпочтительное имя страницы, чтобы эта страница загружалась в качестве первой страницы по умолчанию.

Ответ 7

Имеется файл config.xml. Откройте его, и вы увидите опцию "Стартовая страница". Затем введите любую страницу, которую вы хотите запустить.