Link to home
Start Free TrialLog in
Avatar of mark_norgate
mark_norgate

asked on

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
ASKER CERTIFIED SOLUTION
Avatar of kaufmed
kaufmed
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mark_norgate
mark_norgate

ASKER

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");

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

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?
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'
      });

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.