I am using url encoding with angularjs to send data to a view it works perfectly fine but when I make html5 mode using
$locationProvider.html5Mode(true);
I get the following error
Cannot GET /test/adddata/eayGcUzBmcW7XeLhgCCjA0oiQhmuJemjrArCKHPsffYKoVGTwZBIY80ejEfo50m9%7Cdata#domain.com
I am using ui router and the route is /test/adddata/:data.
Note:
I am using lite-server for development purpose.
Edit:
when I tried
/#/test/adddata/eayGcUzBmcW7XeLhgCCjA0oiQhmuJemjrArCKHPsffYKoVGTwZBIY80ejEfo50m9%7Cdata#domain.com
in html5 mode it redirected me to
/test/adddata/eayGcUzBmcW7XeLhgCCjA0oiQhmuJemjrArCKHPsffYKoVGTwZBIY80ejEfo50m9%7Cdata#domain.com
and it is working but curious on why it works is it specific to lite-server
Related
Why does Angular sometimes use a hash in the URL and other times use a hashbang? I've started writing two Angular apps from scratch. Neither are using HTML5 mode. Both have the same default route. However, the default URLs display differently.
I've been seeing this random behaviour for at least a year... long before angular-route v1.6. Also, I've always used angular-ui-router.
The default route:
configRoutes.$inject = ['$urlRouterProvider'];
function configRoutes ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
}
App #1 resolves this...
http://localhost:3000
... to this ...
http://localhost:3000/#/
App #2 resolves this...
http://localhost:3001
... to this ...
http://localhost:3001/#!/
Note the last two characters in the default URL.
I know how to activate HTML5 mode and pretty URLs. That is not what I'm asking. I would really like to understand the significance of both URLs above and why Angular is writing them differently.
Current versions:
angular-ui-router v0.3.2
angular v1.6.0
When we upgraded from angular 1.5 to angular 1.6, the URL of our app changed from /#/ to /#!/. We fixed the problem by configuring the hashPrefix in the application config:
angular.module("myApp").config(function($locationProvider) {
$locationProvider.hashPrefix("");
});
I always use html5Mode true when using angular ui-router but for a project hosted on github pages, I can't activate this mode given that no server side redirection is possible. So lets go with uggly hashbangs # in URL ;)
My state
.state('app.root.elus', {
url : 'élus',
Displays in Chromium Browser URL bar :
/#/%C3%A9lus
But if I activate html5Mode, the URL displays correctly
/#/élus
In Firefox, in both modes, accents are correctly displayed ...
Would anybody have a beginning of explanation and solution ?
I have a problem using pdfMake.js library. This library is supposed to generate PDF, client-side only.
It works well with chrome, Firefox...
But when I launch my ionic app on a device (Android in my case), I have the following error :
CordovaWebViewImpl﹕ Blocked (possibly sub-frame) navigation to non-allowed URL: data:application/pdf;base64,JVBERi0xLjMKJf39/f0KNiAwIG9iago8PAovVHlwZSAvRXh0R1.......
I encountered this problem before with AngularJs for example for Blobs...and using the following configuration worked :
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|blob):/);
BUT not here... :(
Do you have any idea how to allow the data/pdf ?
Thanks !
You have to add permissions to your App inside manifest.xml file
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.
I'm getting started with Angularjs and fallen at the first hurdle :-(
i've installed node (windows installer) and the webstorm ide. in webstorm i've installed the angularjs plugin and in the html typing 'ng' prompts all the ng templates in a dropdown, so this look ok.
cutting and pasting in the demo html5 (under the heading 'The Basics' at http://angularjs.org/) and running in webstorm and navigating to the file url (in firefox or chrome) however the angular statement '{{yourName}}' isn't binding at all - it's rendered out as a literal. Anyone know where i'm going wrong ?
The example on the home page was using protocol-less (or protocol-relative) URLs (http://www.paulirish.com/2010/the-protocol-relative-url/). While those are very handy, protocol-relative URLs don't play nicely with the file:// protocol in this case. Simply your browser is trying to retrieve AngularJS library from the local file system. To fix it you need to add protocol:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Try prefixing the ng tag with data like data-ng-model.