Angularjs路由问题

Question

最近想把以前一个用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大神的内容，已经完美解决。

Answer 1

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>

Answer 2

url中怎么显示 你在配置中是可以自己写的，比如下面一段配置。

楼主已经知道angular-ui-router 和 angular 的一些用法

/**
 * 路由配置
 */

'use strict';


app.config(function ($stateProvider, $urlRouterProvider, $resourceProvider) {
  $stateProvider
  // 首页
  .state('home', {
    url: '/home',
    templateUrl: '../pages/home.html'
  })
  // 应用列表
  .state('home.application_list', {
    url: '/apps',
    templateUrl: '../pages/application-list.html',
    controller: 'application_list'
  })
  // 渠道管理
  .state('home.channel_management', {
    url: '/channels',
    templateUrl: '../pages/channel-management.html',
    controller: 'channel_management'
  })
  //  应用渠道部署
  .state('home.appChannel', {
    url: '/apps/channels/:appId',
    templateUrl: '../pages/application-channels.html',
    controller: 'AppChannels'
  })
  // 默认路由
  $urlRouterProvider.otherwise('/apps');

  $resourceProvider.defaults.stripTrailingSlashes = false;
});

可以看到上面的每条路由几乎都是
一个状态对应着

一个url
一个模板
一个控制器

当某个状态触发的时候，地址栏中显示的就是你在这份配置中该状态对应的url,并且当前页面渲染的是该状态对应的模板,模版中的数据，逻辑等来自该条路由的控制器。

所以楼主，url怎么显示，是你自己定的，你不要在url中设置 *.html,就不会出现你所说的情况了呀

Answer 3

1.使用angular的话是可以配置你的路由显示模式的，使用$locationProvider服务来进行配，默认的情况下使用的是标签模式，也就是我们常见的那种带有#的模式，不过也可以启用html5Mode模式来去除路由中的#;可以像下面这样使用：

$locationProvider.html5Mode(true); // 开启html5Mode模式

这样你的路由就是html5Mode模式了。
2.如果是本地测试的话，那么一般情况下建议使用browserSync结合gulp或者webpack开启本地服务，进行测试。

Answer 4

这个就是打开姿势的问题了，我分别试了三种方式(ng-ui-router)没做任何特殊配置:
1.直接打开文件，url是这样的: file:///Users/showonne/Desktop/ngdemo/index.html#/login,
2.在webstorm中点击chrome图标打开(其实是webstorm给你开了一个简单的files server)，url是这样的:http://localhost:63342/ngdemo/index.html#/login,
3.使用browser-sync在项目的根目录下启动服务browser-sync start --server --files .，url是这样的:http://localhost:3002/#/index。
总结一下: 应该发现了，前两个url比最后一个多了一层ngdemo，其实就是文件服务器host的根目录不同。