hash sign # not routing

andrewsw · February 8th, 2017, 06:20 AM

I'm using VS Community Edition, AngularJS 1.6 and Google Chrome as my browser.

In Chapter 12 the re-routing using Angular with a hash sign isn't working. There are no errors it just doesn't produce the details view on clicking the a-link.

HTML Code:

            <td>{{movie.Title}}</td>
            <td>
                <a href="#/details/{{movie.Id}}">Details</a>
            </td>

Code:

            <td>{{movie.Title}}</td>
            <td>
                <a href="#/details/{{movie.Id}}">Details</a>
            </td>[/HTML]
        $routeProvider
            .when("/list",
                { templateUrl: "/client/views/list.html" })
            .when("/details/:id",
                { templateUrl: "/client/views/details.html" })
            .otherwise(
                { redirectTo: "/list" }
            );
        //$routeProvider.html5Mode(true);

As you can see, I attempted html5Mode and removing the hash-sign but the method isn't found.

(A side issue is that I also cannot use the $http.get() shorthand as this method isn't found either.)

Thank you.

mhirons · February 28th, 2017, 04:44 PM

Try using this instead. Note the additional ! character. This worked for me although I have no idea why.

HTML Code:

<a class="btn btn-default" href="#!/details/{{movie.Id}}">Details</a>

Also, the book is using $http.get().success();, but that is now deprecated. Try using something like this instead.

Code:

$http.get("/api/movie").then(
            function (response) { // success
                $scope.movie = response.data;
            },
            function (response) { // failure
                $scope.movie = response.data || "Fail";
            }
        );

andrewsw · February 28th, 2017, 05:00 PM

Thank you for your post. I'll try this at the weekend.