离子框架内的导航和状态

Question

我正在尝试制作一个应用程序，在您第一次使用它时，我会在本地保存一些信息。我的目的是当下次有人打开该应用程序时，它将显示另一个页面。问题是我不知道如何从我的控制器函数加载一个简单的页面（不是模板之类的部分）。

这是我的html

<body ng-app="starter" ng-controller="MainCtrl">
    <ion-content class="center" [....]
<button class="button button-calm button-full button-clear button-large" ng-click="saveAll(name, job)">
                <span style="font-size: 1.4em;">start</span>
              </button>
</ion-content>
</body>

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('home', {
    url: "/home",
    controller: "HomeCtrl",
    template: "<h1>Home page</h1>"
  })
  $urlRouterProvider.otherwise('/first')
})

.controller('MainCtrl', function($scope, $localstorage, $location) {
  $scope.setName = function(name) {
    if (name) {
      $localstorage.set('name', name.toLowerCase());
      console.log(name);
    }
  }
  $scope.getName = function() {
    alert($localstorage.get('name'));
  }
  $scope.setJob = function(job) {
    if (name) {
      $localstorage.set('job', job.toLowerCase());
      console.log(job);
    }
  }
  $scope.getJob = function() {
    alert($localstorage.get('job'));
  }
  $scope.saveAll = function(name, job) {
    if (name) {
      $localstorage.set('name', name.toLowerCase());
      console.log(name);
    }
    if (job) {
      $localstorage.set('job', job.toLowerCase());
      console.log(job);
    }
    if (name && job) {
      $location.path("home");

    }
  }
})

Answer 1

您可以使用以下方式导航路线：

$location.path('/home');

或：

$state.go('home');

所以..在你的 MainCtrl 中你可以放这样的东西：

$scope.getName = function() {
    return $localstorage.get('name');
};

$scope.getJob = function() {
    return $localstorage.get('job');
};

var init = function(){
    if($scope.getName() && $scope.getJob()){
        $location.path('/home');
    }
};

init();

更新：

Ionic 默认安装了 ui-router。 ui-router documentation.

每个路由接受一个 templateUrl 属性。我不知道你的文件夹结构是哪个，所以你需要更改它们才能正常工作：

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/home',
      controller: 'HomeCtrl',
      templateUrl: 'home/home.html'
    })    
    .state('first', {
      url: '/first',
      controller: 'FirstCtrl',
      templateUrl: 'first/first.html'
    })
    .state('second', {
      url: "/second",
      controller: "SecondCtrl",
      templateUrl: 'second/second.html'
    });

  $urlRouterProvider.otherwise('/first');
})

离子框架内的导航和状态

Navigation and states inside ionic framework

angularjs

ionic-framework

ionic