I am trying to replace an existing application with a new angularjs application. In existing application user comes to a specific landing page from external app through a specific url something like
'localhost:8080/APP_NAME/recordPage?recordId=ABC123'.
I am trying to implement new app using angularjs. I managed to build app to access
'localhost:8080/APP_NAME/#/recordPage?recordId=ABC123'
using angular routing mechanism. But is it possible to make url available exactly as it was before with out '#/'?.
In spring framework i can define it in controller to return to landing page directly, but is it even possible in angularjs to directly access specific page without going home page or index page?
localhost:8080/APP_NAME this is your context path and in angularJs '#' differ context path with specific accessing path.
So when ever you want to access another page it simply change the path after #, so it is easy to set state with particular url.
& if you don't want to go through '#' then don't declare your file path in index page and access it from outside.
This is resolved by creating a separate servlet to handle direct access using servlet annotations
'#WebServlet("/recordPage")'
Related
Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?
To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)
Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.
What I think you're looking for is either window.location.replace() or window.location.assign()
Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.
Assign loads a new document, as if the URL you passed it is the one that got the document.
https://developer.mozilla.org/en-US/docs/Web/API/Location/replace
https://developer.mozilla.org/en-US/docs/Web/API/Location/assign
Edit: a comparison
Difference between window.location.assign() and window.location.replace()
I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.
Or you may be able to use the 'gatsby-source-filesystem' package.
I'm working on a web application where a large set of data can be filtered using JavaScript. When a user selects filters, I want to update the URL of the page to reflect the selected filters so that the user can share that URL with someone else, and that person can load the page and my app will apply the same filters. I don't have a need for the back buttons in the browser to cycle thru the previous filters that were selected.
I think I have two approaches here:
I can create a representation of the filters and add them to the fragment of the current page via window.location.hash. I can parse them on page load to see if there are any already set.
I can create a representation of the filters as query string params, and manipulate the URL using the history API. I would use the replaceState method.
Is there a reason to chose one over the other? Again, I want to emphasize that I'm not concerned with any routing or browser history manipulation. I just want to provide a way for someone to put certain params in the URL that my JS code will parse and apply as the filters.
Using the Vue router and may be also vuex for state management should help you save some time. There is also a little helper library for url encoding / decoding --> qs.
To your question "history vs hash": that depends on your application, the system which hosts the application (e.g. part of a content management system with its own url handling) and the meaning of the params.
History mode generates better looking paths and features some more control, as long as you stay in your application. But: as your path segments have no identifiers, the sort order matters.
Scenario: You have an application which can have three params:
/value1/value2/value3 means something else as /value1/value3/value2
With a query string you don't need to take care about sort order, as every value has its key:
key1=value1&key2=value2&key3=value3 is the same as key1=value1&key3=value3&key2=value2
I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router. When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get
404 page not found
and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.
Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?
Check this out: https://github.com/rafrex/spa-github-pages
The concept might help you.
When the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.
i am creating a angular app and want to add few parameter before the hash in url dynamically without refreshing the page or controller.
eg: suppose initial url is
http://localhost:3000/#/xyz
i want to add parameter before the hash
http://localhost:3000/?sort=desc#/xyz
Note:
I can't implement pretty url concept of angular because i am not allowed to do any configuration at server side.
I tried HTML5 history but getting error like infinite digest cycle or controller reloads again and again
I'm doing a quite large app that needs to save a Javascript object and save it to client's disk and viceversa: retrieve JSON object and parse it.
I've managed to save and upload the file, but here's the problem: When the file is successfully uploaded (checked from the console and inspector), Angular does not display anything at the ng-repeats, ng-model...
I assume the problem is that Angular does not know that the object has changed. I am wondering, since I seem not to find it anywhere: how can I re-render all of my Angular app?
What we did in one of our Angular projects, is some kind of 'cacheId'.
So imagine simple POST service generating random integer number.
Imagine another GET service returning that number.
Now in your Angular templates, wherever you specify template rul name, add 'cacheId' as param.
Instead oF that:
templateUrl: 'some-folder/some-template.tpl.html'
Do that:
templateUrl: 'some-folder/some-template.tpl.html?cachedId=' + someService.cacheId
What advantage?
You can click resetCache() url and generate different cacheId
client will get different cacheId in next request
browser will treat html template url as new url and will reload template
by reloading template you will get new data in
Something like that might work.