Problems with AngularJS $location.path

Question

I am having fun and games with a troublesome AngularJS route, so lets see if I can explain this as well as I can.

APP.JS:

app = angular.module("index", []);

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/booking/damage/:regnumber', {
                templateUrl: 'damage',
                controller: 'DamageCtrl'
        }).
            otherwise({
                redirectTo: '/'
        });
    }
]);

app.controller('IndexCtrl', function($scope, $location) {
    $scope.regnumber = '';
    $scope.progress = function() {
        if ($scope.regnumber !== '') {  
            $location.path('/booking#/damage/' + $scope.regnumber);
        } else {
            $location.path('/booking#/damage');
        }
    };
});

My initial page has a path of

http://localhost/windscreens/glass/index#/index

and within this page is a form that via ng-submit="progress() calls the $scope.progress function within my IndexCtrl controller. There is a field in the form of ng-model="regnumber".

So when filling in the input field with lets say "ABC" and clicking on the button, I'd expect the path to become:

http://localhost/windscreens/glass/booking#/damage/ABC

But it becomes

http://localhost/windscreens/glass/index#/booking%23/damage/ABC

Thing is I am still really becoming used to the Angular routing system and haven't quite got it yet. Any advice on this will be appreciated!

Why am I seeing what I am seeing? What have I got wrong here?

Answer 1

The Angular $routeProvider can only change the part of the URL after the hash (#), so when calling $location.path(), you just use a plain URL fragment like you defined in the route for DamageCtrl.

Some explanation

I'm going to simplify a bit here, but hopefully it will help you understand what's going on.

You're making a SPA (single-page app), so the URL you enter in your browser to get into your app doesn't change while you navigate between routes; by default $routingProvider appends #/whatever/route to that base URL. In your case it looks like you have your entry point (ng-app) in a file called /windscreens/glass/index, so all routes will get appended to that.

Because you don't have an /index route defined that we can see, I'm not sure how http://localhost/windscreens/glass/index#/index is working for you. It should send you to http://localhost/windscreens/glass/index#/ because your otherwise route is just /.

Back to the question

If I understand your question correctly, I would make the index file (where ng-app lives) /windscreens/glass/index.html, then you can just enter http://localhost/windscreens/glass/ to get into the app, because the webserver will serve the contents of index.html by default.

At that point, your index page URL would become http://localhost/windscreens/glass/#/, and your /booking/damage/ routes would be http://localhost/windscreens/glass/#/booking/damage/ABC etc. The code to navigate to them would then be

$location.path('/booking/damage');

Answer 2

Angular routing changes the route on the page; it doesn't take you to a new directory or page.

So if index.html contains your Angular app and you have routes for "booking", "reservation", "cancellations", etc. You'll end up with urls that look like:

/glass/index.html#/booking
/glass/index.html#/reservation
/glass/index.html#/cancellations

The route merely appends itself to the index.html.

So, in a sense, your routes are working correctly. The %23 that you see being added is the url encoded # sign.

If you have a second Angular app that is found at /glass/booking and you're trying to forward the user to it, you can use $window.location.hash and $window.location.pathname. For example,

$window.location.hash = "/damage/ABC";
$window.location.pathname = "/windscreens/glass/booking";
should take you to:
/windscreens/glass/booking#/damage/ABC