How to make nested states in angular?

Question

JavaScript

There is a code

$stateProvider
    .state('app', {
      abstract: true,
      name: 'app',
    })
    .state('routes', {
      url: "/routes/:id",
      templateUrl: "/templates/routes/show.html",
      controller: 'route-show-ctrl'
    })

    .state('routes.edit', {
      url: "/edit/",
      templateUrl: "/templates/routes/edit.html",
      controller: 'route-edit-ctrl'
    })

As I understand it, when editing, the view should be displayed, but the view of the parent component is displayed

Answer 1

The routes state is not abstract. abstract: true is needed so that the ui-router understands that this state has child states.
Example

$stateProvider
    .state('contacts', {
        abstract: true,
        url: '/contacts',
        templateUrl: 'contacts.html',
        controller: function($scope){
            $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
        }           
    })
    .state('contacts.list', {
        url: '/list',
        templateUrl: 'contacts.list.html'
    })
    .state('contacts.detail', {
        url: '/:id',
        templateUrl: 'contacts.detail.html',
        controller: function($scope, $stateParams){
          $scope.person = $scope.contacts[$stateParams.id];
        }
    })

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>

<!-- contacts.list.html -->
<ul>
    <li ng-repeat="person in contacts">
        <a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
    </li>
</ul>