角度路由问题答案

【问题标题】：Angular Routing Issues角度路由问题
【发布时间】：2014-11-10 07:42:35
【问题描述】：

我正在尝试使用 Firebase 应用设置基本角度路由，但遇到了困难

我的 index.html 是：

<html ng-app="SampleApp">
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
 <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
 <script src="https://cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
 <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
 <script src="app.js"></script>
</head>

<body>
<nav class="navbar>My Navbar</nav>

<div ng-view></div>


</body>
</html>

我的views/main.html是

<div>Main.html</div>

我的依赖是

var app = angular.module('sampleApp', ['ngRoute', 'firebase', 'ui.bootstrap']);

我的配置是

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/app/doctors', {
        templateUrl: 'views/main.html',
        controller: 'SampleCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);

})

我还应该补充一点，文件夹结构是

project
  app
   views
     main.html
   app.js
   index.html

每当我尝试击球时

localhost:8000/app/doctors I get a 404 Error.

如果我转到 localhost:8000/app，我将被重定向到 localhost:8000。如果我去 localhost:8000 我看到目录结构并且可以点击 app 去 index.html 并且路由被重写为 localhost:8000

我也试过 localhost:8000/#/app/doctors 没有运气

【问题讨论】：

顶部未关闭的<html 标记是否只是此处的拼写错误，还是您的代码中也有此错误？
你使用的是什么版本的角度？
您是否在应用依赖项中包含了 ngRoute？
@JaredReeves 1..3.0-beta.17
@materik 是的，更新了问题以澄清

标签： angularjs firebase

【解决方案1】：

除非您已将 your routes 配置为 use html5mode，否则您需要在 URL 中包含一个 hashbang（基于您上面的示例）：

localhost:8000#!/app/doctors

如果您已将路由配置为使用 html5mode，那么您需要在服务器上设置 URL 重写。 apache，firebase hosting

【讨论】：

【解决方案2】：

我认为您的网络服务器正在尝试为 localhost:8000/app/doctors 提供服务，而不是让应用程序有机会提供页面。

尝试配置您的网络服务器，以便将所有请求路由到您的应用所在的页面。

【讨论】：

这几乎肯定是问题所在。在整个页面下载到浏览器之前，AngularJS 不会运行。您的服务器需要处理与客户端相同的路由。在一个典型的示例项目中，您将设置某种全局“*”处理程序以转到您的主页并让 AngularJS 从那里处理应用内路由。例如，在 Express 中，这类似于 app.get('*', pages.index);