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.

@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
– satya, Commented Oct 5, 2015 at 12:07
Do you want to have a common template which will load HTML as per route for diff templates ? — Anand G
– Anand G, Commented Oct 5, 2015 at 12:07
@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
– satya, Commented Oct 5, 2015 at 12:09

Magus · Accepted Answer · 2015-10-05 12:09:00Z

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

answered Oct 5, 2015 at 12:09

Magus

15.1k4 gold badges39 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dendimiiii · Accepted Answer · 2015-10-05 12:12:41Z

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.

edited Oct 5, 2015 at 12:12

answered Oct 5, 2015 at 12:10

dendimiiii

1,6893 gold badges16 silver badges26 bronze badges

2 Comments

satya Over a year ago

@ dendimiiii : so for this type of scenario i have to use ui-router.right ?

dendimiiii Over a year ago

for views inside views, yes.

Sarjan Desai · Accepted Answer · 2015-10-05 12:18:56Z

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.

edited Oct 5, 2015 at 12:18

answered Oct 5, 2015 at 12:13

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Display multiple views using angular.js

3 Answers 3

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Linked

Related