Angularfire routing not working correctly

0
votes

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

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>

Pretty much straight forward. The problem is that home.html isn't rendered at all. If i manually type in localhost:3000/home/home.html i get access to it. So i guess its a problem with the routing. Any ideas?

2
javascriptangularjsfirebaseangularfire

2 Answers

0
votes

replace ngRoute

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

Please refer to 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>

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