AngularJS ui router - not showing nested partials views

Question

I have an AngularJs app with start up page as index.html, by default the projects view will be displayed and on top of the page I am showing a icon to show the todo items (for the logged-in user) which I am using bootstrap's data-toggle dropdown. The issue is whenever I click the todo link the partial view (todo.html) is not showing. BTW, I am new to the angular world so please forgive me if there is anything silly. Please see the code below:

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head></head>
<body>
    <a data-toggle="dropdown" class="dropdown-toggle" ui-sref=".todo">
        <i class="icon-tasks"></i>
        <span class="badge badge-grey">4</span>
    </a> 

    <div ng-view></div>
</body>

app.js

// For any unmatched url, redirect to /projects
$urlRouterProvider.otherwise("/projects");
//
// Now set up the states
$stateProvider
  .state('projects', {
      url: "/projects",
      templateUrl: "/app/views/projects/projects.html",
      controller: "projectController"
  })
  .state('projects.todo', {
      url: "/todo",
      templateUrl: "/app/views/todo/todo.html"          
  });

kaktooss · Accepted Answer · 2014-02-23 18:30:46Z

2

First of all replace ng-view with ui-view in the root template, cause it seems you want to use ui-router instead of ng-router.

Wrap the content of your template files with div of ui-view as a parent element.

/app/views/projects/projects.html
/app/views/todo/todo.html

<div ui-view>
   ... previously defined content ...
</div>

Let's say your view was

<div class="container">
    <div class="page-header">
        <h1>Title: {{title}}</h1>
    </div>
</div

you need to add ui-view to the div

<div class="container" ui-view>
    <div class="page-header">
        <h1>Title: {{title}}</h1>
    </div>
</div

or wrap your view with div containing ui-view descriptor in case your vie contains several tags. I cannot show you an example since you did not provide content of view files.

/app/views/projects/projects.html
/app/views/todo/todo.html

The issue is that after fist template applying angular does not see the place to put new template anymore.

edited Feb 23, 2014 at 18:30

answered Feb 18, 2014 at 17:15

kaktooss

413 bronze badges

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

1 Comment

user972255 Over a year ago

Thanks for your response. Sorry ng-view is a typo and I have ui-view only. Also, I couldn't understand what you are saying so can you please show me some example on how to do this?

Matt Way · Accepted Answer · 2014-02-14 15:36:23Z

0

ui-router isn't really supposed to be used in this way. To integrate bootstrap with angular you want to look at UI Bootstrap - http://angular-ui.github.io/bootstrap/

Then to achieve your drop down, look at their basic examples. If you want to use separate view files to define your drop down content, you can use <div ng-include="'mycontent.html'"></div>.

ui-router is useful if you have a complex view hierarchy, where you are for example, looking for dynamic loading of children, while keeping parent states static.

answered Feb 14, 2014 at 15:36

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

2 Comments

user972255 Over a year ago

I am not trying to integrate bootstrap with angular but just try to show a partial view in the data-toggle dropdown

Matt Way Over a year ago

And that is exactly what my answer explains how to do. Your bootstrap drop down won't work in angular without bootstrap integration, and you can use ng-include to setup your partial view.

Eduardo in Norway · Accepted Answer · 2014-08-19 15:13:53Z

In ui-router you defined all of this in the $stateProvider, so there you should define that you have a view that has another view belonging to it, example:

<!-- In index.html the main view  that will have all the page views-->
<div id="main" ui-view="main"></div>

<!-- In todo.html with a partial with the dropdown code in dropdown.html -->
<h1> This is a nice todo drop down </h1>
<div id="todoDropDown" ui-view="todoDropDown"></div>


//In your app file
    .state('projects.todo', {
                        url: '/todo',
                        views: {
                            'main@': {
                                templateUrl: '/app/views/todo/todo.html',
                                controller: 'TodoCtrl'
                            },
                            '[email protected]': {
                                templateUrl: '/app/views/partials/dropdown.html'
                            }
                        }
                    })

"[email protected]" This does the magic, it tells that this view has another view inside. And you can add controller to it and all other options you have in ui-router. In this way you can break up as much as possible reusable parts.

Collectives™ on Stack Overflow

AngularJS ui router - not showing nested partials views

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related