Blank page using multiple views with UI-Router

Question

I followed this article and this other I've tried to replicate what's on the wiki, without any luck.

So far this is what I've done the folder structure:

• partial
  • index
    • index.html // inner view
    • index.css
    • index.js //controller
  • footer
    • footer.html
    • footer.js
  • header
    • // 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>

the url I'm browsing is: localhost:9001/#/index

I don't get any error just a blank page

Answer 1

Looks like you used incorrect paths on the templateUrl.

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

I also suggest reading the source code of http://angular-ui.github.io/ui-router/sample/#/ it has an abstract implementation here and many comments on how to work with ui-router properly.