使用 Angular.js 路由时出现 404 错误答案

【问题标题】：404 error when using routing with Angular.js使用 Angular.js 路由时出现 404 错误
【发布时间】：2014-10-26 04:50:06
【问题描述】：

我正在尝试使用 angular 和 angularfire 设置路由，但遇到了麻烦。

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

app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'index.html',
        controller: 'SampleCtrl'
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

app.controller('LoginCtrl', function($scope, $firebase){
  console.log('LoginCtrl')
})

当我尝试点击 localhost:8000/login 时，我收到以下错误消息

Error code explanation: 404 = Nothing matches the given URI.

如何使用 ngRoute 和 AngularFire 设置简单的路由？

【问题讨论】：

标签： javascript html angularjs firebase angularfire

【解决方案1】：

使用默认路由器时，您需要在 url 中使用哈希。

localhost:8000/#/login

如果你想删除哈希，那就是另一回事了。

您需要使用$locationProvider 并将html5Mode() 设置为true。从那里您将不得不停止使用$window.location.href 来更改路线并使用$location.path()。

然后您必须获得服务器或使用支持URL rewrites 的Firebase Hosting 之类的服务。

【讨论】：

Angular.js 教程中介绍了该材料。在深入研究 AngularFire（即 Firebase + Angular）之前，这是一本很棒的入门书

【解决方案2】：

在这里玩转 $location（参见“测试输出”部分，这有助于我理解 $route），希望对您有所帮助。

http://ngtutorial.com/learn/route.html#/_tblcontents_5

【讨论】：