I have a SPA that uses angular routing. I would like to have a certain link that will open a specific page (not using a template) when clicked.
In other words I would to have some links that simply act as regular links and redirect the user to a new page. I don't want these links load inside of the template.
Surely this has to be possible right?
Many Thanks,
Kiran
If I understood your question right, you wanna replace the enitre current page with a redirect to a new external page?
If that so, you can definately do that using $location service just a s follows:
$window.location.href = 'http://www.google.com';
Just put that into an ng-click, then inject the $location service into your controller and you are good to go.
Further documentation on :
https://docs.angularjs.org/guide/$location
similar question on :
Redirect to new Page in AngularJS using $location
Related
If we are using "ui.router" of angular JS module, will that module take control of all the URL navigation in the entire page?
I am using the $stateProvider.state method to register the mappings of URLs and States but as I am using it, I am observing that the state provider is taking control of routing all URL patters. For example, if I am having a jquery tabs pane in the same page somewhere, it is not working. The reason being, the jquery tabs are based on the HREF of the Anchors and this ui-router is taking charge of mapping them as well, to some states.
Can someone please confirm if it really is supposed to work like this?
No, as per I know, it should work fine with HREF,for example
link
In your case, for tabs you are specifying #(hash) in href and thats why its going through ui-router, I would suggest you to use <uib-tab> instead of simple jQuery tabs and thing will work as you needed.
If you are using # in anchor tag then it will always try to match it with url and if not found then it will redirect to defualt one but you can actually intercept url change request in run function and use preventDefault function for specific request which will stop url change request
I am working on a Single Page Application. Page A , Page B are partials.
We have a button "btnA" on "Page A" rendered using "controllerA". At click of "btnA" we need to perform "serviceA.somework()" and at successful completion, load "Page B" using "controllerB" with some params.
Is following the best way to achieve this?
within controllerA.onClickBtnA() { $location.path(PageB).search({param:'value'})}
$routeProvider is the best choice for your scenario. You should not load the controller manually in any way. The Angular router does the job for you.
A simple example from the angular official API page: http://plnkr.co/edit/foLnNL7koXzUYavnYFFw?p=preview.
Update
Your proposal is basically doing what $routeProvider does. $routeProvider provides:
RegExp in path definition
Browsing history
A resolve function to control access to current path
Place to define your controller and template for each path
Mechanism to deal with path parameters
...
And it is well tested and supported. You'd better have a try.
I was about to start using ngRoute because the ngRouter is all the talk here lately but I started realizing ngInclude is working fine for me and i'm wondering why everyone seems to be using ngRouter instead. They both load templates (or fragments) and I can attach a controller to either or. Is the only benefit to using ngRoute that you can use href to load a template? I don't mind using ng-click and changing a ngInclude value to true. Seems easier to me but i'm sure i'm missing something.
The point of using a router is to assign URLs to pages of your app. So that I can refresh the current page, or send a link to the current page to a friend, or bookmark the current page, and land on that page, instead of landing on the home page of the app.
I need to refresh the current page with new get variables. I've read that you need to inject $route and use the reload method, but this only reloads the current url.
I would like to essentially do something akin to PHP:
header('Location:currenturl?get1=value1&get2=value2')
In AngularJS, NOT send an http.get request, but force the browser to load a new URL in the same window (in this case the modified get url). How can I do this in AngularJS? Does reload accept a parameter for a custom URL?
*I've just began to learn AngularJS and JS a few days ago, sorry if this is an obvious question, but I can't seem to find an answer that doesn't open a new tab
$window.location.href
https://docs.angularjs.org/guide/$location
Why no plain old window.location?
I'm using $routeProvider in AngularJS with many routes configured. The "otherwise" section
is configured, so it redirects all the unknown routes to the main page of my application.
All I want is to redirect the browser from my controller to an external URL, but I cant.
I tried to use $window.location = external, window.location.href = external, but they doesnt work. The routing API redirects me to the default page set in otherwise every single time.
How could I achieve this with / or without major hacks. Unfortunately, It have to be done via JavaScript code from my controller.
Thanks in advance
That might not fully answer your question but to navigate outside of route scope you can use this
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link //this one might actually be of use for you
Links starting with '/' that lead to a different base path when base is defined
Example: link
AngularJS's routing is for routing within the page.
You should use native location.href for this.
Edit: can you give me a plunker for this? did you try something along this line yet?
$scope.path="http://www.google.com";
$scope.redirect = function(path){
location.href = path;
};
with
<button ng-click="redirect(path)">Go there</button>