Angularfire路由無法正常工作

Question

目前正在做教程。 我在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，則可以訪問它。 所以我想這是一個路由問題。 有任何想法嗎？

Answer 1

替換ngRoute

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

Answer 2

請參閱angularjs doc有關路由。

<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/

Angularfire路由無法正常工作

問題描述

2 個解決方案

解決方案1
0 2017-08-26 09:09:33

解決方案2
0 2018-04-26 01:40:52

Angularfire路由無法正常工作

問題描述

2 個解決方案

解決方案1 0 2017-08-26 09:09:33

解決方案2 0 2018-04-26 01:40:52

解決方案1
0 2017-08-26 09:09:33

解決方案2
0 2018-04-26 01:40:52