{{link}}
"Link" is the url gotten from the database. On click of link, I want the browser to open the link. The problem is that: lets assume the name of my website is "stackoverflow.com". If the link is "facebook.com", on click of this link, it will open "stackoverflow.com/facebook.com" which is not what I want. But if the link is "https://facebook.com", it will open "facebook.com", exactly what I want. The question is that: how can I make the browser open "facebook.com" whether the link is "facebook.com" or "https://facebook.com"
This is the default behaviour of browsers, when you are not specifying an absolute path (the one that is without http:// prefix) it considered as a relative path, therefore it navigates relative to the current domain.
You can attach the http:// prefix on the client side.
Side note, it is better to use the ng-href directive that prevents from none interpolated urls to active.
<a ng-href="http://{{link}}" target="_blank">{{link}}</a>
You may use something like this :
<a ng-href={{link}} target="_blank">{{link}}<a>
And in your AngularJs controller you may apply a validation check like this :
if( link doesn't have http://){
link = 'http://' + link;
}
This way your link will always starts with http://
Related
In a React.js I have a variable that contains a url.
let linkab = 'www.example.com/about';
<Router><Link to={linkab}>About</Link></Router>
but this code adds localhost to the address on the link like this:
http://localhost:1985/www.example.com/about
how can I get the real link without localhost in the beginning?
Actually we use Link when we want to navigate to a different route in the same application.
But since you need want to navigate the user outside of your application anchor tag would be the best suitable one
<a href={linkab}>About</a>
Also, if you the provided url is not having any http or https protocol then by default it'll be considered as relative path. Hence, the provided url will be appended to the current browser address/url. So, in your case if you provide something like below then it will redirect to that url on click.
let linkab = 'http://www.example.com/about';
or
let linkab = 'https://www.example.com/about';
Just use regular <a target="_blank" href={linkab}>To external site</a> tag, no need to use Link. And add https:// before url.
In my application i am passing parameters for controller and read it using javascript as below.
localhost:8080/app/conroller#parameter=value
now problem is if i open my conroller in url and than append #parameter=value than only it works.
but i want to put whole link in anchor tag.
and when i click outside application than it automatically reroute localhost:8080/app/conroller and don't accept parameters.Although when opening that url if i apped #parameter=value* part than it works perfect.
i am using html5mode = true.
i search lots of document but didnt find right solution for this.
Not exactly sure if I get what you are asking but I think this is what you are getting at:
href="/app/conroller#parameter=value" target="_self"
Try adding the target self.
If that doesn't work you could try setting a base url <base href="/"></base>
You could try using ? for the query parameter instead of the #
if my present URL is : xzy.com/#/home/new
$location.hash() gives home/new and $location.path also gives home/new
What is the difference in the two?
If inside the controller of home/new I write $location.hash("#/home/new") or $location.path("/home/new") both do not reload the partial but if I do location.href="#/home/new", it reloads the partial. Why is this?
Also, if inside the partial there is a <a href="#/home/new"> that will also reload the partial.
Why doesn't setting the path/hash reload the partial?
There are two parts to the route.
The first "hash" is really there just for browser compatibility and won't show if you are in HTML5 mode.
For example, given this URL:
http://localhost/spa.htm
If you set:
$location.path('/myPath');
you will get:
http://localhost/spa.htm#/myPath
In this case, the "hash" is just for the browser to hold the URL, the method is path. Note also when you call path without a preceding / it is added, i.e. 'myPath' becomes '/myPath'.
If you subsequently set:
$location.hash('myHash');
You will get:
http://localhost/spa.htm#/myPath#myHash
Finally, let's assume you did not set the path first, then you'll get:
http://locahost/spa.htm#/#myHash
If you are using HTML5 mode, the path is appended without the initial hash.
The first hash is used to append the route, the second is a reference to content on the page. For example, if you use the $anchorScroll service it will respond to what is placed in $location.hash() and not in $location.path().
To summarize:
http://localhost/spa.htm#{path}#{hash}
I had a similar question this morning then Google led me here.
Inspired by other answers and some Googlings I've done, here is my result:
for example, given a browser url:
http://localhost:8080/test.html#!/testpath#testhash%20with%20someothers
in AngularJS ,
url is
/testpath#testhash
path is
/testpath
in another word , from left to right ,path starts at the first character in url and ends at the # or ? or the end of url.
path always start with '/' .so ,if no path is specified ,the path is set as "/" rather than ""
hash is
testhash%20with%20someothers
in another word ,hash starts at the next character of # in url and ends at the end of url
location.href is not implemented in AngularJS. when you say: location.href="#",it behaves like clicking an anchor tag :
click
when invoke the method $location.path,$location.hash as setters, they do change the browser url to match your demands.
And ,why you want AngularJS to RELOAD a page at all? :)
The reason for the second part of your question, why it is not redirecting might be:
You might need to update the binding, with $scope.$apply , this is required when you are using the code other than angular like native javascript, jquery code
for example:
$scope.$apply(function(){
$location.path("#/home/new");
})
let's say that I have two "pages" (endpoints) on a chaplin.js site
the routes:
match('', 'first_controller#show');
match('second_view', 'second_controller#show');
and two links:
Go to home
Go to Second
the generated urls are "correct":
mysite.com/something/ (home)
mysite.com/something/second_view (second view)
(notice that I'm not on the root of the site). When I start the application at "home" and then click the "Go to second" link i get correctly redirected to the second view, everything gets tendered correctly and the url on the browser changes to mysite.com/something/second_view
But then I cannot refresh the navigator since my webserver will try to reach a second_view folder instead, and I'll get a 404.
What i need is to always generate the urls using a # like in backbone, something like mysite.com/something/#/second_view.
BTW: that last link works but chaplin deletes the # (like a redirect)
Maybe I need to configure something? or change something on the ùrl`helper, I couldn't find anything in the docs. Any Ideas??
Thxs
Backbone itself allows this functionality out of the box, through
Backbone.history.start({pushState: false})
(the default)
You can see the startHistory call here.
You just have to pass this options object as a second parameter to initRouter in your Application :
this.initRouter(routes, {pushState: false});
I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.
What is the correct way to make a full server request within an Angular controller?
For <a> tags:
You need to stick target="_self" on your <a> tag
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:
If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:
http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en
then you should set URL as in:
var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';
(with the leading '/' as well).
Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();
After searching and giving hit and trial session I am able to solove it by first specifying url like
$window.location.href = '/#/home/stats';
then reload
$window.location.reload();
I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:
$scope.openPage = function (pageName) {
window.location = '#/html/pages/' + pageName;
window.location.reload();
};
Try this
$window.location.href="#page-name";
$window.location.reload();