Summary :
When using <base href="/prod/public/" />
, it adds the directory path in routing urls e.x.
http://www.example.com/prod/public/home
My angular app is hosted in the prod/public
directory.
in my public/index.html
:
<base href="/prod/public/" />
my routes are like :
$stateProvider
.state('home', {
url: '/home',
templateUrl: function($stateParams) {
var path = 'app/users/views/home.html';
return path;
},
controller: 'HomeCtrl'
})
Directory structure :
public_html
-.htaccess
- other folders
- prod
- public
- app
- index.html
- bower.json
- .htaccess
- package.json
- gulpfile.js
- Readme.md
.htaccess
inside prod
directory :
RewriteEngine On
Options -Indexes
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ public/index.html [L]
and here is how I reference the state in the template :
<a ui-sref='home'>Go to home</a>
When click on this link it redirect to this url : http://www.example.com/prod/public/home
Requirement :
url should be http://www.example.com/home
instead of http://www.example.com/prod/public/home
The <base href="/prod/public/"/>
in angular routing is not to set the document root / Mask the url but to rather prepend urls with the defined url in HTML5 mode.
When you define a route eg /home
angular will correctly set the URL as /prod/public/home
. If you wish to have your urls without that folder structure then you will then need to put the files in the root directory (especially in the case of shared hosting) or alter the Nginix / Apache Document root setting to point to the correct path. You can then set the which will make your urls read as /home etc