I'm struggling with Angular $location service... I am trying to redirect a user to this URL : "/test/0/0", and my route.js is configured with :
$routeProvider
.when ('/test/:param1/:param2',{
// Behavior here
})
When I simply do
$location.path('/test/0/0');
Angular seems not understand this path and can't associate it with the one I configured in the routes.
I have read about the $location service : I have tried $location.search(), .url(), but none of them works.
Any ideas would be welcome!
You could put a template and a controller to these route
.when('/page/:param1/:param2',{
templateUrl:'page.html',
controller: 'PageController'
})
I made an example to show you it running, you can check the code here.
First of all, I would like to thank you NEOLPAR for this piece of code which depicts accuratly what my problem was and seems to solve it perfectly. I tried to do what you suggest and unhopefuly it didn't work. But thanks a lot anyway!
As I was all out of ideas, I tried to replace $location.path() by a window.location.href directly, which also didn't work. This lead me to the conclusion that Angular just didn't bother reloading the page (because I didn't precise it but going to '/test/0/0' was just going to the current page). Thus I googled how to force a page reload and found a really nice solution (for my precise situation), which is to use :
$route.reload();
Thank you one more time for your help!
Related
I have a project using nextjs v12
I have 2 routes that are overlapping in a weird way.
/:academy/:course
/questions/:id
when I load /questions/1 it works as expected
when I load /mit/math it works as expected
The issue:
when I redirect from /questions/1 to /questions/2,
it loads, you guessed it, the other route! (/:academy/:course)
and more, when I refresh the page (after the redirect) it will load the /questions/:id!!!
I tried
check for miss spelling
make /questions/:id -> /aquestions/:id
so, do you know a way to solve this issue?
thanks.
Solved
it was /q/:id and I renamed it to /q/:id.
and because it's with ssr (I think), I had to clear the cache and restart the project.
This should not happen, because according to official nextJS docs,
Predefined routes take precedence over dynamic routes and dynamic
routes over catch-all routes.
https://nextjs.org/docs/routing/dynamic-routes
In this case, it looks like we are trying to use 2 partial dynamic path, that is why nextJS is not able to figure out the correct path, you can add rewrite rule to always send /questions/* paths to /questions/:id
https://nextjs.org/docs/api-reference/next.config.js/rewrites
Can you please share the code how you are redirecting, to help you better?
I am working on a chrome extension which injects some content script in google.com.au. That content script then loads up an angular ui router based app having a small interface. I am using $state without url. So only templateUrl and controller. The problem is when I use $state.go('home') to go to home page of my small app, $state.go in internally changes the location or url from for e.g.
(1) :- https://www.google.com.au/#q=hello
to
(2) :- https://www.google.com.au/#/q=hello
(there is an extra / after q)
the second url is invalid one which redirect me back to google.com.au.
Also, its worth mentioning that - the same app worked fine when I injected it in a linked search results page whose url didn't have any # in it.
Also, I have tried variations like $state.go and $state.transitionTo with third parameter of {location:false ....}. but it stills changes the urls like above.
I am stuck and not able to go ahead with logic ahead.
here is screencast of the problem.
http://screencast.com/t/ZrBtlkU3z
Any help will be highly appreciated.
Thanks in advance.
Update
Here is an example chrome extension containing the mentioned problem.
https://Vikasg7#bitbucket.org/Vikasg7/example-app.git
Please load this as unpacked extension and try to go to
https://www.google.com.au/#q=hello
before and after loading the extension to see the problem I have mentioned above.
Hope this helps you experts resolving the issue.
I think this is the intended behaviour of ui-router. You might need to use native javascript for this one (window.location.href = 'XXX') or maybe $location to set the hashbang exactly like you want.
Ok, After so much of research and hit and trial.
here is the code that won't change the url when changing states.
I had to use html5Mode. More detailed info and usage can be found here.
https://docs.angularjs.org/guide/$location#html-link-rewriting
stackoverflow post
AngularJS 1.1.5 - automatically adding hash tag to URLs
angular
.module("app", ["ui.router", "app.services", "app.directives", "app.controllers"])
.config(["$stateProvider", "$locationProvider", function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: true
}).hashPrefix("!")
}])
hope this helps, someone out there!
I want to create project with using Spring boot + rest + angularJS, I did whole back end with rest, I'm using angular first time and I watched a lot of tutorials for creating UI, so, I did all as in many tutorials but anyway it doesnt work and I cannot understand why because event doesnt exist an error I'm sitting 2 days for solving problem and I'm crushed. I don't know what to do. Please, someone help me to set up routeProvider correct, I downloaded whole angular libs and put in project. So, take a look please.
My app.js
var myApp = angular.module('myApp',['ngRoute']).
config(function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when("/books/", {templateUrl:"/templates/book/list.html"})
}
);
My book.html, I did img because I want you see that tag isn't readable:
book.html
and list.html:
list.html
And when I go to localhost:8080/books/ it gives me Json value from RestController and no any error like 404 or anything.
Try to put a controller for each view. Add this:
$routeProvider.when(
"/books/",
controller: 'YourBooksController',
{templateUrl:"/templates/book/list.html"}
)
However i strongly suggest you to use ui router.
The Spring Boot + AngularJS documentation is pretty good: Spring and Angular JS: A Secure Single Page Application. This tutorial includes a simple router that you can use as an example for resolving your issues.
For full featured application example code try JHipster.
This question may seem a duplicate and it can be. But I have tried the below solutions which do not seem to work:
$location.search('lang', null)
$location.url($location.path());
$location.$$search = {};
Question:
When I first redirected to my angular app Url looks like:
http://subdomain.domain.com/?lang=en-US#/UserList
As it hits my Asp.Net controller(on BeginExecuteReady) I process the language and set culture. And now want to remove the param and question-madrk i.e. "?lang=en-US".
And I have HTML5Mode off for the app. Some angular threads suggests its not possible as:
changing anything but the hash without html5 history will result in a
browser reload.
Please guide me towards light.
$window.location.search = ''
This is the code that worked for me.
Normally with JavaScript you can use the following to manipulate the history, but it does not work.
Example: What I want to achieve is to go to /clients/:id and then when I go back, I want to go to /blog/, doesn't matter which page i was on before.
$scope.changeView = function(clientId){
history.pushState({}, null, '/#/blog');
$location.path('/client/' + clientId);
};
However, this does not work in Angular.
Any idea how this could be solved?
As I am confused about what your question is.. (Are you just trying to find an Angular way of manipulating the history? Or are you trying to redirect?)
Something that may be of interest to you is the $location service on AngularJS.
I just used history.pushState(), null, '/aboutus') while on a page within my app, clicked a link, then went back and it seemed to load that '/aboutus' link just fine, so long as your Angular app is configured to route that path somewhere.