CODEWITHSUNDEEP
angularjsangular-ui-router
gerl
gerl

Reputation: 1181

UI-Router displaying white page without errors

I'm using UI-Router for an app but I cant for the life of me understand why the page is blank. None of the template urls are displaying. Here's the plunkr

layout.html

<div ui-view="form"></div>
sdagas
<div ui-view="results"></div>

form

This is the form page

results

Results

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("index", {
    url: "/",
    abstract: true,
    templateUrl: 'layout.html',
    controller: 'MainController',
    controllerAs: 'main'
  })
  .state('index.layout', {
    abstract: true,
    url: 'layout',
    views: {
      'form' : {
        templateUrl: 'form.html'
      },
      'results': {}
    }
  })
  .state('index.layout.results', {
    url: '/results',
    views: {
      'results@layout': {
        templateUrl:  'results.html'
      }
    }
  });

  $urlRouterProvider.otherwise('/');
});

app.controller('MainController', function($state) {
  console.log($state);
  console.log('hello');
});

Upvotes: 1

Views: 904

Answers (3)

Bilal
Bilal

Reputation: 2673

From ui-router wiki:

An abstract state can have child states but cannot get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

You made root state abstract: true so it can't be transitioned.

Update:

ui-sref="/" should contain state name not the url path itself. If you really want to use url path then you should use href="/"

Plunkr

Update:

You also missed ng-app="app" in your html.

<html ng-app="app">

Upvotes: 0

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

I updated a plunker which is working here

The way how we can call state resuts is:

ui-sref 
<a class="brand" ui-sref="index.layout.results">
href
<a class="brand" href="#/layout/results">

We can never navigate to state which is abstract. So we cannot go to index or layout

To make the plunker running I also introduced the ng-app="app":

<!DOCTYPE html>
<html ng-app="app">

which does start up the app

Also, because the '/' is otherwise but abstract I used another setting to go to some non abstract state

$urlRouterProvider.when('/', '/layout/results');
$urlRouterProvider.otherwise('/');

And finally (but almost the most important), this is the updated super child state, which does target the named view not in layout but in index state

.state('index.layout.results', {
  url: '/results',
  views: {
    // wrong
    //'results@layout': {
    // this target is in the super parent
    'results@index': {
      templateUrl: 'results.html'
    }
  }
});

Check it here

Upvotes: 0

Razvan B.
Razvan B.

Reputation: 6771

Firstly, there is no ng-app declared in your plunker.. You should have ng-app="app" on your html tag.

Secondly, like @Bilal said, you can't have abstract:true on the states you want to transition to.

Moreover, your ui-sref should point to the states:

<a class="brand" ui-sref="index">home</a> 
|
<a class="brand" ui-sref="index.layout">ui-router</a>

Here is your updated plunker

Upvotes: 1

Related Questions