Thomaspha Thomaspha - 1 year ago 58
AngularJS Question

angular ui-router nested views can't display?

I try modify my project to user angular ui-router, but it can't work,the views can't display,who can help me,thanks. The flowing is my file:

app.js, index.html, home.html, leftTree.html, topBar.html, ihome.html, footer.html

angular.module('agentApp', ['ngCookies', 'ui.router', 'agentApp.controllers', 'agentApp.directives', 'agentapp.filters', ''])

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


.state('index', {
url: '/',
templateUrl: 'tpls/home.html'
.state('index.home', {
views: {
"leftTree": {
templateUrl: "tpls/leftTree.html"
"topBar": {
templateUrl: "tpls/topBar.html"
"ihome": {
template: "tpls/ihome.html"
"footer": {
templateUrl: "tpls/footer.html"


<!DOCTYPE html>
<html lang="en" ng-app="agentApp" ng-controller="validUserCtrl">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind="title">Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Morris -->
<link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Gritter
<link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
<!-- Toastr style -->
<link href="css/plugins/toastr/toastr.min.css" rel="stylesheet" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<body ng-controller="homeCtrl" ng-cloak>
<div ui-view></div>


<div id="wrapper">
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<div ui-view="leftTree"></div>

<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom">
<div ui-view="topBar"></div>


<div class="wrapper wrapper-content" ng-cloak>

<div ui-view="ihome"></div>

<div class="footer">
<div ui-view="footer"></div>


<div class="siderbar-collapse">
<ul class="nav" id="side-menu">
<li>demo menu 1</li>
<li>demo menu 2</li>
<li>demo menu 3</li>
<li>demo menu 4</li>
<li>demo menu 5</li>


<nav class="navbar navbar-static-top white-bg" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a href="loginManager!logout.action">
<i class="fa fa-sign-out"></i>{{ 'Logout' | lan }}


<div>I am main home page</div>


<p> copyfight &copy; myapp

The attach file is I want the content display place
enter image description here

Answer Source

I've made you jsfiddle with similar route definition.

  1. Make index state an abstract.
  2. $urlRouterProvider.otherwise should point ("/home");
  3. index.home doesn't need / in url definition because it's a child state of index which already defines / in url / + home = /home

    .state('index.home', { url:'home', views: {