Search code examples
javascripthtmlangularjsangular-ui-router

AngularJS : Change URL, But not the controller or template load for browser back and forward buttons


I have a parent / child scheme set up with ui router. State load successfully with template and controller when i click button or href in loaded page. But when i click browser back button or then forward button, it change the url, but nothing happens. (I added correctly, whole app works fine when click manually)

Also there is another information that you need to know, I'll mention it here as a example.

There is a "Create an Account" button in Signing form. When i click it URL changes from /#/login to /#/signup. Then, if i clicked back button in browser, it will change the URL back to /#/login, but nothing happens and I'm still in the signup view. Then if i move my cursor to text field in signup page and click it, template will change to signing view immediately.

I tried lot of ways to solve this since one week, but still can't to find the solution. If anyone can help to solve this, really appreciate. Thank You!

Here is my app.js

    var app = angular.module('inspinia', [
            'ui.router',                    // Routing
            'oc.lazyLoad',                  // ocLazyLoad
            'ui.bootstrap',
            'angularSpinner',                  // Ui Bootstrap
            'oitozero.ngSweetAlert', 
            'ngTable',
            'ngResource',
            'angularUtils.directives.dirPagination',
            'ngTagsInput'
        ]);
    app.config(function($stateProvider, $urlRouterProvider, $ocLazyLoadProvider)   {
    $urlRouterProvider.otherwise('/login');

    $stateProvider
        .state('index', {
            abstract: true,
            url: '/index',
            cache: false,
            templateUrl: 'views/common/content.html',
        })
        // Login View
        .state('login', {
            url: '/login',
            cache: false,
            templateUrl: 'views/login.html',
            controller: 'LoginController',
            data: { pageTitle: 'Login', specialClass: 'gray-bg' }
        })
        // Signup View
        .state('register', {
            url: '/signup',
            cache: false,
            templateUrl: 'views/signup.html',
            controller: 'RegisterController',
            data: { pageTitle: 'Signup', specialClass: 'gray-bg' },
            resolve: {
                loadPlugin: function ($ocLazyLoad) {
                    return $ocLazyLoad.load([
                        {
                            name: 'ngCookies',
                            files: ['js/angular/angular-cookies.min.js'],
                            cache: false
                        }
                    ]);
                }
            }
        })
});

Solution

  • This problem was caused by some CDNs in index.html. I tried removing one by one, and found what I need to remove.