Display multiple views using angular.js
Question
I want to display multiple views using angular.js router.I am explaining my code below.
index.html:
<body>
<div id="wrapper" ng-view>
</div>
</body>
Inside this body part i am binding the following partial html page.
dashboard.html:
<!-- begin TOP NAVIGATION -->
<nav class="navbar-top" role="navigation">
<div class="nav-top">
<div class="text-left" style="padding-top:10px; width:800px; float:left;">
<span style="font-weight:bold; font-size:18px; vertical-align:middle; color:#FFF">Channabasavashwara Institude of Technology</span>
</div>
<ul class="nav navbar-right" style="float:right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="profile.php">
<i class="fa fa-user"></i> My Profile
</a>
</li>
<li class="divider"></li>
<li>
<a class="logout_open" href="logout.php">
<i class="fa fa-sign-out"></i> Logout
<strong>Admin</strong>
</a>
</li>
</ul>
</li>
</ul>
<div class="text-right" style="padding-top:15px; width:400px; float:right;">
<span style="font-size:12px; vertical-align:middle; color:#FFF">
Logged in as Admin</strong></span>
<span style="font-size:12px; color:#999">| </span>
<span style="font-size:12px; vertical-align:middle; color:#FFF" id="header-time">
</span>
<span style="font-size:12px; color:#999">| </span>
</div>
</div>
<!-- /.nav-top -->
</nav>
<div id="page-wrapper" class="collapsed">
<div class="page-content">
<nav class="navbar navbar-default navbar-fixed-top" style="margin-top:50px">
<div class="container" style="width:1270px;">
<div class="navbar-header navbar-brand">
Computer Science & Engineering
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li class="dropdown">
<a href="#profile" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">College profile<span class="caret"></span></a>
</li>
<li><a href="#dept">Colg.Department</a></li>
<li><a href="#princpal">Princpal</a></li>
<li><a href="#dept_head">Dept Head</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--<div class="row" style="padding-top:90px;" ng-view>
</div>-->
</div>
</div>
In this above file I have some multiple option in li tag.i need when i will choose any one option another partial view lets say profile.html will bind in this above page only.You can check one ng-view tag is inside comment line. I have the below route file for index.html.
loginRoute.js:
var Admin=angular.module('Channabasavashwara',['ngRoute']);
Admin.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'dashboardview/login.html',
controller: 'loginController'
})
.when('/dashboard',{
templateUrl: 'dashboardview/dashboard.html',
controller: 'dashboardController'
})
.when('/profile',{
templateUrl: 'dashboardview/profile.html',
controller: 'profileController'
});
})
Please help em to resolve this problem.
3 answers
solution1
1 2015-10-05 12:09:00
If i understand your problem, you are looking for the Angular UI router : https://github.com/angular-ui/ui-router
It's an enhanced router. It can handle multiple views in views, nested routes/views, etc ...
solution2
0 2015-10-05 12:10:16
You can have only 1 ng-view. Most often it is used in your index.html ( as per definition in the overview part @ https://docs.angularjs.org/api/ngRoute/directive/ngView )
I heard ui-router comes in handy for your needs tho.
solution3
0 2015-10-05 12:13:11
dashboard.html is bind to <ng-view> using routeProvider . Include template say profile.html using ng-include and hide it's visibility based on $scope variable. If user select some option based on your logic, you can use ng-show for showing or hiding included template.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.