A blank page using multiple views using the UI-Router

Question

I followed this article , and this other I've tried to reproduce what is on the wiki, with no luck.

So far, this is what I have done the folder structure:

• partial
  • index
    • index.html // internal view
    • index.css
    • index.js // controller
  • footnote
    • footer.html
    • footer.js
  • heading
    • // same structure
• index.html // main file

stateProvider:

angular.module('app').config(function($stateProvider, $urlRouterProvider) { $stateProvider.state("index", { url: "/index", templateUrl:'/partial/index.html', views: { ' footer@index ': { templateUrl: "/partial/header.html", controller:"FooterCtrl" }, ' header@index ': { templateUrl: "/partial/header.html", controller: "HeaderCtrl" } } }); $urlRouterProvider.otherwise('/index'); 

EDIT:

this is the markup:

 <div> <div id="content" class="container"> <div ui-view="header"></div> <div ui-view></div> <div ui-view="footer"></div> </div> </div> 

URL I'm looking at: localhost: 9001 / # / index

I get no error just a blank page

Answer 1

It looks like you used the wrong paths on the url template.

Here the plunker uses ui-router: http://plnkr.co/edit/Nqwlkq1vGh5VTBid4sMv?p=preview

I also suggest reading the source code http://angular-ui.imtqy.com/ui-router/sample/#/ , there is an abstract implementation and a lot of comments on how to work with ui-router properly.

Answer 2

do not leave a slash at the end of the URL

not working: http://sjhite.com/questions/23924587 /

working: http://sijhte.com/questions/23924587