Angular Hashtag Rewrite - Html5Mode - angularjs

I have html5mode enabled so my urls look like domain.com/route and not like domain.com/#/route.
What I use is this rewrite code:
RewriteEngine On
Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
It works fine with first level routes (domain.com/firstlevel) but it doesn't with secondlevel (domain.com/firstlevel/secondlevel).
Any ideas on how I can modify the rewrite code to put an "/#" before the whole url of any length?
Thanks

This might be a code problem however it might be getting encoded and maybe that's why it's not working for you. Typically if you don't escape the # it will encode it.
You can try it using the NE flag.
RewriteRule ^(.*)$ /#/$1 [NE,L]

Related

Ignore folders in htaccess

I'm making a webapp using AngularJS. For routing, I used a htaccess rewrite rule to allow direct access to routing pages (for example going directly to /settings). However there is one folder I would like to exclude from this rule, so I can check if a file exists (now every URL returns 200). I've tried every combination of rewrite conditions and rules I could find, but no luck.
So far this is my .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
#Options FollowSymLinks
RewriteBase /
RewriteCond %{REQUEST_URI} !(orders)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
</IfModule>
ErrorDocument 404 /404.php
I would appreciate any help
EDIT:
I would like to exclude all files and folders under orders
Try
RewriteCond %{REQUEST_URI} !^/orders [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]
%{REQUEST_URI} always starts with a / and because you aren't specifying something like .* at the beginning of the regex, you have to have the slash. I also added the [NC] flag so that a url like "/ORDerS" would be skipped as well.

redirect using htaccess angular js

I have a website created using angular js.I need to show one page when user request one url.
for example
when the url is mydomain.com/assets then it shuld show this page mydomain.com/article/1234
I have added teh bellow htaccess,but it throws 500 error
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.assets)$ index.html#/article/1234 [L] // here i add redirect
RewriteRule ^(.*)$ index.html#/$1 [L]
How to resolve this?
Use this.
RewriteRule ^(.assests)$ mydomain.com/index.html#/article/1234 [R=301,L]

Angularjs and apache rewrite doesn't work on subfolder

I'm trying to use AngularJs with html5mode enabled, and to be able to use it i need to enable a rewrite i need an .htaccess to point to the folder.
When going to the root index, there is no problem, everything works fine. But when i try to redirect to a subfolder where there is another section, i keep getting errors. For example, i have an admin section to publish news, etc.. So to access this portion of the app i need to go to a subfolder called /adm like this www.site.com/adm and this is where the errors starts.
This is my .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
And this is the errors I'm getting:
Uncaught SyntaxError: Unexpected token <
When looking further, i see this is point to the index on the root. I know it has something to do with the .htaccess file, but i don't how to create a rule to identify if it's a root folder or sub folder and create the proper rewrite rule.
Try this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(adm/)?index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(adm/)?. /$1index.html [L]
</IfModule>
What this does is rewrite everything inside /adm/ to /adm/index.html and everything else to /index.html

Angular HTML5 mode, Wordpress, Rewrites, Apache and You

Haven't found anything on this yet, but has anyone found out the right way to turn HTML5 mode on and have it work correctly with wordpress and it's current rewrites?
Wordpress rewrites:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
#Current wordpress rewrites
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) /index.php [L]
</IfModule>
And of course the apache HTML5 mode rewrites
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !index
RewriteRule (.*) /index.html [L]
I know their EXTREMELY similar but I'm having a hard time getting HTML5 mode to work on refresh while having a Angular APP embedded into a wordpress / php page.
After hacking on this, I came to a pretty hacky answer, YMMV:
RewriteRule ^search/([^/]+)$ http://www.example.com/search/#/$1 [NE,L]
In my current situation my app lives in example.com/search/
So your telling me you turned on HTML5 mode to essentially revert it back with a redirect?!
Yes.
Are you drunk?
Possibly, but I do have a couple reasons on why;
I can't redirect wordpress back to index.html, because well it will fail horribly.
What's the next best thing? A hash, because when html5mode is off it works perfectly fine!
So why even turn HTML5 mode on? Well I had to, I have a couple things going on in the background that I need crawlers to read etc.
Crawlers? Why not just use prerender.io or another framework? 1-Money 2-Resources 3- Can we start coining the term... Instead of throwing money at a problem, let's throw a framework at it.
I'm not going to accept my answer because well it's a hack, but I know alot of people are faced with this after doing some searching. Hopefully someone / we can come up with a better solution to this!
This seems to work just fine for me with WP. This will skip to the actual resource if there is one and to index.php if not.
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.php [L]
Sample route which would render service if the url was /service or /home if the url was anything else.
$routeProvider
.when("/service", {
controller: "ServiceController",
templateUrl: "/wp-content/themes/angularjs-wp/templates/service/index.html"
})
.otherwise({
redirectTo: "/home"
});
$locationProvider
.html5Mode(true)

rewrite rule for htaccess to two seperate directories

On a single server i have a directory called app which has angular and another directory called api which has laravel installed.
I have the following for the angular code
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain.com$ [NC,OR]
RewriteCond %{HTTP_HOST} ^www.domain.com$
RewriteCond %{REQUEST_URI} !app/
RewriteRule (.*) /app/$1 [L]
which works fine now i need to add another rule where in angular i can use angulars $http to call www.domain.com/api/users and it will point to api/public/index.php which will in turn call the router and forward it to the correct controller
Has anyone done something like this?
You can insert a new rule for /api/users:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com$ [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^api/.+$ /api/public/index.php [L,NC]
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com$ [NC]
RewriteRule ^((?!app/).*)$ /app/$1 [L,NC]

Resources