Zulhilmi Zainudin Zulhilmi Zainudin - 1 year ago 133
Javascript Question

AngularJS: UI Router doesn't load the inline template and controller

This is my first time using UI Router inside AngularJS project. I have a problem where when I click a link to view a post, it doesn't show up.

The post template is not showing and I'm still at the home page. I can see the URL flashing like

and attempt to change, but, it goes back to

Plunker: http://plnkr.co/edit/KV6lwzKUHrIZgVWVdrzt

What I am missing here?

Note 1: I already read UI Router documentation and I think I'm not missing anything.

Note 2: I'm following this tutorial (thinkster).

Note 3: I'm using SimpleHTTPServer
python -m SimpleHTTPServer 8000
command to serve this project.

This is my app.js:

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){

.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
.state('posts', {
url: 'posts/:id',
templateUrl: '/posts.html',
controller: 'PostsCtrl'




app.controller("PostsCtrl", ["$scope", "$stateParams", "postsFactory", function($scope, $stateParams, postsFactory){

// grab the right post from postsFactory posts array
$scope.post = postsFactory.posts[$stateParams.id];

And this is my index.html:



<script type="text/ng-template" id="/posts.html">
<div class="page-header">
<a ng-show="post.link" href="{{post.link}}">
<span ng-hide="post.link">

Answer Source

Issue in your code is in your router config for posts state. It should be like below. URL should be /posts/:id instead of posts/:id.

        .state('posts', {
            url: '/posts/:id',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download