AngularJS ui-router unable to load templateUrl

Question

I have this kind of project structure:

index.html

<html>
  <head></head>
  <body ng-app="myApp">
      <div ui-view=""></div>
  </body>
</html>

bread.html

<div class="col-md-12">
This is the bread view.
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</div>

bread.js

'use strict';

angular.module('myApp')
.config(function ($stateProvider) {
$stateProvider
  .state('bread', {
    url: '/bread',
    views: {
      '@': {
        templateUrl: 'app/breadcrumbs/views/home.tpl.html',
      },
      'filters@bread': {
        templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
      },
    },
    controller: 'BreadCtrl'
  });
 });

The html files being loaded as templates are pretty simple. Just contain paragraph tags.

I have tried using nested views, but in the ui-view="filters" I am unable to load the template.

Pankaj Parkar · Accepted Answer · 2015-12-15 19:17:52Z

2

Basically you should put you bread.html in the base view of your state, and then load named-view from the views, @ stands for the base layout template here

.config(function ($stateProvider) {
$stateProvider
  .state('bread', {
    url: '/bread',
    views: {
      '@': {
        //I don't know the exact bread.html url, it can be different
        templateUrl: 'bread.html', //base layout which will make named-view available
      },
      'filters@bread': {
        templateUrl: 'app/breadcrumbs/views/home1.tpl.html',
      },
      'tabledata@bread': {
        templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
      },
      'graph@bread': {
        templateUrl: 'app/breadcrumbs/views/tabledata.tpl.html',
      },
    },
    controller: 'BreadCtrl'
  });
});

answered Dec 15, 2015 at 19:17

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Pankaj Parkar Over a year ago

@swateek Glad to help you..Thanks :)

swateek Over a year ago

One more question, was it because I wasn't loading all the ui-views my page was coming blank?

swateek Over a year ago

Uh..oh! Thanks a lot!

Pankaj Parkar Over a year ago

@swateek Cool..Cheers..Happy Coding.. :)

Andrew · Accepted Answer · 2015-12-15 19:32:30Z

0

If you want to use named views you must to specify name with ui-view directive. OR just place it as 'clean' directive without value: <div ui-view></div>

If you want to use nested view you need to create parent view and child view. In this case you firstly load your parent view inside main ui-view directive and then you load child view inside your parent view. So your parent view must also contain ui-view directive inside. In this case your states should be smth like this:

.state("parent", { url: "/parentSegment", templateUrl: "path to parent view" }) .state("parent.child", { url: "/childSegment", templateUrl: "path to your child view" })

The resulting url in this case will be protocol://host/parentSegment/childSegment

You can skip child segment in url just leaving url parameter empty for child:

.state("parent.child", { url: "/", templateUrl: "path to your child view" })

In this case you'll have protocol://host/parentSegment

As you can see, nested views are have 'prefix' in their names the same as the parent view name and child part of name is appended to it with dot (.)

For information about nested view refer to this link, and for more info about named view you should visit this link

answered Dec 15, 2015 at 19:32

Andrew

1,5344 gold badges20 silver badges29 bronze badges

2 Comments

swateek Over a year ago

Thank you Andrew, but there are other dependencies on the base index.html, so am not sure if I can move it from empty string to no-name.

Andrew Over a year ago

this are only examples. specify url for child state or leave it empty - your choice) its not of the thing that you must/need/have to have in your app

Collectives™ on Stack Overflow

AngularJS ui-router unable to load templateUrl

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related