Html AngularJS：如何使用ui路由器为我的应用程序创建路由

我的

a

标记有问题-我有一个页面根据

GET

vars显示数据

例如-/foo.php？opt=1将显示每个人将前往的城市表-/foo.php？city=4，其中有前往/foo.php？school=4的学校表，显示学生表等

问题是，它第一次工作时——当我选择城市时，它会显示学校列表并更改url，但当我选择学校时，它会更改url，但我仍然可以看到城市表，并且只有当我按F5时，它才会显示学生表

代码如下：

odinvite.php：

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

有什么问题吗

我试图对URL进行100%的更改-

，但没有成功。只是更改了URL而没有重定向

---

谢谢

您应该停止使用后端呈现模板。AngularJS是水疗中心。如果您需要后端提供的数据，请尝试实现API，例如RESTful API。例如，您需要像下面这样配置您的路由。它使用。请注意，这只是一个演示。您应该能够将您的逻辑放入该原型中。我用一些虚拟数据准备了所有你需要的路线。只要在控制器中包含您现有的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;
});

---

请添加您的路线配置。@lin只需添加它..没关系吗？嗯，AngularJS是SPA的。直接将路由与后端结合起来并不是那么容易。您应该使用ngRoute或uiRouter，而无需后端呈现模板。我仍然没有看到

/odinvite.php？学校

或

odinvite.php？城市

的路由配置。你的问题是“为什么我的路线不起作用”。这是我所有的代码…我刚刚开始学习AngularJS。关于这条路线我需要知道什么？这是我的解决方案吗…？-没有

路线

？顺便说一句，我开始阅读“app.config（function（$routeProvider）{$routeProvider.when（“/”，{templateUrl）”"-这是一样的吗？你可以伪造路由，但这不是AngularJS的目的。

ngRoute

是一个不同的路由提供商。我建议使用

uiRouter

，因为它更灵活，为你设计路由提供了更多的选择。好的。我需要做一些家庭作业来理解你写的内容-尽管如此这看起来有点合乎逻辑。你有推荐的网站来解释这一点吗？希望有一些YouTube，但也很好：）非常感谢！！顺便说一句-当我使用

路由时-，有可能我必须配置服务器？因为我使用的是免费的主机服务器，而不是专用的。。
<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>

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;
        });

});

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;
});