Angular.js ui-sref is not creating hyperlink

Question

I know this question might be stupid,but after searching through all over the stackoverflow and other blogs,and video tutorials,I have no other choice left than to ask this on stackoverflow. I have been learning Angular.js through online tutorials.

I have 2 files. index.html and app.js

Here is some snaps of my code.

States Configuration Part inside app.js

angular.module('flapperNews', ['ui.router']).config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {$stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl'
    })
    .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'PostsCtrl'
    })

$urlRouterProvider.otherwise('home')}]);

Inline templates inside index.html (1-home.html , 2-posts.html)

<ui-view></ui-view>
<script type="text/ng-template" id="/home.html">
  <!--home.html part-->
</script>
 <script type="text/ng-template" id="/posts.html">
  <!--posts.html part-->
</script>

inside home.html I have a hyperlink on Comments.

<div ng-repeat="post in posts | orderBy:'-upvotes'">
  <span class="glyphicon glyphicon-thumbs-up"
    ng-click="incrementUpvotes(post)"></span>
  {{post.upvotes}}
  <span style="font-size:20px; margin-left:10px;">
    <a ng-show="post.link" href="{{post.link}}">
      {{post.title}}
    </a>
    <span ng-hide="post.link">
      {{post.title}}
    </span>
    <span>
      <a ui-sref="/posts/{{$index}}">Comments</a>
    </span>
  </span>
</div>

Now when I run this WebApp on my localhost it is showing this rendered html of my Comment hyperlink,but it is not providing me any navigation(Hyperlink is not working).

<span>
     <a ui-sref="/posts/0">Comments</a>
</span>

Now,I have two questions:

1. What went wrong with ui-sref part.When I use href instead of ui-sref then it is working perfectly fine.Why is this happening?
2. I have been using inline templates for home.html and posts.html,but if I make them into separate files then my entire app gets broken.Why?

Any help would be appreciative.

Answer 1

1)The way you have used ui-sref is what is causing it to break.Try this in your application,

<a ui-sref="posts({ id: $index })">Comments</a>

2)Assuming your new template files are as same level as your index.html and app.js you need not mention as templateUrl: '/posts.html',just use templateUrl: 'posts.html'.