This happens nearly always.
AngularJS puts slash in index.php#/gohere, so i can't go to "gohere".
Why angular puts? and how to prevent it from putting slash between index.php#/gohere?
normally it should be like this index.php#gohere, doens't it?
edit:
now i changed html alittle. it does like this now.
http://localhost/subsite/#/here
The hash inside the URL is called "Hashbang Mode".
You can add an option to your app.config() section
that turns off the default hashbang mode and activates
the HTML5-history based mode:
$locationProvider.html5Mode(true);
This mode allows you to use URLs without the hash,
e.g.
http://localhost/subsite/here
instead of
http://localhost/subsite/#/here
You can find more information about the modes in the official angular JS documentation:
https://docs.angularjs.org/guide/$location
(scroll down to "Hashbang and HTML5 Modes")
Related
In angular js urls are start with #. I want to change # with some character, however i know we can remove # with html5Mode(true). But i don't want to remove it , i just need to replace it with some other character.
You can't actually change the fragment identifier (#).
It's used in Angular for identifying the resource route.
You could use html5Mode in order to delete it only in browsers that support that kind of behavior. in other browsers that doesn't support this behavior, Angular has a fallback guarantee, that it will change the route to start with #!.
I try to stop angular to modify the URL format
like from 'mail.google.com/#inbox'
to 'mail.google.com/#/inbox'
the context is I'm developing a Chrome extension, and customer like to use it with Streak in the same time. But sometimes my app will stop 'pipeline' feature of Streak shows up.
And the reason I guess is angular change the URL to different format therefore, stop some function of Streak(maybe)
so, to prevent angular add slash after hash tag,
I use html4 mode in config like
$locationProvider.html5Mode(true);
in fact, it works! but with error message:
$location in HTML5 mode requires a tag to be present!
so I change it the config part to
$locationProvider.html5Mode({
enabled: true,
requireBase: true
});
then error message disappear, but slash will be encode
ex:
"mail.google.com/#pipeline/aaabbbccc..."
become
"mail.google.com/#pipeline%2Faaabbbccc..."
and pipeline not shows up.
then I find method to prevent slash encode from this method
I change config back to
$locationProvider.html5Mode(true);
and add tag to head to index;
as I'm developing a inject script app
I add the html tag by Jquery in content script
$('head').append('<base href="/">');
then situation become weird,it will open new tab and sometimes sign me out of gmail, also pipeline not shows as well.
Furthermore, I find the thing trigger URL change is some directive use $state
Is somebody have idea how to prevent angular modify URL formate change?
or my assumption of reason is wrong?
Terminology
#foo: slashless scheme
#/foo: slashy scheme
Background
There are certain legacy parts of the application which use (and rely on) the slashless scheme. I would like to introduce Angular routing (probably with ui-router) in a non-destructive way, such that doesn't interfere with the legacy routing so that part of the application could be gracefully phased out over time. Once that happens the all-angular app could switch to the slashy scheme all at once.
So far
I tried setting $locationProvider.hashPrefix('') to an empty string, but it seems you can only set the string between # and /, so that didn't work.
Options
It seems I can either
rewrite legacy parts of the app, or
rewrite Angular's $locationProvider.hashPrefix to include '/' by default. Therefore setting it to '' would become meaningful.
Both of these options seem very time-consuming.
Do you know about a better way to make Angular recognize the slashless scheme?
You can try using redirects!
With ui-router:
app.config(function ($urlRouterProvider) {
// when there is an 'old' route, redirect to new one
$urlRouterProvider.when('foo', '/foo');
// You can also use regex for the match parameter
$urlRouterProvider.when(/(\w+)/i, '/$1'); // UNTESTED!!!!!!
})
Reference about ui-router wiki
I'm sorry but hashtags are quite hard to test in plunkers/fiddles, so i'm not providing one for now...
Can I disable these fellas? I am using angular.js in asp.net mvc app, and I don't need angular to control anything related to address bar or the links...
Right now in html5 mode disabled ($locationProvider.html5Mode(false)) it adds hash and action method's name to the address-bar, for example: you go to \Home\index, it navigates and then address bar text changes into Home\index#\index. ain't that's annoying?
if I enable html5 mode it stops loading pages at all (except the initial). I try going from initialy loaded page to another - it changes the address-bar's text (without adding hashtag thing this time) but won't load the page itself. ain't that frustrating?
A makeshift solution exists here AngularJS 1.1.5 - automatically adding hash tag to URLs
The answer explains the first step (as explained above, with the addition of the new hash-prefix)
yourApp.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
The first bit handles Angular interfering with your address-bar visually, but now clicking on any links doesn't function properly as (read: history.pushState)
So, the workaround, as pointed out by user #Kevin Beal is some variation of setting the target of the <a> to _self
$('a[href]').attr({'target':'_self'})
or on a case-by-case basis:
Foo
Bar
Although, for the sake of convenience and sanity, I think it's combination of these.
Markup sans target
Foo
Bar
JS
// If `http` protocol present, assume external link
$('a[href^="http://"]').attr({'target':'_blank'});
// Otherwise, assume internal link
$('a:not([href^="http://"])').attr({'target':'_self'});
Worth noting that the above selectors do required jQuery proper.
So not 100% of my site is "powered by AngularJS" some of it is just simple static HTML like a landing page or content oriented stuff, which is simple HTML for obvious reasons.
The only way I can seem to get a link to navigate normally is like this:
$routeProvider
.when('/plans', {templateUrl: '<%= asset_path('ng/views/start.html') %>'})
# Catch all
.otherwise({ redirectTo: (p,loc) -> window.location = loc })
It feels like the catch all should be simpler like I could do .otherwise(false) and it would just navigate normally. Same goes for `.when('/something'/, false) but I don't see anything in the docs that suggests this is possible.
Does anyone know of a better way to do this?
Edit 1:
One solution I've found is to use target='_self' in the link.
The other is apparently to set the "base url" of the application as outlined in the docs. Then any links outside of that base should navigate normally. However that doesn't seem to work as outlined and the example doesn't match what the documentation is suggesting either.
just creating a link to it external file
if you are using hashbang urls (e.g. #/plans) then you should be all set, if you are using html5 history api ($locationProvider.html5(true)) then you need to namespace your app (set base[href] properly) and put the content outside of that namespace.
relevant code:
https://github.com/angular/angular.js/blob/4df45b20d460239a0f5001fb0dd59f95e2d0e80d/src/ng/location.js#L560
Another solution is to use target="_self" on that a element. Again this should be an issue only when html5 (history pushState) is being used.