Angularfire路由无法正常工作

Question

currently doing an tutorial. 目前正在做教程。 I don't get any errors inside the google chrome console and since my code is pretty much 1:1 with the authors one, i guess the error comes from changes in the angular syntax (tutorial is a little bit outdated i guess). 我在Google chrome控制台内部没有任何错误，由于我的代码与作者的代码几乎是1：1，所以我想错误是由于角度语法的变化（我想教程有些过时了）。

index.html: 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: 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: /home/home.js：

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

/home/home.html /home/home.html

<h1> Expenses App </h1>

Pretty much straight forward. 直截了当。 The problem is that home.html isn't rendered at all. 问题在于根本没有渲染home.html。 If i manually type in localhost:3000/home/home.html i get access to it. 如果我手动键入localhost：3000 / home / home.html，则可以访问它。 So i guess its a problem with the routing. 所以我想这是一个路由问题。 Any ideas? 有任何想法吗？

Answer 1

替换ngRoute

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

Answer 2

Please refer to angularjs doc about routing . 请参阅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>

in your case, you need to add angular route library first. 在您的情况下，您需要先添加角度路线库。

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

and then, I would suggest getting rid of another library for testing purposes. 然后，我建议您出于测试目的而放弃另一个库。 (Just FYI, your code above does not include any firebase implementation). （仅供参考，上面的代码不包含任何firebase实现）。 The Simpler code, the easier debug. 代码越简单，调试越容易。

If you want to use component router, use next line. 如果要使用组件路由器，请使用下一行。

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

For code example, have a look http://embed.plnkr.co/OGjYQo8LGmMmFr41hxr3/ 对于代码示例，请看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