Enabling HTML 5 routing in AngularJS

No but I was having problems getting the initial login page to load, which doesn't use Angular routing, it uses Web API routing. I understand that that might have been unnecessary but I'm sure it doesn't matter.

Or does it?

you have to specify the url

   .config(function ($routeProvider, $locationProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.otherwise({
               url: '/booking-system',
            templateUrl: "/angular/components/booking-system/booking-system-template.html"
        });
    })

But I thought the url didn't need specifying because I'm using the $routeProvider.otherwise behaviour?

otherwise, just means you put in a url that is not specified as one of the routes.

you still have to tell angular where you want to go otherwise

in fact, you don't specify the template in the otherwise function.

You're telling angular, if  a url is typed in that is not one of the routes, got to this route:

$urlRouterProvider.otherwise("/booking-system");

Select allOpen in new window

and then you would define the route with your template and whatever else:

$stateProvider
   .state('booking_system', {
          url: "/booking-system",
         templateUrl: "/angular/components/booking-system/booking-system-template.html"
...

Select allOpen in new window

I should have said that before. sorry. was typing on phone

I'm assuming you are using ui-router. See the doc found here - scroll down to the bottom of this page:
https://github.com/angular-ui/ui-router/wiki/URL-Routing

I don't know what ui-router is so I'm presuming I'm not using it!

I will look into the link you posted, thanks.

The problem I'm having now is that I am getting a 404 when navigating to http://localhost/booking-system - an error generated by the Web API framework rather than from within AngularJS, so I am assuming I need to do some tinkering with the Web API route config but I'm not sure what to do. Can you help with this?

M

Oh yes, I am using ui-router it turns out!

sorry, I'm not familiar with that framework.

However, once you get that piece of it working, you will still need to make those angular changes.

Probably best to request attention for your question at this point. OR, ask a question in a different topic to get more eyes on it, since it's not an angular question at this point

Kyle, what is a $stateProvider? I'm following along from an excellent book, and I came across this in the routing section:

angular.module("exampleApp", ["increment", "ngResource", "ngRoute"])
.constant("baseUrl", "http://localhost:5500/products/")
.config(function ($routeProvider, $locationProvider) {
 
    $locationProvider.html5Mode(true);
 
    $routeProvider.when("/list", {
        templateUrl: "/tableView.html"
    });
 
    $routeProvider.when("/edit", {
        templateUrl: "/editorView.html"
    });
 
    $routeProvider.when("/create", {
        templateUrl: "/editorView.html"
    });
 
    $routeProvider.otherwise({
        templateUrl: "/tableView.html"
    });
 
})

Select allOpen in new window

Never heard of $stateProvider.

I think the problem is with the ASP.NET routing. I get to my login page fine but when I try to redirect to /booking-system I get a 404. Any ideas?

Oops. It turns out I'm not using the ui-routing. I should have read that page more closely. I'm using the built-in AngularJS routing.

what version of angular are you using?

how old is your book?

It doesn't look like you are using ui-router after all.

The example above looks like it is using the original angular ngRoute. It's still incorrect though. That's not how you would do it.

Using ngRoute, you would do:

.config(function ($routeProvider, $locationProvider) { 
    $routeProvider
.when('/some_default_route', {
        templateUrl: '/my_template.html',
        controller: 'MyController',
        // other stuff  ....
      })
.otherwise({
        redirectTo: '/some_default_route'
      });

Select allOpen in new window

again, scroll down to the bottom for the 'otherwise' function documantation
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

I don't know ASP. I recommend you solve one issue at a time. Make sure your ASP coed is working, and only then introduce angular.