AngularJS not routing properly

问题

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

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:

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

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

The route provider:

.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"
            })

    })

The Controller that passes the link:

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

The controller that fetches data and displays:

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

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.

回答1:

Hi @AkhilEshKhajuria,

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/".

Please try replacing $location.url("/studentsSearch/" + $scope.name); with $location.path("/studentsSearch/" + $scope.name);

Correct the naming issue and it should work.

I tried this and it works fine.

来源：https://stackoverflow.com/questions/37565899/angularjs-not-routing-properly

标签

javascript

php

angularjs

routing