Angularfire路由无法正常工作答案

【问题标题】：Angularfire routing not working correctlyAngularfire路由无法正常工作
【发布时间】：2017-08-26 08:40:37
【问题描述】：

目前正在做一个教程。我在 google chrome 控制台中没有收到任何错误，并且由于我的代码与作者的代码几乎是 1:1，我猜错误来自角度语法的更改（我猜教程有点过时了）。

index.html:

        <!DOCTYPE html>
    <html ng-app="app">
    <head>
      <title> Expense App </title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="/styles.css">






    </head>
    <body>
        <ng-view></ng-view>
      <!-- AngularJS -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

    <!-- Firebase -->
      <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>

    <!-- AngularFire -->
      <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

      <script type="text/javascript" src="/app.js"></script>
      <script type="text/javascript" src="/home/home.js"></script>


    </body>

    </html>

app.js：

var app = angular.module('app', ['ng-route', 'firebase']);

app.config(function($routeProvider){
  $routeProvider.when('/home', {

    template: '<home></home>'

  })
  .otherwise('/home')
});

/home/home.js:

angular.module('app').component('home', {
  templateUrl: '/home/home.html'
});

/home/home.html

<h1> Expenses App </h1>

非常简单。问题是 home.html 根本没有呈现。如果我手动输入 localhost:3000/home/home.html 我可以访问它。所以我想这是路由的问题。有任何想法吗？

【问题讨论】：

标签： javascript angularjs firebase angularfire

【解决方案1】：

替换ngRoute

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

【讨论】：

我已经改了。但是，它仍然不会呈现 home.html 站点。

【解决方案2】：

请参考angularjs doc about routing。

<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/@angular/router/angular1/angular_1_router.js"></script>
<script src="/app/app.js"></script>

在您的情况下，您需要先添加角度路线库。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>

然后，我建议出于测试目的删除另一个库。（仅供参考，您上面的代码不包括任何 firebase 实现）。越简单的代码，越容易调试。

如果要使用组件路由器，请使用下一行。

var app = angular.module('app', ['ngComponentRouter'])

代码示例，看http://embed.plnkr.co/OGjYQo8LGmMmFr41hxr3/

【讨论】：