AngularJS 路由与 ng-view 相对于 HTML 页面答案

【问题标题】：AngularJS routing with ng-view relative to HTML pageAngularJS 路由与 ng-view 相对于 HTML 页面
【发布时间】：2015-01-14 05:02:55
【问题描述】：

我对 Angular 很陌生，现在尝试用它做一个简单的路由。我有我的登录页面，目前称为 index2.html，其中包含一些 .js 和 .css 包含和一个包含 <ng-view></ng-view> 的 div，我的内容应该进入其中。我的 app.js 看起来像这样：

var module1 = angular.module('module1', ['ngRoute']);

module1.config(function($routeProvider, $locationProvider){
  $routeProvider.when("/",
    {
      templateUrl: "page1.html",
      controller: "uiCtrl"
    }
    ).when("/:param",
    {
      templateUrl: "page1.html",
      controller: "uiCtrl"
    }
    ).when("/transactions",
    {
      templateUrl: "page2.html",
      controller: "uiCtrl"
    });
});

但实际上这确实令人困惑。调用http://myurl.com/index2.html，page1.html 的内容被正确加载到 ng-view 中。到目前为止，一切都很好，但是调用 index2.html/123 会给我一个 Not Found 而不是将 123 解释为参数。我不知道为什么，但要使 123 成为参数，我必须调用 index2.html#123，它可以工作，但随后会立即将 url 更新为 index2.html#/123。调用 index2.html/transactions 根本不起作用。如何调用我的 /transactions 路由？

编辑：如果这有用，我也在这些页面中使用 JQueryMobile。

【问题讨论】：

看起来应该是index2.html#/123，因为您没有使用 HTML5 路由模式。
html5 模式到底是什么？我怎样才能实现我可以调用 index2.html/transaction （或类似的东西）在 ng-view 中查看我的交易页面？
如果你使用 html5Mode 那么你需要配置 webserver 来响应index2.html 来响应所有的请求（当然除了静态的，图片，css等等）。否则你必须使用 hashbang 模式并使用index2.html#/transaction。
是否可以从 url 中删除 index2.html？通过将其设置为欢迎页面。那么你的 url 会很简单，你可以输入 myurl.com 为 index2.html 和 myurl.com/123 为 index2.html#/123

标签： angularjs url routing

【解决方案1】：

通过让 HTML5 模式工作，我终于得到了我想要的东西，这让事情变得简单多了。设置$locationProvider.html5Mode(true); 后，我不得不重新配置我的网络服务器，直到我找到这个不错的指南之前我无法管理：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

现在我可以使用斜线以常规方式访问我的每条路线。参数可以像往常一样使用? 和& 传递，我不再需要处理令人困惑的主题标签和自动更改的url。

【讨论】：