Menu
I'm having (albeit minor) issues with $routeProvider.
http://localhost/thisapp/ works fine, and redirects to the .otherwise() perfectly. But it seems that once the app is loaded and lands on the "home" url (http://localhost/thisapp/#/)
Then it breaks.
If I navigate to http://localhost/thisapp the $location resolves to http://localhost/thisapp/#/
If I refresh (because you know a user will do that), then the code breaks
I've tried using $locationProvider but that's even more confusing. It seems the more I read up on it, the more confused I get because what's documented doesn't seem to work. (If I uncomment the $locationProvider line below, nothing generates). I've looked at various tutorials and issues on StackOverflow, but doesn't work as it seems to be supposed to.
Here's my config code:
myApp.config(function($routeProvider, $locationProvider) {
// commented cuz it's not working
// $locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: 'app2/components/templates/overview.html',
controller: 'overviewController'
})
.when('/all_overview', {
templateUrl: 'app2/components/templates/overview.html',
controller: 'overviewController'
})
.when('/all_procurement', {
templateUrl: 'app2/components/templates/procurement.html',
controller: 'procurementController'
})
.when('/all_social', {
templateUrl: 'app2/components/templates/social.html',
controller: 'socialController'
})
.when('/all_strengthening', {
templateUrl: 'app2/components/templates/strengthening.html',
controller: 'strengtheningController'
})
.when('/all_sales', {
templateUrl: 'app2/components/templates/sales.html',
controller: 'salesController'
})
// otherwise go to all_overview
.otherwise({
redirectTo: '/all_overview'
});
});
516
It seems like the default routing behavior (#) and trying to enable html5 routing is causing you issues. Despite your attempt to .html5Mode(true), newer versions of AngularJS have a notion of a <base href /> and require additional steps to work.
Before Angular 1.3 we didn't have this hard requirement and it was easy to write apps that worked when deployed in the root context but were broken when moved to a sub-context because in the sub-context all absolute urls would resolve to the root context of the app. To prevent this, use relative URLs throughout your app
To address what it meant by relative URLs, here is a quick example...
<!-- wrong: -->
<a href="/userProfile">User Profile</a>
<!-- correct: -->
<a href="userProfile">User Profile</a>
So, when you say "nothing generates" (white screen I guess?), inspect your browser console and you'll discover the following error
Uncaught Error: [$location:nobase]
There are a couple of ways to solve this. You can include a notion of a <base href /> in your app in the following way
$locationProvider.html5Mode({
enabled: true
});
<html ng-app="app">
<head>
<base href="/">
</head>
...
or you can disregard this <base> tag and modify your configuration with the following
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
For more information on the topic, see the Angular Docs
Error: $location:nobase $location in HTML5 mode requires a tag to be present!
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
