CODEWITHSUNDEEP
angularjsroutesangular-ui-routersingle-page-applicationangularjs-routing
swateek
swateek

Reputation: 7570

AngularJS ui-router unable to load templateUrl

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.

Upvotes: 3

Views: 4566

Answers (2)

Andrew
Andrew

Reputation: 1534

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

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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'
  });
});

Upvotes: 2

Related Questions