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:
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
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"
});
})
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you have to specify the url
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mod e(true);
$routeProvider.otherwise({
url: '/booking-system',
templateUrl: "/angular/components/booki ng-system/ booking-sy stem-templ ate.html"
});
})
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mod
$routeProvider.otherwise({
url: '/booking-system',
templateUrl: "/angular/components/booki
});
})
ASKER
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
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:
and then you would define the route with your template and whatever else:
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
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");
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"
...
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
ASKER
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
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
ASKER
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
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
ASKER
Kyle, what is a $stateProvider? I'm following along from an excellent book, and I came across this in the routing section:
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?
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"
});
})
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?
ASKER
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:
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.
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'
});
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.
ASKER
Or does it?