AngularJS blur admin templateUrl won't load?

Question

This is my menu Transaksi > Sewa there is konfirmasi button which should load new page which contain form input and submit button on clicked.

My application in local language so to make it simple, it's rent car application, at sewa page there is list of rent car transaction, but not yet confirmed the payment. so the konfirmasi button take care of this.

If user click the konfirmasi button it will load some info based on transaction id (route params) and there is file input to upload payment proof from bank transfer and some submit button to upload to image to server and to update database status for current transaction.

I follow official documentation create to create Sewa page so My directory structure is something like app/pages/transaksi/transaksi.module.js, app/pages/transaksi/sewa/sewa.module.js

Here is transaksi.module.js code

(function () {
    'use strict';
    angular.module('BlurAdmin.pages.transaksi', [
        'BlurAdmin.pages.transaksi.sewa'
    ])
        .config(routeConfig)

        function routeConfig($stateProvider){
            $stateProvider
            .state('transaksi', {
                url: '/transaksi',
                template: '<ui-view></ui-view>',
                abstract: true,
                //templateUrl: 'app/pages/transaksi/transaksi.html',
                //controller: 'TransaksiCtrl',
                title: 'Transaksi',
                sidebarMeta: {
                    icon: 'ion-grid',
                    order: 100              
                }
            });
        }

})();

Here is sewa.module.js

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa', [])
        .config(routeConfig);

    function routeConfig($stateProvider){
        $stateProvider
            .state('transaksi.sewa', {
                url: '/sewa',
                templateUrl: 'app/pages/transaksi/sewa/sewa.html',          
                controller: 'SewaCtrl', //listing work normally
                title: 'Sewa',
                sidebarMeta: {
                    order: 0
                }
            })
            .state('transaksi.sewa.konfirmasi', {
                url: '/konfirmasi/:nomor_order_sewa',
                templateUrl: 'app/pages/transaksi/sewa/konfirmasi.html', //won't load
                controller: 'KonfirmasiCtrl',
                title: 'Konfirmasi Sewa', //but title is changed
                sidebarMeta: {
                    order: 0                
                }           
            });

    }   

})();

The controller loaded in app/pages/transaksi/sewa/sewaCtrl.js something like this

(function (){
    'use strict';

    angular.module('BlurAdmin.pages.transaksi.sewa')
        .controller('SewaCtrl', SewaCtrl)
        .controller('ModalCtrl', ModalCtrl)
        .controller('KonfirmasiCtrl', KonfirmasiCtrl);

function KonfirmasiCtrl($scope, $http, $routeParams){
    $scope.nomor_order = $routeParams.nomor_order_sewa;
    alert($scope.nomor_order);  
}



...
...

There is no error in console, and my templateUrl konfirmasi.html is exist and contain something simple as

<h1>ini halaman konfirmasi untuk order {{ nomor_order }}</h1>

So why when I click konfirmasi button the pages change only the tittle but templateUrl not loaded.

Maybe I have been doing wrong in sewa.module.js at konfirmasi route definition? or somewhere?

If you need more detailed please just comment.

score 0 · Answer 1 · edited May 23 '17 at 12:30

Jus't reading angular ui router nested views not working and read nested state abstrac usage exactly at this section

// Note: abstract still needs a ui-view for its children to populate.

// You can simply add it inline here.

and I'm start thinking maybe the page won't load because no container so with a little bit try and error.

I discover that I need to add <div ui-view></div> at sewa.html so now sewa.html looks like

<div ui-view>
    ...
    sewa.html content here
    ...
</div>

Thanks stackoverflow.

AngularJS blur admin templateUrl won't load?

1 Answers1