AngularJS 没有正确路由 [英] AngularJS not routing properly

问题描述

我正在学习 Angular，所以这是我的测试应用程序:http://enrolin.in/test/#/学生

I am learning Angular, so here is my testapp : http://enrolin.in/test/#/students

现在我想按名称搜索数据库.所以我创建了 php，它完全返回了我需要的东西.这是 php:http://enrolin.in/test/login.php?p=fetchbyname&&name=ak 您必须将 url 中的 name 替换为您需要搜索的任何内容.我还创建了一个返回绝对正确结果的部分页面，这是页面:http://enrolin.in/test/#/studentSearch/ak 到目前为止一切都很好，但问题来了:

Now here I want to search the database by name. So I created the php that returns exactly what I need. Here is the php : http://enrolin.in/test/login.php?p=fetchbyname&&name=ak You have to replace name in the url to anything you need to search. I also created a partial page that returns absolutely correct results, here is the page: http://enrolin.in/test/#/studentSearch/ak Everything was fine till now But here is the problem:

当我尝试在 http://enrolin.in/test/#/students ，angularJS 不会将我路由到类似 http://enrolin.in/test/#/studentSearch/ak 而是我在 $routeProvider 中设置的默认值

When I try to search in http://enrolin.in/test/#/students , angularJS does not route me to something like http://enrolin.in/test/#/studentSearch/ak but instead to the default that I have set in $routeProvider

这是我的 angularJS(我删除了一些不重要的代码):

Here is my angularJS (I have removed some unimportant code):

路由提供者:

.config(function ($routeProvider) {
        $routeProvider


            .when("/students/:id", {
                templateUrl: "templates/studentDetails.html",
                controller: "studentDetailsController"
            })
            .when("/studentSearch/:name", {
                templateUrl: "templates/studentSearch.html",
                controller: "studentSearchController"
            })
            .otherwise({
                redirectTo: "/home"
            })

    })

传递链接的Controller:

.controller("studentsController", function ($scope, $http, $route,$location) {
        $scope.searchStudent=function(){
            if($scope.name){
                $location.url("/studentsSearch/" + $scope.name);
            }
            else{
                $location.url("/studentsSearch/");
            }
        }

        $scope.reloadData=function(){
            $route.reload();
        }
         $http.get("http://enrolin.in/test/login.php?p=fetchall")
                                .then(function (response) {
                                    $scope.students = response.data;
                                })
     })

获取数据并显示的控制器:

.controller("studentSearchController", function ($scope, $http, $routeParams) {
        if($routeParams.name)
        {
        $http({
            url: "http://enrolin.in/test/login.php?p=fetchbyname&&name=",
            method: "get",
            params: { name: $routeParams.name }
        }).then(function (response) {
            $scope.studs = response.data;

        })
    }
    else
    {
        $http.get("http://enrolin.in/test/login.php?p=fetchall")
                                .then(function (response) {
                                    $scope.students = response.data;
                                })
    }
    })

以前每次我想在 html 中放置一个链接到路由时我曾经写过像 <a href="#/courses">courses</a> 但是现在当我想把它放在函数中，我不知道该写什么.请帮忙.

Previously everytime I wanted to put a link in html to route I used to write like <a href="#/courses">courses</a> But now when I want to put it in the function instead, I am not sure what to write. Please Help.

推荐答案

嗨@AkhilEshKhajuria，

Hi @AkhilEshKhajuria,

您使用的名称与您在路由配置中提到的名称不同.路由名称是/studentSearch/:name?"但是您在函数中使用了/studentsSearch/".

You are not using the same name what you have mentioned in the routing config. Routing name is "/studentSearch/:name?" but you have used in the function as "/studentsSearch/".

请尝试将 $location.url("/studentsSearch/" + $scope.name); 替换为 $location.path("/studentsSearch/" + $scope.name);

纠正命名问题，它应该可以工作.

Correct the naming issue and it should work.

我试过了，效果很好.

这篇关于AngularJS 没有正确路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！