Javascript AngularJS-HTML5模式是如何工作的？_Javascript_Angularjs

Javascript AngularJS-HTML5模式是如何工作的？

javascript angularjs

Javascript AngularJS-HTML5模式是如何工作的？,javascript,angularjs,Javascript,Angularjs,我问这个问题是因为现在有好几次，我尝试使用$locationProvider.html5Modetrue命令，但在调用项目的脚本/样式/图像时遇到了很多错误。我想一定是我做错了什么，但是是否有一个特定的文件夹结构，你应该遵循，这样你就不会遇到这些错误？还是有一种我不太理解的基本href的具体工作方式最近，我想我应该在一个非常非常小的应用程序上试试。它实际上是一个静态网站，但我想利用Angular的路由来确保所有页面都可以立即加载。所以我的结构是这样的： my-project css

我问这个问题是因为现在有好几次，我尝试使用$locationProvider.html5Modetrue命令，但在调用项目的脚本/样式/图像时遇到了很多错误。我想一定是我做错了什么，但是是否有一个特定的文件夹结构，你应该遵循，这样你就不会遇到这些错误？还是有一种我不太理解的基本href的具体工作方式

最近，我想我应该在一个非常非常小的应用程序上试试。它实际上是一个静态网站，但我想利用Angular的路由来确保所有页面都可以立即加载。所以我的结构是这样的：

my-project
    css
    images
    js
        angular
            app.js
            app.routes.js
            mainCtrl.js
    views
        home.html
        about.html
        contact.html
    index.html

所以我知道这个文件夹结构不是很好，但我只会在这个项目中使用Angular进行路由，仅此而已，所以它适合我的需要

我把它放在头上，放在身体的ng应用程序和ng控制器里，在身体的某个地方也放了一个

我添加了$locationProvider.html5Modetrue并试用了该应用程序。我的所有脚本都将作为http://localhost:8888/script.js 这是不正确的。项目位于文件夹中，因此index.html位于http://localhost:8888/my-project/index.html。因此，它应该从中加载脚本http://localhost:8888/my-例如project/js/angular/app.js

我对基地有什么不了解的吗？最终，我可能会在网上的某个地方托管这个应用程序，所以我希望脚本等的URL都与文件相关。有人有什么想法吗

好的，在基本href标记上方，我将使用CSS样式链接为CSS/style.CSS，在主体标记底部，我将使用js/init.js或js/angular/app.js加载脚本。这将尝试加载它，就像js文件夹直接位于localhost:8888/js一样。

Angular framework是一个单页应用程序SPA，它可以通过使用散列页面锚来诱使浏览器运行代码段而不是进行服务器调用，从而在浏览器中运行。通常，带有a的URL会跳转到页面中的特定锚定点；在Angular或其他类似的SPA框架中，将重定向到代码段

理想情况下，您希望不必在页面URL中引用它。这就是HTML5模式发挥作用的地方。Html5Mode可以通过使用aka历史API来隐藏

启用HTML5模式后，页面上的正常链接将被Angular with event listeners悄悄替换。触发这些事件后，将当前页面推入浏览器历史记录，并加载新页面。这会让人产生一种错觉，以为您正在导航到一个新页面，甚至允许“后退”按钮操作

当您处理从正在运行的应用程序中单击的链接时，这一切都很好，但是如果您从外部源导航到页面，而该页面尚未加载到内存中，那么依赖事件侦听器将无法工作。要处理此问题，您必须从支持的web服务器加载页面。当服务器收到一个没有物理页面的URL请求时，它会重写URL以加载基本HTML页面，在那里可以加载和接管Angular

当Angular收到以这种方式重写的路由请求时，它必须首先确定预期的路由是什么。这就是基地发挥作用的地方。Angular使用基本引用帮助它确定URL的哪一部分在服务器上，哪一部分是客户端路由。从本质上讲，如果未启用HTML5模式，URL中的

不幸的是，Base是一个HTML标记，浏览器使用它的目的不仅仅是角度。浏览器还使用此标记来确定使用相对路径从中加载脚本和资源的正确位置，而不考虑位置栏中的路径。通常，如果所有脚本和资源都与Index.html文件的位置相关，则这不是问题。省略Base时，浏览器将从当前URI确定的表观基本路径加载脚本。但是，一旦您提供了它，浏览器将使用您提供的任何值

一般来说，除非您在站点的子页面上托管angular，并且希望用户期望URL字符串中有特定内容，否则您应该始终控制服务器上的基础，在客户端使用Base=/。

听起来你需要Base href不仅仅是一个角度的调用，还告诉你所有的相关链接从哪里开始。不过，js文件的加载位置与角度路由无关。如何加载它们以及将基本href放在何处？能否显示index.html文件的示例，特别是tagsI更新了我的答案以显示@Phil。我知道我们

使用该基href可以工作，但我认为它应该使所有文件都与此索引文件相关？或者这不正是它的工作方式吗？例如，如果我要将这个应用程序放到服务器上让全世界都能看到，那么我就必须再次更改`href=/my project/。@germainelol yup。标记将根路径/URI设置为所有相对URI的基础。如果路径根据它的部署位置而改变，那么你需要改变它。只要有时间阅读它，我没有否决任何东西。总之，我遵循了您的逻辑，应用了base=/project/。因此，当在应用程序内部时，我的路由工作正常，因为我在/test上应用了一个模板，该模板正在加载视图。我遇到了您提到的错误，如果我尝试直接加载项目/测试，而不从主页导航到它，那么我会得到一个404NotFound错误。您通常如何解决此问题？@germainelol@Claies该标记还使浏览器能够加载正确的资源，而不管位置栏中显示的路径如何。否则，相对URI将从当前URI的表观基本路径解析。我没有投反对票，但这可能是您在解释中遗漏的内容。我更新了问题，并添加了一个指向该文章的链接，其中讨论了如何在各种服务器上设置URL重写。@germainelol如果使用node，您不需要apache代码；这篇文章展示了多种不同HTTP服务器类型的技术。