ui router is routing but not render the templateUrl

Question

I use UI-Router like this :

angular.module('app.user.awardee', [
    'ui.router'
])
    .config(
    [          '$stateProvider', '$urlRouterProvider',
        function ($stateProvider,   $urlRouterProvider) {
            $stateProvider
                .state('awardees', {

                    abstract: true,
                    url: '/u/awardee',

                    templateUrl: 'app/user/awardee/awardee.html',

                    resolve: {
                        awardees: ['awardees',
                            function( awardees){
                                return awardees.all();
                            }]
                    },


                    controller: ['$scope', '$state', 'users', 'utils',
                        function (  $scope,   $state,   users,   utils) {

                        }]
                })
                .state('awardees.personaldata', {
                    url: "/personaldata",
                    templateUrl: 'app/user/awardee/personal_info/personal/view.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })
                .state('awardees.personaldata.edit', {
                    url: "/edit",
                    templateUrl: 'app/user/awardee/personal_info/personal/edit.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })
                .state('awardees.univerisitydata', {
                    url: "/universitydata",
                    templateUrl: 'app/user/awardee/personal_info/university/view.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })
                .state('awardees.universitydata.edit', {
                    url: "/edit",
                    templateUrl: 'app/user/awardee/personal_info/university/edit.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })
                .state('awardees.bank', {
                    url: "/bank",
                    templateUrl: 'app/user/awardee/personal_info/bank/view.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })
                .state('awardees.bank.edit', {
                    url: "/edit",
                    templateUrl: 'app/user/awardee/personal_info/bank/edit.html',
                    controller: ['$scope', '$stateParams', '$state', 'utils', 'access',
                        function ($scope, $stateParams, $state, utils, access) {

                        }]
                })

        }
    ]
);

i route from 'awardees.personaldata' to 'awardees.personaldata.edit', the route is happend, url is changed but it not render 'awardees.personaldata.edit', it render 'awardees.personaldata'. nothing error in console, what is my false? and how to make it work?

I Use This code to transition :

<a ui-sref="awardees.personaldata.edit" class="btn btn-hollow btn-primary btn-sm">Edit Personal Data</a>

Answer 1

I would venture a guess that this, most likely, has to do with a missing ui-view.

The view of the parent state, in this case, "awardees.personaldata" has to have a ui-view somewhere for the child - "awardees.personaldata.edit" - to render its contents (just like "awardees" state's view has its ui-view, which I presume it does, since you can view "awardees.personaldata").

So, make sure that in the template: 'app/user/awardee/personal_info/personal/view.html' you have something like:

<div>
  <span>Some data from "awardees.personaldata" state</span>

  <!-- space to render "awardees.personaldata.edit" state -->
  <div ui-view></div>
</div>