I am trying to trigger the router on the file:// protocol
Backbone is started using pushstate
# Backbone History Start
Backbone.history.start
pushState : true
root : "/"
Routes are defined as below
"prototyping/scaffolding/contact.html" : "contact"
Path example
file:///Users/ianwarner/www/prototyping/scaffolding/contact.html
I think I am just missing the magic to make this happen - maybe prepend some wildcard to the beginning of the routes?
All help appreciated
Thanks
Ian
Related
In my react app I'm using react-router with BrowserRouter.
my webpack file has
devServer.historyApiFallback: true
I have a
<Route path='/details/:parameter' />
when navigating through the app, both the fallback and the route(s) work as expected.
However, if I'm on the route that serves at /details/:parameter and I refresh, the app breaks and tells me in the console that it can't find
/details/webpack_bundle.js
however the url in the browser still contains the correct route with its parameter.
I was hoping to find an elegant solution to this. Any explanation for why it's behaving this way is appreciated.
duplicate question: see React nested route fails to load on refresh.
I'm using HTML Webpack Plugin in webpack and this is the solution I found.
webpackConfig.output.publicPath = '/'
this loads the bundle from the root directory.
Open up your console and check if your getting an unexpected token error '<'
It's probably because in index file you're missing a slash '/' before the bundle.js. Change it to <script src='/bundle.js'><script>
Check out this answer: Express.js, Unexpected token <
someone knows what "#!" Means. on the url?
I was working until then this appears,I had a "#" always in the url and would like to keep it that way.
Currently routing is not working anymore,probably because of this url change.
It's part of a business project, i don`t want to change to html5Mode.
I tried to use:
$locationProvider.hashPrefix("");
Even correcting the url in this way routing is having problems
Thats called hash-bang.
To fix this use :
angular.module('yourApp', [])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
Adding html5Mode would even get rid of the '#' in the url but if you refresh the page, then you would get a 404 error. This can be fixed by configuring your server a bit. For that you might want to check the nice little tutorials :
https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
https://www.theodo.fr/blog/2017/01/pretty-url-in-angularjs-and-loopback-drop-the/
There is another answer to the hashbang issue in stackoverlow :
Doing links like Twitter, Hash-Bang #! URL's
You can use html5Mode in your location provider.
$locationProvider.html5Mode(true);
more info https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag
Set html5mode true in your app.config
$locationProvider.html5Mode(true).hashPrefix('*');
I'm having trouble getting path lookup to work with a AngularJS v1.2.0 and PhoneGap/Cordova Android application. I've come pretty far with html5mode(true) by setting <base href="."/> in index.html and then changing $routeProvider.when('/') to $routeProvider.when('/android_asset/www/index.html'). After that I am able to get redirectTo('login') to reach $routeProvider.when('/login') and there render templateUrl: 'static/partials/login.html' as expected.
The problem I have is that if I instead try to redirect to the login page from my Javascript code with $location.path('/login');, the route is found but templateUrl loading fails with an insecurl exception.
I've tried whitelisting access to file:// by using the new angular-sanitize module, but that does not help.
How can I make $location.path() do the same things as redirectTo so that the partial is loaded? Or is there some other way to solve this problem?
UPDATE: I got a bit forward by adding a call to replace() after the path function, e.g.:
$location.path('/login').replace();
but that seems like a hack, and it still causes the templateUrl in the otherwise route to fail with the same exception.
Any ideas on what might be wrong? Is it that html5mode(true) just does not work at this moment with Phonegap and the only way to fix this is to set it to false and add hashtags to every path (like is done in the angular phonegap seed project)?
For future reference, this is how I managed to solve the problem:
AngularJS currently does not seem to support html5mode(true) inside a Cordova application because of the insecurl problem I reported. What I had to do is add
var h5m = (typeof html5Mode !== 'undefined') ? html5Mode : true;
$locationProvider.html5Mode(h5m);
which gives me the possibility to explicitly set html5Mode in the PhoneGap index.html with a global variable:
<script>
var html5Mode = false;
</script>
So now $location.path('/login') as well as redirectTo: 'login' works, but links in html files, don't. To get those working in PhoneGap, with html5Mode disabled, I had to add #/ in front of every link, e.g. login.
That makes PhoneGap work, but breaks the web page which uses History API with html5Mode(true). The last piece of the puzzle was to add <base href="/"/> to the web page's index.html (and leave it out of the index.html of the PhoneGap project.) So now even though I have a link that says #/login in the web page, I get to the url http://example.com/login and don't see any hashes in the address bar.
**
So in the end I have History API working in my web page and History API disabled in the PhoneGap project (where there really is no need for History API as there is no address bar). The only downside is the extra #/ I have to put in each template html file, but that is a minor annoyance compared to the ability to use all of the same html and javascript files for both web and mobile.
I had this same problem as well. I managed to fix it by skipping the leading slash in the route config:
$routeProvider
// route for the foo page
.when('/foo', {
templateUrl: 'foo.html', //previously: '/foo.html'
controller: 'fooController'
}) //etc.
Angular js appends the extenssion "/#" to my url (eg. http://example.com/#/) but I'd like my root direction to be completely clean (without the /#).
Is there a way to override this to have a clean home url?
Set html5Mode to true in your config via $locationProvider:
$locationProvider.html5Mode(true);
See: http://docs.angularjs.org/guide/dev_guide.services.$location
You need to configure the $location provider in order to get rid of the hash # in the url. This documentation goes through how to configure for html5 mode.
This SO Question will also help:
Removing the fragment identifier from AngularJS urls (# symbol)
I also faced this issue. This could be achieved by
Add $locationProvider.html5Mode(true) in the config
$locationProvider.html5Mode(true)
Add base url in the Index.html head tag
<base href="/app/index.html">
I am building an app with Backbone and Yeoman. I am having an issue with the routing.
I have the following routes set up:
'test' : testMethod,
'' : index
I have set up pushstate:
Backbone.history.start({pushState: true});
I am using Chrome
If enter myApp.com#test the url changes to myApp.com/test and testMethod() fires correctly.
However if I try goto myApp.com/test directly or refresh after the browser has changed the url from # to / then I get a 404.
I am using the Yeoman built in server to test the pages. Could this be causing the issue?
I am not sure if you are using BBB within Yeoman. If you are, this should not be an issue. If you are not using BBB, this is a known issue. BBB has it's rewrite rules setup correctly to use pushstate, but yeoman's built in server does not seem to adopt this. You could edit your grunt.js file with your own rewrite rules to get pushstate working correctly. Some of the users in the above mentioned link have done this successfully.
When your app goes live, you will either need to serve those urls through your server or edit your rewrite rules to do the same. If the latter, and your application relies on SEO, SEO will suffer greatly.