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

Question

我的 a 标签有问题 - 我有一个页面根据 GET 变量显示数据。

例如 - /foo.php?opt=1 将显示 table 个城市，每个人都会去 - /foo.php?city=4 有 table 去 /foo.php?school=4 的学校显示 table 的学生等..

问题是它第一次运行时 - 当我选择城市时它会显示学校列表并更改 url，但是当我选择学校时它会更改 URL但我仍然看到城市 table，只有当我按 F5 时，它才会显示 table 名学生。

这是代码：

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

});

可能是什么问题？

我试图对 URL - <a href="www.google.com">link</a> 进行 100% 的更改，但没有成功。只是更改了 URL 而没有重定向。

谢谢！

Answer 1

您应该停止使用后端渲染模板。 AngularJS 用于 SPA。如果您需要后端提供的数据，请尝试实现 API 例如一个 RESTful API。你需要配置你的路线，例如 runnable demo plnkr. It uses 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;
});

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

AngularJS: How to create routes with ui-router for my application

html

get

href

angularjs