Changing the URL of the UI router, but not the page

Question

I cannot get the UI Router to work correctly on my page. It works great for navigation links, but not for the specific section I'm working on. I was able to recreate the problem in plnkr ( http://plnkr.co/edit/unQKWfkoSGdqaoncEPgG ) and even compared it to the "official" plnkr, which works fine, and I don’t know. There are no differences. When I click the link, the URL changes, but the new page is not displayed.

$stateProvider
.state('home', {
  abstract: true,
  url: '/home',
  templateUrl: 'home.html',
  controller: function($scope){}
})
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html',
  controller: function($scope){}
});

Here where the link is clicked:

<a ui-sref='.edit({id: 1})'>Go to edit</a>

Any help is appreciated. Thank!

Answer 1

Here is the updated plunk with this update

<h4>resource index list</h4>
<ul>
  <li><a ui-sref='.edit({id: 1})'>Go to edit</a>
  <!-- 
     this line below was added
     it is an anchor/target for unnamed view
     defined in the home.resource.edit state
   -->
  <div ui-view=""></div>
</ul>

, , , :

// this is the parent state
.state('home.resource', {
  url: '/resource',
  templateUrl: 'resource.list.html',
  controller: function($scope){}
})

// child state needs its own target <div ui-view="">
.state('home.resource.edit', {
  url: '/edit/:id',
  templateUrl: 'resource.edit.html', // this template will be injected into parent
  controller: function($scope){}
});

. ui-view, . . , plunker :

.state('home.resource.edit', {
  url: '/edit/:id',
  views : {
  '@home' : { 
    templateUrl: 'resource.edit.html',
    controller: function($scope){}
    }
  }
});

:

-

, viewname@statename, viewname - , , - , . contact.item. .