change url from query string to normal url - angularjs

i have a site built with wordpress and angularjs. This uses a url structure based on query string like. http://www.carsangrah.com/used-car/?id=171&car-name=Toyota-Etios%20Liva-GD
I want my url to look like http://www.carsangrah.com/used-car/Toyota-Etios%20Liva-GD_i171
How can I change this?

Related

NextJS: Is it possible to hide the locale in URLs for localized routing?

The Question
I was wondering if there is any way of having the same visible URL for the client while being able to handle internationalization.
My use case
I want my users to have universal access to pages and hide the locales from the URL path. If a user shares a link with another user, the content should be loaded in the preferred language of the current user that opens the page.
I'm fetching localized data on the server-side with getServerSideProps and caching the result with Cache-Control for 5-10 minutes. So, passing locale as a query parameter (?lang=en, ?lang=ca, etc) probably won't work as the cached results should be different for different locales.
What I have done before
My app was written entirely in React and I'm now moving to Next.js. I used to pass the locale in a URL query parameter like ?lang=en. I would then store that locale in the localStorage, send API requests with the given locale, and change the app's appearance accordingly.
That used to work fine, but now I want to make use of the server-side rendering and request caching, which makes things more complicated.
This seems to be a common use case. Is there any way to handle the internationalization without explicitly changing the URL? Or maybe having one URL at first and then hiding some parts after? Any kind of idea/workaround would be really appreciated!
I'm trying to get a similar result. So far I haven't found a way to get rid of the local part in the url (I use next-i18next).
But I managed to handle the "content must be loaded in the preferred language of the user opening the page" part with cookie and middleware with the following
const url = request.nextUrl.clone();
url.locale = userPreferredLanguage;
url.pathname =
request.nextUrl.pathname === '/'
? `/${userPreferredLanguage}`
: `/${userPreferredLanguage}${request.nextUrl.pathname}`;
return NextResponse.redirect(url);

Slug that isn't whole file name in Next.js?

I'm attempting to create a route in Next.js that follows a format like:
localhost:3000/post-SLUG
By creating a file with the name:
/pages/post-[slug].js
When I navigate to an example like localhost:3000/post-example I get a 404. Is it possible to do this type of routing? I realize that this is probably not the best URL setup, but I'm trying to match URLs from an already deployed site as a part of a migration to Next.
It's not possible to do it with Next.js routing system because in order to be dynamic the part of URL must match this regular expression:
/\/\[[^/]+?\](?=\/|$)/
So the route have to be /post/[slug]/.
The /pages/post-[slug].js would be accessible as a static route http://localhost:3000/post-[slug].
You can utilize a Custom Server to create this kind of routes.

2sxc - Getting URL path from DNN link parameter / Tab ID

I am working on integrating a 2sxc content WebAPI feed into a ReactJS application.
I have managed to get a JSON feed of data into the application, and am in the process of mapping out the data.
I'm wondering what the best practice would be to "resolve" a URL which is coming through as a DNN Page/ Tab ID.
Below I will showcase the various points this is referenced...
First the Setup of the entity / data types...
Then this is an example entry with the data filled out... The page link / URL is set up to point to another internal page on the DNN website:
Finally you can see this data item come through as a JSON feed via the 2sxc API:
What is the best way to convert this piece of data into a URL which can be used in a SPA type application?
There isn't any "server-side" code going on, just reading a JSON feed on the client side...
My initial idea would be to parse this piece of data in JS, to extract the number then use something like this:
http://www.dotnetnuke.com/tabid/85/default.aspx
http://www.dotnetnuke.com/default.aspx?tabid=85
I was hoping someone with more experience would be able to suggest a better / cleaner approach.
Thanks in advance
If you were server-side in Razor you'd be doing something like this:
#using DotNetNuke.Common
View List
XXXX = Dnn.Tab.TabID or define a string with the tab id you want
I seem to have a vague memory that I saw somewhere that Daniel (2sxc) has a way to use Globals.NavigateUrl() or similar on the client side, but I have no idea where or if I did see that.
The Default.aspx?tabid=xx format will certainly work, as it's the oldest DNN convention and is still used in fallbacks. The urls aren't nice, but it's ok.
The reason you're seeing this is because the query doesn't perform the automatic lookup with the AsDynamic(...) does for you. There is an endpoint to look them up, but they are not official, so they could change and therefor I don't want to suggest that you use them.
So if you really want a nicer url, you should either see if DNN has a REST API for this, or you could create a small own 2sxc-api endpoint (in the api folder) just to look that up, then using the NavigateURL. Would be cool if you shared your work.

Using a hash symbol in URL

I have a web app where there exists hashtags.
My wish is to have a url like this: www.example.com/tag/#hashtagname
So that if the user wants to get more information about #hashtagname he can enter the URL simply like www.example.com/tag/#hashtagname
I know the hash symbol is used primarily as an anchor element in HTML pages, so does my wish to have the hashtag in the URL have any unwanted implications? I'm thinking SEO wise and if it's even technical possible?
I'm using AngularJS and running NodeJS and ExpressJS on the backend.

Linking to an external url stored in MongoDB with Angularjs

I have a basic CRUD application written using the MEAN stack. In this I have an 'issues' model of which a number of properties are stored, including an external url which a user inputs.
I am trying to display this url so when the user clicks on it they are redirected to an external page (i.e. new tab in the browser). I am using Angular for this part.
With my current code I am always opening a new tab with the following url (http://localhost:3000/www.google.com). Taking the Google homepage as an external url example stored in the database.
My current code looks something like this.
view-issue.client.view.html
<a ng-href="{{ trustUrl(issue.sourceUrl) }}">Click me!</a>
issues.client.controller.js
$scope.trustUrl = function(url) {
return $sce.trustAsResourceUrl(url);
};
I have also tried this solution already posted with the same result (Linking to external URL with different domain from within an angularJS partial).
Thank you for any help you can provide!

Resources