Angularfire routing not working correctly
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).
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 answers
solution1
0 2017-08-26 09:09:33
替换ngRoute
var app = angular.module('app', ['ngRoute', 'firebase']);
solution2
0 2018-04-26 01:40:52
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.