Enabling HTML 5 routing in AngularJS

Hi there

I'm having a problem with my AngularJS routing,which I am enabling like so:

   .config(function ($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);

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

Open in new window


Unfortunately, navigating to http://localhost:4685/booking-system results in a 404.

I understand that I need to install the Routing module for IIS, which I have done.
I also understand that I need to add <base href="/"> to my HTML, which I have done.

What am I missing?

Thanks Mark
mark_norgateAsked:
Who is Participating?
 
käµfm³d 👽Commented:
I understand that I need to install the Routing module for IIS...
Based on what? Angular is a client-side framework, so why would you have to have routing on the server. Are you following a particular tutorial?
0
 
mark_norgateAuthor Commented:
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?
0
 
Kyle HamiltonData ScientistCommented:
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"
        });
    })
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
mark_norgateAuthor Commented:
But I thought the url didn't need specifying because I'm using the $routeProvider.otherwise behaviour?
0
 
Kyle HamiltonData ScientistCommented:
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
0
 
Kyle HamiltonData ScientistCommented:
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");

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

Open 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
0
 
mark_norgateAuthor Commented:
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
0
 
mark_norgateAuthor Commented:
Oh yes, I am using ui-router it turns out!
0
 
Kyle HamiltonData ScientistCommented:
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
0
 
mark_norgateAuthor Commented:
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"
    });
 
})

Open 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?
0
 
mark_norgateAuthor Commented:
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.
0
 
Kyle HamiltonData ScientistCommented:
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'
      });

Open 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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.