javascript - Angularjs路由问题

问题描述

问 题

最近想把以前一个用Asp.Net MVC做的项目前端改成用Angularjs，在路由那里，因为Angularjs的路由嵌套很复杂，就用了angular-ui-router，
不过不管是用Angularjs的router还是用angular-ui-router，在地址栏显示的是http://localhost:8390/home.html#/index，看起来非常难看，而看了其他网上用Angularjs做的网站，
如http://angularjs.cn/latest、https://www.ele.me/shop/902882/rate，
这些都看不到.html、#这种，
或者如https://angular-ui.github.io/ui-router/site/#/api/ui.router这种就只有一个#分隔。
请教下各位大神怎么做成这种效果？而不是xxx.html#/xxx这种不好看的样式。谢谢！

最终解决方案详见Chobits大神的内容，已经完美解决。

解决方案

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

http://readystate4.com/2012/05/17/nginx-and-apache-rewrite-to-support-html5-pushstate/

---

http://stackoverflow.com/questions/25730797/asp-net-mvc-hosting-angular-app-with-html5mode-and-routing

http://www.codeproject.com/Articles/806500/Getting-started-with-AngularJS-and-ASP-NET-MVC-P

---

header里设置

<base href="/app/" />

新建app文件夹 把index.html放入

Try changing your RouteConfig.cs, like this:

routes.MapRoute(
    name: "Default",
    url: "app/{*.}",
    defaults: new { controller = "Ng", action = "Index" }
);

Azure IIS Rewrites:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url="^app/.*$" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                 
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/app/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

这篇关于javascript - Angularjs路由问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！