move from login page to main page in ionic using angular

Question

my code is working fine. but when i click on login button it changes the state as shown in the pic, it is changing its url but not opening that page.any help how can i redirect to next page?

index.html

<body ng-app="starter">
    <ion-nav-view></ion-nav-view>
  </body>

login.html

<ion-view view-title="login">
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Log in</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-view>

app.js

angular.module('starter', ['ionic', 'starter.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

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

   .state('app.menu', {
    url: '/home',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
  .state('app.search', {
     url: '/search',
     views: {
    '   menuContent': {
           templateUrl: 'templates/search.html'
        }
     }
  })
});

Controllers.js

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

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $state) {

  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);
    $state.go('app.search');

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

Answer 1

You made the search state being a child state of the app state (which displays your login).

So it will first display the template with the login, and this template does not include anything to help the other state being shown.

I think you want your states to be : login with url /login app with url /app and abstract And then app.search with url /search.

Then in your url bar you will see /app/search and it will be the right URL and right state you are looking for.

move from login page to main page in ionic using angular

Question

1 answers

solution1
0 ACCPTED 2017-03-10 12:09:49

move from login page to main page in ionic using angular

Question

1 answers

solution1 0 ACCPTED 2017-03-10 12:09:49

solution1
0 ACCPTED 2017-03-10 12:09:49