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

Question

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 http://localhost:8000/#/posts/1 and attempt to change, but, it goes back to http://localhost:8000/#/home.

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){

    $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 my index.html:

<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>

Note that you are linking to #posts/:id, while the router is set-up to respond to /posts/:id. — Vlad Lego
– Vlad Lego, Commented Jan 10, 2016 at 15:18

Arkantos · Accepted Answer · 2016-01-10 15:46:38Z

2

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.

 $stateProvider
        .state('posts', {
            url: '/posts/:id',
            templateUrl: '/posts.html',
            controller: 'PostsCtrl'
        });

edited Jan 10, 2016 at 15:46

answered Jan 10, 2016 at 15:16

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2016-01-10 15:16:30Z

1

You are basically missing / slash at the start of your posts state URL, because of / is missing it was redirecting to .otherwise rule of $urlRouterProvider

Code

.state('posts', {
    url: '/posts/:id',
    templateUrl: '/posts.html',
    controller: 'PostsCtrl'
});

answered Jan 10, 2016 at 15:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Comments

Fge · Accepted Answer · 2016-07-30 22:40:20Z

0

You also need to add $locationProvider.html5Mode(true); in the app.config block and <'base href="/"'> in the head section of your HTML file.

Otherwise, the #/posts/:id routing won't work.

edited Jul 30, 2016 at 22:40

Fge

2,9614 gold badges25 silver badges37 bronze badges

answered Jan 10, 2016 at 15:26

Vlad Lego

1,7081 gold badge18 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related