AngularJS - 如何$位置html5Mode工作？ [英] AngularJS - How does $location html5Mode work?
问题描述
我问这是因为几次了，我试着玩的 $ locationProvider.html5Mode（真）命令<$ C沿$ C>＆LT;基本href =/＆GT; ，撞上了很多错误，要求我的项目脚本/风格/图像。我想一定有什么东西我做错了，但有一定的文件夹结构应该遵循这样你就不会遇到这些错误？或者是有一个特定的方式，在基本href 的作品，我不是很了解？
I'm asking this because a couple of times now, I've tried to play around with the $locationProvider.html5Mode(true) command along with <base href="/"> and ran into a lot of errors calling the scripts/styles/images for my project. I guess there must be something I am doing wrong, but is there a certain folder structure you should follow so you don't run into these errors? Or is there a specific way that the base href works that I'm not quite understanding?
近日，我想我会尝试在一个非常，非常小的应用程序。这实际上是一个静态的网站，但我想利用角的路由，以确保所有的页面可以即时加载。所以，我的结构将是这样的：
Recently, I thought I'd try it on a very, very small app. It's effectively a static website, but I want to take advantage of Angular's routing to make sure all of the pages can load instantly. So my structure would be something like this:
my-project
css
images
js
angular
app.js
app.routes.js
mainCtrl.js
views
home.html
about.html
contact.html
index.html
所以我知道这个文件夹结构是不是很大，但我只在这个项目中的路由，仅此而已使用角，所以它适合我的需要。
So I know that this folder structure isn't great, but I'll only be using Angular in this project for routing, nothing more, so it fits my needs.
我把入目＆LT;基本href =/＆GT; ，放于身 NG-应用和 NG-控制器和身体里面放了＆LT; DIV NG-视图＆gt; 地方太
I put into the head <base href="/">, put in body ng-app and ng-controller, and inside the body put a <div ng-view> somewhere too.
我在 $ locationProvider.html5Mode（真）补充和尝试应用了。我所有的脚本，然后被加载的http：//本地主机：8888 /的script.js 这是不正确。该项目位于一个文件夹中，这样 index.html的位于的http：//本地主机：8888 /我的项目/ index.html的。因此，应该从 HTTP来加载脚本：//本地主机：8888 /我的项目/ JS /角/ app.js 例如：
I added in the $locationProvider.html5Mode(true) and tried the app out. All of my scripts are then being loaded as http://localhost:8888/script.js which is incorrect. The project is located in a folder so that index.html is located in http://localhost:8888/my-project/index.html. So, it should be loading the scripts from http://localhost:8888/my-project/js/angular/app.js for example.
有没有办法，我不理解有关基本href东西？最后，我可以上网的地方举办这个应用程序，所以我想的URL脚本等所有相关的文件真的。任何人有什么想法？
Is there something that I'm not understanding about the base href? Eventually I may host this app somewhere online, so I want the URLs to scripts etc to all be relevant to the file really. Anyone have any ideas?
好吧，所以基本href 标签上方我会这将被链接为 CSS / style.css文件，并在我的体标签的底部我有我的脚本加载 JS / init.js 或 JS /角/ app.js 为例。这将尝试将其加载仿佛 JS 文件夹直接位于本地主机：8888 / JS
Alright, so above the base href tag I would have my CSS styles which would be linked as css/style.css and at the bottom of my body tag I would have my scripts loaded as js/init.js or js/angular/app.js for example. This would try to load it as if the js folder is located directly at localhost:8888/js.
推荐答案
该角框架是一个单页应用（SPA），能够在浏览器中运行通过实质上的欺骗的浏览器投入运行code片段，而不是进行服务器调用，通过利用哈希（＃）页面锚。通常情况下，一个URL的＃将跳转到网页中的特定锚点;在角或其他类似的SPA框架的情况下，＃被重定向到一个code段来代替。
The Angular framework is a Single Page Application (SPA) that is able to run in a browser by essentially tricking the browser into running code snippets rather than make server calls, by making use of the "hash" (#) page anchor. Normally, a URL with a # would jump to a specific anchor point in the page; in the case of Angular or other similar SPA frameworks, the # is redirected to a code segment instead.
在理想情况下，你想没有在您的网页网址来引用该＃。这是Html5Mode用武之地。 Html5Mode能的隐藏的的＃，通过 HTML5国家推（又名历史API）。
Ideally, you would like to not have to reference this # in your page URLs. This is where Html5Mode comes into play. Html5Mode is able to hide the #, by using the HTML5 Push State (aka history API).
当启用Html5Mode，页面上的正常链接默默角替换事件侦听器。当这些事件被触发，当前页面被压入浏览器历史，和新的页面被加载。这使您导航到一个新的页面的假象，甚至允许后退按钮进行操作。
When Html5Mode is enabled, the normal links on the page are silently replaced by Angular with event listeners. When these events are triggered, the current page is pushed into the browser history, and the new page is loaded. This gives the illusion that you are navigating to a new page, and even allows for the back button to operate.
这是所有罚款时，你正在处理这是从正在运行的应用程序中点击链接，而是依靠事件侦听器，如果你从外部源，其中角未加载到内存中导航到该页面无法正常工作然而。为了解决这个问题，必须从装载支持<一个Web服务器页面href=\"https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode\">URL重写。当服务器接收的URL不存在用于一个物理页面的请求时，它将重写的URL加载基本HTML页面，其中角可装载和接管
This is all fine when you are dealing with links which are clicked from within the running application, but relying on event listeners can't work if you navigate to the page from an external source, where Angular isn't loaded into memory yet. To deal with this, you must be loading your pages from a web server which supports URL rewrites. When the server receives a request for a URL that there isn't a physical page for, it rewrites the URL to load the base HTML page, where Angular can be loaded and take over.
当角接收已经以这种方式被改写路由的请求时，它必须首先确定哪些预定航线了。这就是基本 HTML标记进场。角使用基本的参考，帮助其确定该URL的一部分，是在服务器上的，哪部分是客户端路线。从本质上讲，这里的＃中的URL是，如果没有启用Html5Mode。
When Angular receives a request for a route which has been rewritten in this manner, it must first determine what the intended route was. This is where the Base HTML Tag comes into play. Angular uses the Base reference to help it to determine which part of the URL is on the server, and which part is a client route. Essentially, where the # in the URL would be if Html5Mode was not enabled.
不幸的是，基本是所使用的浏览器，不仅仅是多角度的HTML标签。该浏览器还使用此标记来确定正确的位置在地址栏中加载从使用相对路径的脚本和资源，不管路径。在一般情况下，这不是一个问题，如果所有脚本和资源是相对于index.html文件的位置。如果省略基本时，浏览器会加载从视的基地由目前的URI确定的路径脚本。然而，一旦你提供给它，浏览器将使用您所提供的任何值。
Unfortunately, Base is an HTML Tag that is used by the browser for more than just Angular. The browser also uses this tag to determine the correct location to load scripts and resources using relative paths from, regardless of the path in the location bar. In general, this isn't a problem if all of the scripts and resources are relative to the location of the Index.html file. When Base is omitted, the browser will load scripts from the apparent base path determined by the current URI. However, once you provide it, the browser will use whatever value you have supplied.
在一般情况下，除非你是你的网站的子页面上托管的角度，你想你的用户期望的特定URL字符串的东西，你应该总是控制自己的服务器上的基地，并使用基础=/在客户端。
In general, unless you are hosting angular on a sub-page of your site and you want your users to expect something specific in the URL string, you should always control the base on your server, and use Base="/" on the client side.
这篇关于AngularJS - 如何$位置html5Mode工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
