admin管理员组

文章数量:1392007

I am facing very strange issue with AngularJS routes. I have certain folder structure 

js -> Angular -> 
css -> Bootstrap ->
index.html

All the routes runs fine when hosted on some server like IIS. But I copy the entire directive & paste in some other location or share with someone. If they run with file system they start getting Files not found error.

This is my how index.html looks like.

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width" />
      <base href="" />
      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
    <!--content-->
    <!--menu tabs-->
    <div class="col-md-12" style="margin-top:10px;">
     <a href="/car"> CAR</a> <br/>
     <a href="/mobile">Mobile</a>
    </div>
    <!--angular template placeholder-->
    <div ng-view> </div>
    <!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>

This 404 issue arises only when I have base tag present in the html.If I remove it, page renders fines. But this stops running angular routing.

I got an email from my senior that I shouldn't be specifying absolute path but I don't find anyplace in my index.html where I have specified absolute path(s).

So how do I specify relative path, so that anyone who has the same folder structure can run the demo app??

Any help/suggestion highly appreicated.

I am facing very strange issue with AngularJS routes. I have certain folder structure 

js -> Angular -> 
css -> Bootstrap ->
index.html

All the routes runs fine when hosted on some server like IIS. But I copy the entire directive & paste in some other location or share with someone. If they run with file system they start getting Files not found error.

This is my how index.html looks like.

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width" />
      <base href="" />
      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
    <!--content-->
    <!--menu tabs-->
    <div class="col-md-12" style="margin-top:10px;">
     <a href="/car"> CAR</a> <br/>
     <a href="/mobile">Mobile</a>
    </div>
    <!--angular template placeholder-->
    <div ng-view> </div>
    <!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>

This 404 issue arises only when I have base tag present in the html.If I remove it, page renders fines. But this stops running angular routing.

I got an email from my senior that I shouldn't be specifying absolute path but I don't find anyplace in my index.html where I have specified absolute path(s).

So how do I specify relative path, so that anyone who has the same folder structure can run the demo app??

Any help/suggestion highly appreicated.

  • javascript
  • html
  • css
  • angularjs
Share Improve this question edited Jun 10, 2017 at 17:25 georgeawg 49k13 gold badges77 silver badges98 bronze badges asked Jun 9, 2017 at 14:41 Kgn-webKgn-web 7,58531 gold badges107 silver badges176 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

Have you tried:

<base href="/" />

If you are deploying your app into the root context (e.g. https://myapp./), set the base URL to /:

<head>
  <base href="/">
  ...
</head>

If you are deploying your app into a sub-context (e.g. https://myapp./subapp/), set the base URL to the URL of the subcontext

<head>
  <base href="/subapp/">
  ...
</head>

Angular Docs $location/nobase

Angular Docs $location

In regards to absolute paths, <a href="/car"> CAR</a> is not quite an absolute path, however it does force the browser to look back at the ROOT directory of the web server to look for the route. So, if someone you share with mounts the app to a sub-directory, then this will most likely cause the error.

In that event, they should set the <base href="to-wherever-they-put-the-thing" /> on their web server, OR you should specify to run it in the ROOT directory of a web server.

Use:

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <!--
      <base href="" />
      -->
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>

      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>

本文标签： javascripthow to specify relative path in base url in AngularJSStack Overflow

版权声明：本文标题：javascript - how to specify relative path in base url in AngularJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744773451a2624482.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。