Why does adding a url key to the state object cause a nested view NOT to display?

Question

My index.html has a ui-view where I display greeting.html, and greeting.html has a ui-view where I am trying to display greeting.planet.html:

greeting.planet.html:

<div>world!</div>

greeting.html:

<div>Hello</div>
<div ui-view></div>  #NESTED VIEW HERE************

index.html:

<!DOCTYPE html>
<html ng-app="myapp">  #APP DIRECTIVE HERE************

<head>
  <title>Test</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <link href="app.css" rel="stylesheet">

</head>

<body ng-controller="MainCtrl">  #MainCtrl CONTROLLER HERE*********

<div class="container">
  <div class="jumbotron text-center">
    <h1>Test App</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div ui-view></div>   #NESTED VIEW HERE**********
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script>
<script src="app.js"></script>
</body>
</html>

When I navigate to http://localhost:4444/index.html, the following code succeeds in displaying the nested views:

app.js:

var app = angular.module("myapp", ['ui.router']);

app.config([
'$urlRouterProvider',
'$stateProvider',
function($urlRouterProvider, $stateProvider) {
  $urlRouterProvider.otherwise('greeting');

  $stateProvider
    .state('greeting', {
      //url: '/greeting',
      templateUrl: 'greeting.html'
    })

    .state('greeting.planet', {
      //url: '/planet',
      templateUrl: 'greeting.planet.html'
    });

}]);

app.controller('MainCtrl', ['$state', function($state) {
  $state.transitionTo('greeting.planet');
}]);

But if I uncomment the url keys in the states, then greeting.planet.html doesn't display. Why?

I believe that every state should have "url" except parent state. Because using that URL only, router getting template and put it in view. — Asik, Nov 22 '14 at 07:42
@Asik, Thanks for taking a look. What do you think about this: 1) https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states and this: 2) https://github.com/angular-ui/ui-router/wiki#activating-a-state — 7stud, Nov 22 '14 at 07:58
...and this: `Routing was not an afterthought to the state mechanics, but was figured into the design from the beginning (all while keeping states separate from url routing)` https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-routing-for-nested-states If url routing is separate from states, how can adding a url to a state break the code? — 7stud, Nov 22 '14 at 08:06

Radim Köhler · Answer 1 · 2014-11-22T19:35:23.137

0

I created a plunker here, which uses your state defintions - with url:

$stateProvider
    .state('greeting', {
      url: '/greeting',
      templateUrl: 'greeting.html'
    })

    .state('greeting.planet', {
      url: '/planet',
      templateUrl: 'greeting.planet.html'
    });

and it is working. check it here

What is important to mention, I used the latest version of to UI-Router 0.2.13 (fixes some issues, simply always use the latest)

I also removed the $urlRouterProvider.otherwise('greeting'); - redundant setting. It should navigate to default url, not a state name. So it would work with $urlRouterProvider.otherwise('/greeting'); ... but default navigation is in your example done inside of MainCtrl... Anyway, this setting is useful, to handle any unintended state... do not forget to pass the url to existing state

EXTEND: Based on the comments, I created even more "similar" plunker here

The most important changes are: angular 1.3 and ui-router 0.2.13

<script data-require="angular.js@*" 
     data-semver="1.3.1" 
     src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="ui-router.js"></script> // 0.2.13

And also, used explicit redirection: $urlRouterProvider.otherwise('/greeting/planet');

edited Nov 22 '14 at 19:35

answered Nov 22 '14 at 08:09

Radim Köhler

122,561
47
239
335

Your code works with ui-router 0.2.11...but your code isn't my code. – 7stud Nov 22 '14 at 18:45
And that means? Or just a note? – Radim Köhler Nov 22 '14 at 18:54
I'm trying to understand why my code doesn't work. Your explanation seemed to be that I'm using a broken version of ui-router, but my code doesn't work with version 0.2.13 either. – 7stud Nov 22 '14 at 18:59
I am trying to say: I created a plunker, which I intended to be as much the same as yours as possible. To show you, that make UI-Router running is not so difficult. It could be tricky, but at the end, it is not. I tried to point out, that with angular 1.3, only version 0.2.12+ is working. 0.2.11 is not working with 1.3. So now, if you still have problems, and can you reveal to me what is wrong... glad to assist... – Radim Köhler Nov 22 '14 at 19:12
I followed your snippets even more, and created/updated plunker to be as much as yours... http://plnkr.co/edit/rXLJN8hWZXBXdDjaLxiC?p=preview. Hope now it could help you. Good luck with UI-Router – Radim Köhler Nov 22 '14 at 19:19
Ahem. Your new plunker does not display `Hello world!`, so it is not working correctly. If I comment out the urls in the states, then it works correctly. My question is: why does specifying a url in a state affect which states are active? Based on what I read at the links in my comment under my question, I don't understand what is going on. – 7stud Nov 22 '14 at 19:30
I do notice that what @Asik said seems to be true for ui-router version 0.2.13, namely that if I comment out the url in just the parent state, then the code displays `Hello world!`. However, there is nothing in the docs at the links I posted that mentions anything about that. In fact, the examples use urls for both the parent and child states. – 7stud Nov 22 '14 at 19:35
Sorry I missed essential fix of your code: `otherwise`. It should be set to some existing state's url ... I selected the '/greeting/planet'. Now plunker is working. And: you are overcomplicating your searching... UI-Router is simple but powrful tool. Check my plunker you should see that it is not complicated... Finally, state does not have to have url (but it is extreme, and I would not suggest that) check example here: http://stackoverflow.com/a/25591908/1679310 – Radim Köhler Nov 22 '14 at 19:36

Why does adding a url key to the state object cause a nested view NOT to display?

1 Answers1