javascript - AngularJS 中同一个 URL 的两种状态

Question

我在我的应用程序中设置了以下路由:

$stateProvider
    .state('splash',
    {
        url: '/',
        views: {
            'all': {
                templateUrl: 'partials/splash.html'
            }
        }
    })
    .state('home',
    {
        url: '',
        views: {
            'all': {
                templateUrl: 'partials/home.html'
            }
        }
    })
    .state('contents',
    {
        url: '/contents',
        views: {
            'all': {
                templateUrl: 'partials/contents.html'
            }
        }
    })

因此，当应用程序首次加载时，用户会看到启动页面，然后单击启动模板中的按钮来加载主状态。这允许我拥有一个没有历史记录或 URL 的状态，因此用户无法通过浏览器后退按钮返回初始页面(除非他们刷新页面)。

问题是，当用户导航到内容页面(再次通过主页上的按钮)时，这会创建一个历史条目并允许用户返回(这很好)，但点击后退按钮需要用户回到初始状态而不是主状态...

我怎样才能阻止这个？

Answer 1

由于我没有看到在上述状态中声明的 Controller ，因此我假设您的模板声明了 Controller 。所以..您可以通过将数据保存在变量中来动态更改 templateUrl，这是一个技巧:

var splashVisits = 0;
localStorage.setItem('splashVisit', JSON.stringify(splashVisits )); // save this in a service actually or like so in localStorage when app loads
$stateProvider
    .state('splash',
    {
        url: '/',
        views: {
            'all': {
                // make the template url a function which returns a different template based on number of splash visits.
                templateUrl: function(){
                    // read splashVisits
                    splashVisits = JSON.parse(localStorage.getItem('splashVisits')); // returns some value
                    if(splashVisits == 0){ 
                        splashVisits++;
                        localStorage.setItem('splashVisit', JSON.stringify(splashVisits ));
                        return 'partials/splash.html';
                    }
                    else 
                        return 'partials/home.html';
                }
            }
        }
    })

我自己实际上并没有尝试过这个，但我知道 templateUrl 接受一个函数。如果您设置了一个 plunker/jsfiddle，它将有助于测试这一点。

更新

$stateProvider
.state('splash',
{
    url: '/',
    controllerProvider: function($stateParams) {
        var ctrlName = null;
        splashVisits = JSON.parse(localStorage.getItem('splashVisits')); 
        if(splashVisits == 0){ 
            ctrlName = 'HomeCtrl';
        }
        return ctrlName;
    }
    views: {
        'all': {
            templateUrl: function(){
                // read splashVisits
                splashVisits = JSON.parse(localStorage.getItem('splashVisits')); // returns some value
                if(splashVisits == 0){ 
                    splashVisits++;
                    localStorage.setItem('splashVisit', JSON.stringify(splashVisits ));
                    return 'partials/splash.html';
                }
                else {
                    // force state change?
                    return 'partials/home.html';
                }
            }
        }
    }
})
.state('home', 
{ 
    url: '', 
    controller: 'HomeCtrl', 
    views: { 
        'all': { 
            templateUrl: 'partials/home.html' 
        } 
    } 
})
.state('contents',
{
    url: '/contents',
    views: {
        'all': {
            templateUrl: 'partials/contents.html'
        }
    }
})