I am using angularjs with history mode turned on and would want to make all links(all a's href) to load with history api... So, i have set
$locationProvider.html5Mode(true)
And now the issue is that all pages reload the normal way. The url set in base tag is
http://localhost:8080/laravel/public/
Got it solved... So, i would have to do the routing. I had to add routes to load with history api...
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 building a simple MVP of an idea in jQuery and Rails 5. I would like to avoid introducing a front end framework for the purposes of the simple project.
In order to let users navigate with the forward/back button I made different templates with "routes" such as /profile and /network as follows.
I use popstate to change which handlebars template I render (in the onPopState function):
window.addEventListener('popstate', onPopState, true);
I use pushState when I navigate to a new page (I navigate just by swapping which handlebars template and event handlers I am showing):
history.pushState({page: 'home'}, 'Page Title | Home', app.client + '/home');
I have most of the functionality working. The only problem is that if I refresh the page or type in a URL like myapp.com/profile in the address bar directly I get logged out and/or see an error, either a 404 if the app is deployed, or a Cannot GET /profile if I am running on localhost.
I think the issue is that I need to implement some kind of routing on the front end, but I am not sure how / which to use. Are there simple ways to implement this with just jQuery / JavaScript?
Thanks!
I encounter a strange behaviour with angular and html5Mode:
When i enter an url of the SPA i can see in the debugger that initally the LocationMode is LocationHashbangUrl even though $locationProvider.html5Mode(true) is set.
So the Url is first parsed by LocationHashbangUrl.
Then after angular has executed $locationProvider.html5Mode(true) the url gets parsed again.
I compared this to a rather simple example implementation from this http://plnkr.co/edit/DA3Oq6?p=info there it is not the case and angular starts with LocationHtml5Url right away.
I suspect that this causes troubles with the browser back button.
When i use the backbutton of the browser i can see in the debugger that the url is first parsed again by LocationHashbangUrl instead of LocationHtml5Url and this causes a Url change to an empty path.
I use angular 1.2.28 and angular-route 1.2.28 in a requirejs context.
Btw this is a followup of angular routes are in history but browser back jumps to first entered url
I found the reason:
There was a module bootstrapped before the actual main application and this was the reason for the inital LocationHashbangUrl object.
Setting $locationProvider.html5Mode(true); in this module as well solved it.
In MVC angularJS application, how can I redirect to MVC page.
I tried below two options
First
// It doesn't work
$location.path("/MyPage1");
Second
//It works
window.location = "/MyPage1";
Please suggest best way to redirect and why ?
REMEMBER : I am not using angularJs Routing.
Comparing $location to window.location official doc clearly stated
see the section at this location
seamless integration with HTML5 API
window.location: no
$location: yes (with a fallback for legacy browsers)
and more
Both do have their own merits. They are clearly described in the official docs as mentioned by #Mohammad. So depending on the circumstances choose any of the either :
Use $location : When you do not require a full page reload when the browser URL is changed, wants to avail the angular internal life-cycle benefits and where you don't need to support old legacy browsers.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.
Use native window location : 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 or when you want to work with row level object properties that you can directly modified. i.e like Force reload window.location.reload().
Chrome Packaged Apps have a rather strict Content Security Policy. One result of this is that manipulating the location (like clicking on a link) results in:
'Can't open same-window link to "chrome-extension://lkjasdfjklbdskjasdfjkhfdshjksad/derp.html"; try target="_blank". '
Target _blank will open the link in chrome which is not what I want. Can AngularJS' routing work in such a locked-down environment?
They docs give an example of an Angular app, but conspicuously does not use routing.
Update
Here is the link that, when clicked, gives the error: <a class='walrus-link' ng-href='paystubs/{{walrus.id}}'>Walrus {{id}}!</a>
Instead of using an href, try using ng-click and call a method to your controller the relocates to the appropriate page using $location. See the documentation on the AngularJS site. The following quote from the doc gives an indication that the $location service might be appropriate for you:
When should I use $location? Any time your application needs to react
to a change in the current URL or if you want to change the current
URL in the browser.
Your code might look something like this:
<a class='walrus-link' ng-click='getPaystub(walrus.id)'>Walrus {{id}}!</a>
and in your parent controller, you'll need a scope method called 'getPaystub' with a line similar to:
$scope.getPaystub = function(selectedWalrusId) {
$location.path('paystubs/'+$scope.walrus.id);
}
This way angular keeps control and won't cause a page refresh. This hopefully keeps you within the bounds of the CSP. Unfortunately I cannot test this in a packaged app, but I've used the exact same convention in a web app and it works just dandy.
routing works for me in my chrome app when not using $routeProvider's html5 mode (which is disabled by default), you just have to use a hash in the url.
so my links look like this:
About
$routeProvider configuration is as follows:
$routeProvider.when('/about', {templateUrl:'about.html'})