首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >刷新不再适用于angular-ui-router

刷新不再适用于angular-ui-router
EN

Stack Overflow用户
提问于 2016-10-25 17:02:10
回答 1查看 99关注 0票数 0

昨天,我在我的AngularJS应用程序(Angular 1.4)中从ngRoute切换到了angular-ui-router

我面临的问题是,如果我通过链接/按钮到达一个页面,一切正常,但如果我刷新页面(ctrl+r),视图就不会显示。代码如下:

app.js

代码语言:javascript
复制
.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服务器配置:

代码语言:javascript
复制
app.all('/*', function(req, res) {
    res.sendfile('app/index.html');
});

我也尝试过

代码语言:javascript
复制
app.get('/*', function(req, res) {
    res.sendfile('app/index.html');
});

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

EN

回答 1

Stack Overflow用户

发布于 2016-10-25 17:36:19

您的问题出在服务器配置上。

代码语言:javascript
复制
$locationProvider.html5Mode(true);

您可以按此行从url中删除hashtag。当您刷新页面时,宿主将尝试访问您在浏览器url中定义的文件或文件夹。您应该使用重写路径方法来访问服务器或本地服务器上的index.html

express服务器示例:

代码语言:javascript
复制
app.route('/*')
    .get(function(req, res) {
      res.sendfile(app.get('appPath') + '/index.html');
    });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/40235709

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档