I am trying out UI Router for the first time in my AngularJS project. I am facing an issue where, when I click on a link to view a post, it doesn't display.
The post template is not visible and I remain on the home page. The URL flashes as http://localhost:8000/#/posts/1 briefly and then reverts back to http://localhost:8000/#/home.
Link to Plunker for reference: http://plnkr.co/edit/KV6lwzKUHrIZgVWVdrzt
What could be the missing piece here?
Note 1: I have already gone through the UI Router documentation and believe that I haven't missed anything.
Note 2: I am following a tutorial from thinkster, available at this link.
Note 3: I am using SimpleHTTPServer with the command python -m SimpleHTTPServer 8000 to serve this project.
Below is the code snippet from my app.js:
app.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');
}]);
...
app.controller("PostsCtrl", ["$scope", "$stateParams", "postsFactory", function($scope, $stateParams, postsFactory){
// grab the right post from postsFactory posts array
$scope.post = postsFactory.posts[$stateParams.id];
console.log($scope.post);
}]);
And this is the section of my index.html file:
<ui-view></ui-view>
...
<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<h3>
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</h3>
</div>
</script>