热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

重新加载角度应用后没有index.html

如何解决《重新加载角度应用后没有index.html》经验,求助如何解决?

我有一个angular.js应用程序,其基本设置如下:我index.html渲染静态内容,如Top/Sidebar.在里面我必须

显示部分html文件,例如我的home.html

在我登录我的应用程序后index.html,它的控制器MainCtrl加载以及我home.html的相应的加载HomeCtrl.所以到目前为止应该是一切.

在我实现了一个修复程序之后(这样重新加载就不会"忘记"用户并且我没有注销 - 我基于http://www.sitepoint.com/implementing-authentication-angular-applications/上的示例)我尝试过重新加载我的页面.但现在只有我的home.html负荷.

注意:我在下面编辑了我的发现

这是有道理的,这是我的一部分app.js:

$routeProvider.when('/', {
    templateUrl: 'views/home.html',
    controller: 'HomeCtrl',
    resolve: {
        auth: function ($q, authenticationSvc) {
            var userInfo = authenticationSvc.getUserInfo();
            if (userInfo) {
                return $q.when(userInfo);
            } else {
                return $q.reject({ authenticated: false });
            }
        }
    }
})
.when('/login', {
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    login: true
})

很明显,当我加载/应用程序时,只显示我的home.html.但是,如果我在登录后正常进入页面时已经拥有了什么?

我的主要问题似乎是目前对我来说,我不太确定index.html当我登录时如何以及为什么加载正常.这是我在LoginCtrlSignIn过程完成后在我的工作:

$location.path("/");

我在网上搜索了关于这个主题的一些详细解释,但遗憾的是我还没有找到任何有用的东西.有人可以解释为什么这首先起作用,以及我如何使其适用于页面重新加载?谢谢!

编辑我在这里阅读(https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode)我有改变我的快速配置.我试过了:

app.all('/*', function(req, res, next) {
    res.sendfile('public/index.html', { root: __dirname });
});

我用 $locationProvider.html5Mode(true);

但是当我现在登录时,我的页面会不经意地刷新,直到它崩溃.

edit2:好的,在阅读了很多关于html5mode以及如何使用它的表达后我很确定我的Bug是在后端,而不是在前端.

这是我的部分server.js(快速配置)

app.use(require('less-middleware')(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));
app.set('view engine', 'html');
app.set('views', __dirname + '/public/views/');

require('./routes')(app); // contains my other routes

app.get('/', function(req, res) {
    res.render('index');
});
app.get('/views/:name', function (req, res) {
    var name = req.params.name;
    res.render('views/' + name);
});
app.get('*', function(req, res) {
    res.redirect('/');
});

我的文件夹结构:

/server.js
/routes
/public/app.js
/public/index.html
/public/views/home.html
/public/controllers/xxxCtrl.js

我已经在stackoverflow和其他网站上阅读了很多帖子,基本上都是这么说的

app.get('*', function(req, res) {
        res.redirect('/');
    });

应该足以使这个工作,但对我来说它似乎不起作用.


edit3: 快速总结我当前的问题:

当我重新加载页面时,只会加载部分html,例如home.html正在加载.不是整页index.html.以下是我的相关代码的快速摘要:

app.js我已配置的(angular config)中:

$locationProvider.html5Mode(true); 
// I tried my app without html5mode, but then everything breaks - but I need the html5mode anyway
$routeProvider.when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeCtrl',
            resolve: {
                auth: function ($q, authenticationSvc) {
                    var userInfo = authenticationSvc.getUserInfo();
                    if (userInfo) { return $q.when(userInfo); } 
                    else { return $q.reject({ authenticated: false });}
                }
            }
        })

我的authenticationSvc:

.factory("authenticationSvc", ["$http", "$q", "$route", "$window", "$location", function ($http, $q, $route, $window, $location) {
// login, logout
function init() {
        console.log("init");
        if ($window.sessionStorage["userInfo"]) {
            userInfo = JSON.parse($window.sessionStorage["userInfo"]);
        }
    }

    init();

在服务器端,server.js:

app.get('/:name', function (req, res) {
    var name = req.params.name;
    res.sendFile('views/' + name);
    // res.sendFile(__dirname + '/public/index.html'); // uncommented, since it didn't work
});


require('./routes')(app);

// this is my last route:
app.get('*', function (req, res) {
    res.redirect('/#' + req.originalUrl);
});

从我的理解这个"应该"足够配置表达和角度一起工作.


推荐阅读
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 使用nodejs爬取b站番剧数据,计算最佳追番推荐
    本文介绍了如何使用nodejs爬取b站番剧数据,并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据,以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • 本文讨论了如何在不使用SearchBar display controller的情况下,单独使用SearchBar并捕获其textChange事件。作者介绍了实际状况,即左侧SliderMenu中的SearchBar需要在主页TableView中显示搜索结果。然后,作者提供了解决方案和步骤,帮助读者实现这一功能。 ... [详细]
  • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 本文介绍了P1651题目的描述和要求,以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术,将问题转化为求解差值的问题,并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]
author-avatar
晞沂_364
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有