"base href" adds directory path in routing urls using ui-router

Question

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

That's what [`base href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) is supposed to do. If you don't want it to do that, don't use it...? — Heretic Monkey, Sep 23 '16 at 20:42
Are you using Angularjs' Html5Mode on? The hash is missing for the usual Angular routing behaviour. — Boris, Sep 26 '16 at 06:41
@Shreejibawa need to add base to provide the relative path to the assets of the application as i removed the hash tag from the urls — Debug Diva, Sep 26 '16 at 07:21
I'm not sure about your server configuration. If you are able to add virtual host in apache, then by setting document root to var/www/prod/public will do the job. — Jobin S Kumar, Sep 29 '16 at 12:32
@JobinSKumar, I totally agree with you but my website is hosted on shared hosting, so i am having cpanel and when i login into ftp there is public_html folder where i put my code. — Debug Diva, Sep 29 '16 at 16:01
old thread. $location.absUrl() can be used to set the path. You can always append the /prod/public , if you know your routing structure. Not a great practice though — tx fun, Sep 05 '17 at 19:04

score 3 · Accepted Answer · edited Oct 03 '16 at 22:59

3

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

edited Oct 03 '16 at 22:59

Debug Diva

26,058
13
70
123

answered Oct 03 '16 at 12:49

Jarratt

168
1
6

I need your small suggestion on the directory structure that i am currently having. I updated the question with current directory structure of the application. Please suggest me the structure that i have to implement now to resolve this thing. – Debug Diva Oct 05 '16 at 09:15

"base href" adds directory path in routing urls using ui-router

1 Answers1