angularjshttp-redirectroute-provider

AngularJS routeProvider doesn't work

I have a problem when I try to use the $routeProvider. It just doesn't work at all 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 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 set $scope.authenticate = true in the controller, and when I load the page it doesn't show up.

When I try /dashboard it returns me Cannot GET /dashboard.

I can't see what is going wrong I hope you can help me !

Thank you.

Solution

  • 2 things, first you need the ng-view to render the view 

    <div ng-view=""></div>

    And second, if you are getting "Cannot GET /dashboard" is because in angular the routes are in the hash, example:

    yourdomain.com/#/dashboard, and not yourdomain.com/dashboard. So here you have a link if you want to go to dashboard:

    <a ng-href="#/dashboard">Dashboard</a>