Blank page using multiple views with UI-Router

angular-ui-router, angularjs, angularjs-routing

Solution

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.

Problem

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

Original source