摆脱 ＃！在 angularjs ngRoute [重复]
Posted
技术标签:
【中文标题】摆脱 ＃！在 angularjs ngRoute [重复]【英文标题】：Getting rid of #! in angularjs ngRoute [duplicate] 【发布时间】：2017-11-20 16:45:23 【问题描述】：我正在使用 Angularjs ngRoute for SPA 与 Node.js 作为我的后端，我的网站中有 3 个页面说：
localhost:8000/#!/
localhost:8000/#!/red
localhost:8000/#!/green
通过谷歌搜索，我找到了摆脱 /**#!**/ 的方法，并且只有当用户无意按 F5 重新加载页面时它才能正常工作。如果重新加载，我的页面结构会变得更糟。我的意思是，如果用户在red.html 页面中按 F5，则单独显示 red.html 而不是在 ng-View 中注入 red.html 内容这就是 nodejs 的本质获取请求。有什么办法可以摆脱这个问题？
index.html
<body ng-app="myApp">
<p><a href="/">Main</a></p>
<a href="/red">Red</a>
<a href="/green">Green</a>
<ng-view></ng-view>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider)
$routeProvider
.when("/",
templateUrl: "/main"
)
.when("/red",
templateUrl: "/red"
)
.when("/green",
templateUrl: "/green"
)
$locationProvider.html5Mode(true);
);
</script>
</body>
【问题讨论】：
在哪里注入 HTML 内容？red.html 应该被加载到 ng-view 里面有什么问题那么缺少什么？
如果重新加载 red.html 没有在 ng-view 中注入。而是单独显示（只显示red.htm，没有html标签，head标签等）
如果你重新加载这个 URL localhost:8000/red 你配置的路由 .when("/red", ... 应该被加载。 URL 中不应有 .html 之类的后缀。有什么问题？
这并不是您问题的真正答案，但恕我直言，不要使用 ngRoute。请改用 ui-router (github.com/angular-ui/ui-router)。
当您使用html5mode 时，您必须配置服务器以考虑虚拟目录。不要使用与页面路径相同的模板路径，否则服务器无法区分
【参考方案1】：
您正在使用node.js 和express，对吗？这样，只需将您的所有应用程序视图路由链接到您的 index.html 并将您的部分视图放在其他子目录中以避免路由冲突：
//resources
app.use("/js", express.static(__dirname + "/js"));
app.use("/img", express.static(__dirname + "/img"));
app.use("/css", express.static(__dirname + "/css"));
//different path for your partials to avoid route conflicts
app.use("/partials", express.static(__dirname + "/partials"));
//view routes
app.get('/*', function(req, res)
res.sendFile(__dirname + '/index.html');
);
这样你的所有路线：
localhost:8000/
localhost:8000/red
localhost:8000/green
将指向您的index.html。所以你的$routeProvider 将能够以正确的方式注入视图，而你的index.html 每次都会被加载。
最后你的路由配置应该是这样的：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider)
$routeProvider
.when("/",
templateUrl: "/partials/main.html"
)
.when("/red",
templateUrl: "/partials/red.html"
)
.when("/green",
templateUrl: "/partials/green.html"
)
$locationProvider.html5Mode(true);
);
【讨论】：
当客户端路由模板使用相同路径时不起作用 @charlietfl 哦，是的，让我更正一下。 HI lin，很明显，如果我在 chrome 的 URL 中键入 localhost:3000/partials/red.html 并按回车会发生什么...我的答案是 red.html 将单独显示为页面将 red.html 的内容注入 ng-view @annapoorani 是的，但这可能发生在您的所有公共资源上。这是一个正常的情况，所以并没有什么异常。即使您只允许它通过 AJAX 请求加载，您也不能预先访问公共资源。您的应用程序路由不直接指向您的资源，这样用户就不会以/partials/red.html 结束。你期待什么？
不仅适用于公共资源。但对于重新加载和 F5 案例也是我的确切问题【参考方案2】：
问题是，如果您使用 html5-mode 并按 F5，您的服务器应该提供的不是您的 red.html，而是您的 index.html。那是因为必须引导 angular 并解析您的 url 以获得正确的位置。
编辑：规则是：
-
如果您调用（或 F5 或直接导航）
http://localhost:8000，则必须从服务器获取 index.html。
如果您调用（或 F5 或直接导航）http://localhost:8000/red，那么您也必须从服务器获取 index.html。
奖金：
您应该从定义的位置（如http://localhost:8000/static/）或从另一个域提供静态内容（图像、css、html 模板），以便获得静态文件和 url 路径的明确路径
【讨论】：
我不能承认你的规则 2...如果你直接打电话 localhost:8000/red express 将发送红色（静态文件）索引将如何发送该 get 请求 查看 lin 的回答。以上是关于摆脱 ＃！在 angularjs ngRoute [重复]的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：使用ngRoute路由时未加载组件控制器