javascriptangularjsangular-ui-routerng-adminhtml5mode

How to prevent reloading of whole ng-admin after refresh page


I've stucked on problem with refreshing pages. Example: base app opens and url is localhost:8000/dashboard, then i go to users tab from menu or anywhere else and url is localhost:8000/users/list. If i refresh page while on users then it will go to dashboard again reloading the whole page.
Backend is handling it properly, when i made a custom state and dont specify 'ng-admin' as parent it stays where it is just doing refresh, but when i add parent to state it is reloading the whole app again. There is also html5mode enabled.

$locationProvider.html5Mode({
   enabled: true,
   requireBase: false
});

Entity is added as ng-admin docs specify:

app.config(['NgAdminConfigurationProvider', 'RestangularProvider', function(nga, RestangularProvider) {
     var admin = nga.application('Admin') // application main title
        .debug(false) // debug disabled
        .baseApiUrl('/api/'); // main API endpoint

     var users = nga.entity('users');

     admin
         .addEntity(users);
     users.listView()
          .title('Admin users')
             .fields([
                nga.field('name')
                   .label('Name')
                   .isDetailLink(true),
                nga.field('email')
                   .label('E-mail Address'),
                nga.field('created', 'date')
                   .label('Created')
                   .map(fromNow),
                nga.field('modified', 'date')
                   .label('Modified')
                   .map(transformDate),
                nga.field('active', 'boolean')
                   .label('Status'),
                nga.field('createdBy')
                   .label('Created by'),
                ]);

The next block of code

$rootScope.$on('$stateChangeSuccess', function (event, newUrl, oldUrl, newState, oldState) {
    console.log('event:' , event);
    console.log('newUrl:' , newUrl);
    console.log('oldUrl:' , oldUrl);
    console.log('newState:' , newState);
    console.log('oldState:' , oldState);
})

it gives output when going to users from dashboard:

event: {name: "$stateChangeSuccess", targetScope: p, defaultPrevented: false, currentScope: p, preventDefault: ƒ}   
newUrl: {url: "?{search:json}&{page:int}&sortField&sortDir", params: {…}, parent: "listLayout", views: {…}, name: "list"}
oldUrl: {entity: "users", search: {…}, page: 1, sortField: null, sortDir: null}   
newState: {parent: "ng-admin", url: "/dashboard?sortField&sortDir", params: {…}, controller: "DashboardController", controllerAs: "dashboardController", …}   
oldState: {sortField: null, sortDir: null}

And on refresh

event: {name: "$stateChangeSuccess", targetScope: p, defaultPrevented: false, currentScope: p, preventDefault: ƒ}  
newUrl: {parent: "ng-admin", url: "/dashboard?sortField&sortDir", params: {…}, controller: "DashboardController", controllerAs: "dashboardController", …}  
oldUrl: {sortField: null, sortDir: null}  
newState: {url: "?{search:json}&{page:int}&sortField&sortDir", params: {…}, parent: "listLayout", views: {…}, name: "list"}  
oldState: {entity: "users", search: {…}, page: 1, sortField: null, sortDir: null}

Any ideas appreciated.


Solution

  • Problem was that i have a mistake in header controller function that adds method to go to dashboard and it was called every time header is reinitializing. Maybe this will help someone.