AngularJS改變位置不工作

Question

我是新的離子 我試圖做一個登錄應用兩個視圖之間切換簡單：

的index.html

<ion-pane> 
    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Ionic Login App</h1> 
    </ion-header-bar> 
    <ion-content> 

      <div class="list list-inset"> 
       <label class="item item-input"> 
        <input type="text" placeholder="Email" ng-model="data.email"> 
       </label> 
       <label class="item item-input"> 
        <input type="password" placeholder="Password" ng-model="data.password"> 
       </label> 
      </div> 
      <button class="button button-block button-calm" ng-click="postLogin()">Login</button> 

    </ion-content> 
</ion-pane> 

logincontroller.js

app.controller（ 'loginCtrl'，函數（$範圍，$ HTTP，$位置） {

$scope.data = {}; 
$scope.postLogin = function() 
{ 

    var data = 
    { 
      email: $scope.data.email, 
      password: $scope.data.password 
    }; 

    console.log('bonjour'); 
    $http.post("http://localhost/authproject/public/api/auth/login", data) 
    .then(
     function(response){ 
     // success callback 
     console.log('success'); 
     $location.path('/map'); 


     }, 
     function(response){ 
     // failure callback 

     console.log('error'); 
    $location.path('/index'); 

     } 
    ); 



} 

當我點擊一個按鈕登錄的URL變化，但頁面沒有改變

有人能告訴我如何解決這個問題嗎？感謝提前:)

Answer 1

在你app.js添加狀態爲map像這樣（用你自己的templateUrl和controller值）。請務必在config()中添加$stateProvider。另外，包括ui.router到您的依賴項。事情是這樣的：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives', 'ui.router']) 
    .config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider){ 

    $stateProvider 
     .state('map', { 
     url: '/map', 
     templateUrl: 'app/views/map.html', 
     controller: 'MapController' 
    }); 
... 

而在你index.html：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>

Answer 2

試試這個

app.controller('loginCtrl', function ($scope,$http,$location,$state) { 

$scope.data = {}; 
$scope.postLogin = function() 
{ 

    var data = 
    { 
      email: $scope.data.email, 
      password: $scope.data.password 
    }; 

    console.log('bonjour'); 
    $http.post("http://localhost/authproject/public/api/auth/login", data) 
    .then(
     function(response){ 
     // success callback 
     console.log('success'); 
     $location.path('/map'); 


     }, 
     function(response){ 
     // failure callback 

     console.log('error'); 
     $state.go('main'); 

     }); 
}) 

在app.js

.config(function($stateProvider,$urlRouterProvider){ 
     .state('main', { 
     url:'/main', 
     templateUrl:'templates/main.html', 
     controller:'yourCtrl' 
    }) 

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

添加的狀態現在使模板文件夾製作一個網頁名爲main.html