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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.