Thomaspha Thomaspha - 4 months ago 16
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', 'agentApp.services'])

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

$urlRouterProvider.otherwise("/");

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





index.html



<!DOCTYPE html>
<html lang="en" ng-app="agentApp" ng-controller="validUserCtrl">
<head>
<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" />
</head>
<body ng-controller="homeCtrl" ng-cloak>
<div ui-view></div>
</body>
</html>





home.html



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

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

</div>

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

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

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





leftTree.html



<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>
</ul>
</div>





topBar.html



<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 }}
</a>
</div>
</nav>





ihome.html



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





footer.html



<footer>
<p> copyfight &copy; myapp
</footer>





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

Answer

I've made you jsfiddle with similar route definition. http://jsfiddle.net/vzmddcdL/

  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 ...so / + home = /home

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

Comments