Question

昨天我在AngularJS应用程序（Angular 1.4）中从ngRoute切换到angular-ui-router。

我面临的问题是，如果我通过链接/按钮到达页面，一切正常，但如果我刷新页面（ctrl + r），则不显示视图。这是代码：

app.js

.config(['$stateProvider', '$locationProvider', 'ngClipProvider', "$urlRouterProvider", function($stateProvider, $locationProvider, ngClipProvider, $urlRouterProvider) { 
    $urlRouterProvider.when('/account', '/account/company');
    $urlRouterProvider.when('/', '/user_info');  
    var states = [
        {
            name: 'home',
            url: '/home',
            templateUrl: 'home/home.html'
        },
        {
            name: 'landing',
            url: '/',
            templateUrl: 'landing/landing.html',
        },
        .....
    ];
    states.forEach(function(state) {
        $stateProvider.state(state);
    });
    ngClipProvider.setPath("bower_components/zeroclipboard/dist/ZeroClipboard.swf");

    $locationProvider.html5Mode(true);
}]).
run(['$rootScope', '$location', 'Session', '$routeParams', 'store', '$route', "$urlRouter", function($rootScope, $location, Session, $routeParams, store, $route, $urlRouter){
    $rootScope.$on('$routeChangeStart', function(event, next) {
        if (typeof(next) !== 'undefined') {
            if (store.get('userId') !== null && (next.$$route.originalPath.indexOf('login') > 0 || next.$$route.originalPath.indexOf('signup') > 0 || next.$$route.originalPath.indexOf('accountant_sign_up') > 0 || next.$$route.originalPath.indexOf('partner_sign_up') > 0 || next.$$route.originalPath == '/')) {
                $location.path('/home');
            }

            if (typeof $route.routes[next.$$route.originalPath].data == "undefined") {
                console.log('skipped needAuth');
            } else {
                if ($route.routes[next.$$route.originalPath].data.needAuth) {
                    if (store.get('userId') == null){
                        event.preventDefault();
                        $location.path('/login');
                    }
                }

                if ($route.routes[next.$$route.originalPath].data.noBackground) {
                    var el = document.getElementById('main-background');
                    el.className += ' company-background';
                    $rootScope.random = null
                } else {
                    $('.company-background').css('background-image', "url('')");
                    $rootScope.random = Math.floor((Math.random() * 4) + 1);
                }
            }
        } else {
            event.preventDefault();
        }
    });
}]).

我错过了什么吗？

编辑：

这是我的express.js服务器配置：

app.all('/*', function(req, res) {
    res.sendfile('app/index.html');
});

我也试过

app.get('/*', function(req, res) {
    res.sendfile('app/index.html');
});

刷新时应用程序仍未显示视图。

Answer 1

您的问题在于服务器配置。

$locationProvider.html5Mode(true);

您可以通过此行从网址中删除主题标签。刷新页面时，主机会尝试访问您在浏览器网址中定义的文件或文件夹。您应该使用重写路径方法来访问服务器或本地服务器上的index.html。

快速服务器示例：

app.route('/*')
    .get(function(req, res) {
      res.sendfile(app.get('appPath') + '/index.html');
    });

使用angular-ui-router，刷新功能不再起作用

1 个答案: