how to hide id from the url of the angularjs website - angularjs

my current URL is:http://xyz.services/50/home.
i want to change this URL to http://xyz.services/.
can anyone help me how to do this.50 is the id of the page.
the whole content of the page come from the database.
below is my .htaccess
RewriteEngine on
#RewriteRule /(.*)/(.*)/$ pages.html?menu_id=$1&page_title=$2
#RewriteRule /(.*)/(.*)/$ page.php?category=$1&product=$2
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

Have a look at How can i hide the full url of my website?
This is not angular specific, but more of a configuration on the server you are deploying to.

Related

How to remove hash(#) from URL with AngularJS on Apache server?

I am trying to remove hash (#) from my url for this I did following steps
Config file
$locationProvider.html5Mode(true)
index file
<base href="/" />
.htaccess file
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
After did all that my single routes like localhost/login is working but nested ui-routes are not like localhost/home/contact.
Another this if I direct hit localhost its show blank page.
All working fine with #.

.htaccess - Redirect everything to homepage except one directory

I'm creating an AngularJS app and want to avoid the # in the URL. I learned that I needed to add the following .htaccess rules to make it work:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
That worked great. However, now my calls to my web services are not working. The web service files are inside an /api/ directory, e.g. http://example.com/api/. My guess is that when the api calls try to access those files, they also get redirected and break. So how can I modify the rules above to redirect everything to the homepage, except links that are going to any file inside the api folder? I tried to find an existing answer to this, but while there were many similar ones, none of them was exactly what I needed. Thanks!
I found the code I needed:
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /
That's all you need. Got it from: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

.htaccess redirect to index.html and index.php doesn't work together

I have a project with angularjs for front end and slim for backend api. Therefore I want to map any api/(...) to server/index.php, and map anything else to index.html. However I can't get them work together with .htaccess. api/(...) will direct to index.html instead of index.php.
This is the htaccess I'm using:
RewriteEngine on
RewriteBase /
RewriteRule ^api/ server/index.php [L]
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(jpg|png|js|css|html)$ - [L]
RewriteRule ^.* index.html [L]
This is the file structure I have now (with some files omitted):
root/
index.html
server/
index.php
.htaccess
I tried to add some random characters in .htaccess file, and got a 500 error, so the .htaccess file works. I also tried to remove the last line for index.html rule, and the api works after commenting out.
Please help me with this problem, thanks!
I finally figured out why from the best answer in this link -> view
The problem is that [L] command will not terminate the rewriting process totally, it will match from the beginning again. So in the first iteration, api/ will be changed to server/index.php. Then in the next iteration, server/index.php will be matched to index.html.
Apache will terminate rewriting process when the pattern and substitute are the same. So the way to work around it is to add termination rules. I update my htaccess, and now it works.
RewriteEngine on
# Final rule for assets
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} !\.private/
RewriteRule \.(php|jpg|png|js|css|html)$ - [L]
# Final rule for back end index
RewriteRule ^server/index\.php$ - [L]
# Redirect to back end index
RewriteRule ^api$ server/index.php [L]
RewriteRule ^api/.* server/index.php [L]
# Final rule for front end index
RewriteRule ^index\.html$ - [L]
# Redirect to front end index
RewriteRule ^.* index.html [L]
I know that the question got answered but it might help those people who want to host their React (front end) and Laravel (backend) on cpanel of GoDady.
Assuming that you people know the basics of cpanel, first go to the public_html and to your folder where your domain or subdomain is located.
you need to upload the application to the public html but remember when you are building react static files (npm run build) you need to define the domain name or the sub folder name with the key homepage in you package.json
or if you want to add the static files in sub folder then it is must to do
"homepage": "http://ghulam.covidbaml.com/yourSubFolderNameHere",
so, I am assuming my folders structure on the cpanel (public_html)
public_html/Static React build Files
public_html/ server (the server folder is also located in same place which contained laravel files)
Now we can write .htaccess which is really imported assuming godady linux hosting.
htaccessFile below:
Options -MultiViews
RewriteEngine on
# Rule to start the laravel api on work
RewriteRule ^server/public/index\.php$ - [L]
# Redirect to index.php
RewriteRule ^api$ server/public/index.php [L]
RewriteRule ^api/.* server/public/index.php [L]
# now I am redirecting the React index file (index.html)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
note:
RewriteRule ^ index.html [QSA,L]
The above command is for the purpose of react routing that it doesn't give 404 error while you refresh the page.

Routing php using .htaccess

My folder structure:
--root
-----includes
-----content.php
-----index.php
-----sitemap.php
-----rss.php
i want using .htaccess file for routing my web application look like this:
http://mysite.domain/ => index.php
http://mysite.domain/any-slug/ => content.php
http://mysite.domain/sitemap.xml => sitemap.php
http://mysite.domain/any-slug.rss => rss.php
This is my .htaccess file:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^sitemap.xml$ sitemap.php
RewriteRule ^(.+).rss$ rss.php?slug=$1
RewriteRule ^(.+)$ content.php?slug=$1 [QSA,L]
But, it not working. Somebody can help me?
I don't know if you've solved the problem but the .htaccess file just reroutes all the requests to index.php. From there you need to employ a router in order to show different pages depending on the url submitted.
For example:
User visits localhost/home/index/hello.
This gets redirected to index.php.
index.php uses $_SERVER['REQUEST_URI'] to retrieve the /home/index/hello explode it and require in the right page.

HTML5 Mode AngularJS ui.router

Hi I want to use html5 mode. My file structure is as the following:
mypage.de/mysub
I can only mess around in mysub.
So far, I added into my index.html:
<base href="/mysub/">
And created a new (and the only one) .htaccess in /mysub/
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
If I use an url:
mypage.de/mysub/#/site1 it is transformed into mypage.de/mysub/site1 and loaded
But if I use the transformed url directly, e.g.: mypage.de/mysub/site1 I get a 404
The server is an apache:
I looked into that tutorial:
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
But I'm not sure what server-name is & if /path/to/app is
/
or
/mysub/
Also it throws my already an internal server error when I just leave the virtual host & the part within the directory tags.
because the .htaccess is within the directory. I tried diff. varaitions but nothing worked here so I just used the part within Directory as mentioned here:
AngularJS: can't get html5 mode urls with ui-route $state
Try this
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /mysub/
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>

Resources