AngularJS：如何使用ui-router爲我的應用創建路由

Question

我的a標籤有問題 - 我有一個頁面，根據GET變量顯示數據。

例如 - /foo.php?opt=1將顯示每個城市的表格 - /foo.php?city=4有/學校表的表格/foo.php?school= 4，顯示學生的表格等。

問題是，它第一次工作 - 當我選擇城市時，它會顯示我的學校列表和更改網址，但是當我選擇學校時，它會更改URL但我仍然可以看到城市桌，只有按F5鍵，纔會顯示桌上的學生。

這是代碼：

odinvite.php：

<?php 
if (isset($_GET['city'])) 
{ 
    include "odbycity.php"; 
} 
else if (isset($_GET['school'])) 
{ 
    include "odbyschool.php"; 
} 
else 
{ 
    include "odshowcities.php"; 
} 
?> 

odshowcities.php：

<div ng-controller="allcities"> 

    <button class="btn btn-info" ng-repeat="x in names"> 
     <a href="/odinvite.php?city={{x.areaid}}"> 
     {{x.areaname}}</a> 
    </button> 

</div> 

odbyschool.php：

<div ng-controller="odbycity"> 
    <button class="btn btn-info" ng-repeat="x in names"> 
     <a href="/odinvite.php?school={{x.schoolid}}"> 
     {{x.school_name}}</a> 
    </button> 
</div> 

MyAngular.js：

var myApp = angular.module('myApp',[]); 

myApp.config(function($locationProvider) { 

    $locationProvider.html5Mode(true); 
}); 

myApp.controller ('allcities', function ($scope, $http) 
{ 
    $http.get("fetch_json_sql.php?option=1") 
     .then(function (response) 
     { 
      $scope.names = response.data.result; 
     }); 
    console.log($scope.names); 
}); 

myApp.controller ('odbycity', function ($scope, $http, $location) 
{ 
    $scope.cityid=$location.search().city; 
    console.log($scope.cityid); 
    $http.get("fetch_json_sql.php?option=2&cityid="+$scope.cityid) 
     .then(function (response) 
     { 
      $scope.names = response.data.result; 
     }); 

}); 

myApp.controller ('odbyschool', function ($scope, $http ,$location) 
{ 
    $scope.schoolid = $location.search().school; 
    console.log($scope.schoolid); 
    $http.get("fetch_json_sql.php?option=4&schoolid="+$scope.schoolid) 
     .then(function (response) 
     { 
      $scope.names = response.data.result; 
     }); 

}); 

可能是什麼問題？

我試圖做出100％的URL更改 - <a href="www.google.com">link</a>並沒有奏效。只是改變了網址而沒有重定向。

謝謝！

Answer 1

您應該停止使用後端呈現模板。 AngularJS適用於SPA。如果您需要後端提供的數據，請嘗試實施API一個RESTful API。你需要配置你的路線，例如像這個runnable demo plnkr。它使用ui-router。請注意，這只是一個演示。你應該能夠把你的邏輯放到原型中。我使用一些虛擬數據準備了您需要的所有路線。只需將你現有的API包含在控制器中，你應該沒問題。

var myApp = angular.module("myApp", ['ui.router']); 

myApp.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.when("", "/main"); 

    $stateProvider 
     .state("main", { 
      url: "/main", 
      templateUrl: "main.html" 
     }) 
     .state("main.listSchools", { 
      url: "/listSchools/:schoolId", 
      templateUrl: "schools.html" 
     }) 
     .state("main.listAreas", { 
      url: "/listAreas/:areaId", 
      templateUrl: "areas.html" 
     }); 
}); 


myApp.controller('mainMenuController', function ($scope) { 
    $scope.schools = [{ 
     schoolid: 1, 
     name: 'Test School 1' 
    },{ 
     schoolid: 5, 
     name: 'Test School 5' 
    },{ 
     schoolid: 11, 
     name: 'Test School 11' 
    }]; 
    $scope.areas = [{ 
     areaid: 3, 
     name: 'Test area 3' 
    },{ 
     areaid: 7, 
     name: 'Test area 7' 
    },{ 
     areaid: 19, 
     name: 'Test area 7' 
    }]; 
}); 



myApp.controller('listSchoolController', function ($scope, $state) { 
    $scope.schoolId = $state.params.schoolId; 
}); 


myApp.controller('listAreaController', function ($scope, $state) { 
    $scope.areaId = $state.params.areaId; 
});