AngularJS routeProvider not working
I have a problem when I try to use $ routeProvider. It just doesn't work and I don't see any problems:
var app = angular.module('app', ['ngStorage','ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/index.html',
controller: 'authCtrl'
})
.when('/dashboard', {
templateUrl: '/tpl/dashboard.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
Here is the index.html:
<html>
<head>
<title>Authenticate | BulbThings</title>
<script src="angular/angular.min.js"></script>
<script src="angular/ngStorage.min.js"></script>
<script src="angular/angular-route.min.js"></script>
<script src="js/build/app.min.js"></script>
</head>
<body ng-app="app">
<div ng-show="authenticate">
<span ng-cloak ng-show="addr" id="address">{{address}}</span>
<input type="mail" ng-model="email" placeholder="Email"><br />
<input type="password" ng-model="password" placeholder="Password"><br />
<button ng-click="auth.connect(email, password)" ng-model="signin">Sign in</button><br/><br/>
</div>
<p>{{error}}</p>
</body>
</html>
I install $scope.authenticate = true
in a controller and when I load the page it doesn't show up.
When I try / toolbar it returns me Cannot GET /dashboard
.
I can't see what's going on Not bad, I hope you can help me!
Thank.
+3
source to share
2 answers
2 things, first you need ng-view to render the view
<div ng-view=""></div>
And secondly, if you get "Can not GET / dashboard" because in angular the routes are in a hash, for example:
yourdomain.com/#/dashboard , not yourdomain.com/dashboard . So, you have a link if you want to go to the dashboard:
<a ng-href="#/dashboard">Dashboard</a>
+3
source to share