web-dev-qa-db-fra.com

comment définir une page de démarrage dans un projet ionique

Désolé si c'est une question stupide je suis encore assez nouveau à cela. J'ai une compréhension de base du fonctionnement de la navigation avec js angulaire mais je n'arrive pas à comprendre comment définir une page de départ. Je souhaite définir ma page de connexion en tant que ma page de démarrage. L’URL indique que la page de connexion est ouverte (" http: // localhost: 8100/#/template/login "), mais elle affiche uniquement un en-tête vide Le suspect est de mon index (ion-nav-bar).

je vous remercie.

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

Je suppose que les problèmes sont dans votre route par défaut:

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

Vous l'avez défini en fonction de l'abastract tab:

$stateProvider

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

et ceci est votre identifiant:

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

le nom de l'état est tab.login, ce qui signifie qu'il hérite de tab.

donc votre racine est / tab/login.

cela devrait être votre 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>

comme vous pouvez voir votre nom ion-nav-view:

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

doit correspondre à celui défini dans votre état:

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

Vous n'avez pas besoin de définir le nom de la vue ici (login.html):

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

Une autre chose que j'ai remarquée, vous utilisez le même nom pour deux vues différentes: 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'
        }
      }
    })

une autre chose a plus à voir avec les conventions. Si vous utilisez pour vos vues des noms commençant par tab-, vous devriez probablement faire de même pour le login.

Voici un plunker avec une partie de votre code.

6
LeftyX

Changez votre app.js en 

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

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

Si vous placez votre login.html dans le bon dossier, aucun problème ne se posera.

2
Codelord

J'ai mis des commentaires concernant votre code, alors laissez-moi formuler une réponse avec certaines étapes que vous aimeriez suivre.

1:

Vous avez un désordre une fois que vous déclarez vos contrôleurs, essayez de suivre un guide comme this , au moins, déclarez vos contrôleurs/services/directives, etc. de la même manière, LoginCtrl et non loginCtrl et les autres éléments sans majuscule comme une première lettre. C'est juste un conseil mon ami.

2:

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

voici quelque chose que vous devez vérifier, le nom de votre vue, vous avez login mais

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

alors changez-le en login uniquement. Et faites de même dans votre itinéraire abstract.

comme ça

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

Et cela si important

$urlRouterProvider.otherwise('/login');

qui va à la fin du $stateProvider. La méthode otherwise sera toujours redirigée vers /login au cas où une autre route a été mise en correspondance

2
Non

Vous devriez donner un nom à votre <ion-nav-view> dans votre modèle index.html.

par exemple. <ion-nav-view name="viewContent"></ion-nav-view>

Ensuite, dans vos itinéraires, vous spécifiez dans quelle partie de votre application vous souhaitez que votre modèle soit rendu, par exemple:

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

ceci va rendre templates/login.html dans la zone viewContent ..__, raison pour laquelle UI-router est si flexible, car vous pouvez lui indiquer exactement quelles pièces doivent être remplacées lors du routage.

Si vous n'avez pas besoin de cette flexibilité, écrivez simplement vos routes sans la partie views et ajoutez controller et templateUrl directement à chaque état.

aussi votre solution de repli devrait probablement être $urlRouterProvider.otherwise('/login'); 

1
tmaximini

Il y a un fichier config.xml. Ouvrez-le et vous verrez l'option 'Start Page'. Puis entrez la page que vous voulez commencer.

0
Vincent Tang

J'ai eu un problème similaire .. ouvrez simplement votre fichier app.js..en bas, vous trouverez $urlRouterProvider.otherwise('/app/tabs'); ainsi, par exemple, si la page en cours de chargement est "onglets" Changez simplement les onglets de valeur sur votre page préférée nom en ordre pour que cette page soit chargée comme première page par défaut. 

0
RileyManda

Si vous souhaitez évaluer un succès lors de la connexion, certaines vues ne doivent pas être dans le même état.

Cela devrait être vrai:

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

$urlRouterProvider.otherwise("/login");

Suivez l'ordre pour obtenir des conseils ou un guide sur la rédaction de leur application.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