CODEWITHSUNDEEP
javascriptangularjs
ArcC
ArcC

Reputation: 75

Angularjs routing not working with base href

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>

Upvotes: 2

Views: 1941

Answers (2)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

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

Upvotes: 1

t0mpl
t0mpl

Reputation: 5025

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

Upvotes: 0

Related Questions