2

as a sample program, I downloaded this plunker from a tutorial to test tab routing in different pages. I downloaded the complete zip and ran as it is (e.g. files in same directory, and links are CDN) but it didn't work. I think the angular file is not included as it was showing this output:

Click one of the following choices.

tab 1<br/>
tab 2

{{ path }}   //supposed to model the variable

But it works fine in the plunker. Is the problem with base href path or version? I tried including my own files for angular.min.js instead of the link but it still doesn't work.

Here's the html:

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="[email protected]"></script>
  <script src="http://code.angularjs.org/1.2.7/angular-route.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="plunker">
  <div ng-controller="NavCtrl">
    <p>Click one of the following choices.</p>
    <ul>
      <li ng-class="{active: isActive('/tab1')}"><a href="#/tab1">tab 1</a>
      </li>
      <li ng-class="{active: isActive('/tab2')}"><a href="#/tab2">tab 2</a>
      </li>
    </ul>
    <pre>{{ path }}</pre>
  </div>
  <div ng-view></div>
</body>

</html>
3
  • 1
    document.write('<base href="' + document.location + '" />'); wrong Commented Jul 11, 2014 at 7:17
  • Could you tell whats wrong? It works fine in the plunker I linked. Commented Jul 11, 2014 at 8:21
  • I think I agree with @DavidLin in that you are using the <base> tag incorrectly. It seems like you are attempting to use it to determine the location of files referenced on the page (that is <script> and <link> tags), but it only determines the base of links that might be visited (that is <a> tags). Commented Aug 15, 2014 at 5:27

2 Answers 2

1

Because document.location is returning to you an Object, try document.location.origin.

Sign up to request clarification or add additional context in comments.

2 Comments

Still not working. Why does the document.location works in the plunker as you can see?
When writing links inside of our Angular app in html5mode, we’ll never want to use relative links. If you are serving your app using the root, it won’t be a problem; however, if you are serving in any other base route, our Angular app won’t be able to handle it. Alternatively, you can set the base URL of your app using the <base> tag in the HEAD section of the HTML document: <base href="/base/url" /> so if you want make it dynamical you should get base url through document.location.origin
0

try with ng-href="tab1" instead of href="#/tab1"

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.