0

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.

satya
  • 3,508
  • 11
  • 50
  • 130
  • 1
    It's hard to understand you question... – Sarjan Desai Oct 05 '15 at 12:04
  • @SarjanDesai : Check my file `dashboard.html` it has some list menu.I need here when user will click on any list option the respective page will bind in this same `dashboard.html` page. – satya Oct 05 '15 at 12:07
  • Do you want to have a common template which will load HTML as per route for diff templates ? – Anand G Oct 05 '15 at 12:07
  • http://stackoverflow.com/questions/15637350/nesting-ng-views-in-angular-js – jsNovice Oct 05 '15 at 12:08
  • @AnandG : I have one main template `index.html` .dashboard.html is binding in this main template.I need some template will be bind on this dashboard.html template according to the list option. – satya Oct 05 '15 at 12:09

3 Answers3

1

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 ...

Magus
  • 14,796
  • 3
  • 36
  • 51
0

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.

dendimiiii
  • 1,659
  • 3
  • 15
  • 26
0

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.

Sarjan Desai
  • 3,683
  • 2
  • 19
  • 32