Angular Routing Issues

Question

I'm trying to set up basic angular routing with a Firebase app and am having difficulty

My index.html is:

<html ng-app="SampleApp">
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
 <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
 <script src="https://cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
 <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
 <script src="app.js"></script>
</head>

<body>
<nav class="navbar>My Navbar</nav>

<div ng-view></div>


</body>
</html>

My views/main.html is

<div>Main.html</div>

My dependencies are

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

My config is

app.config(function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/app/doctors', {
        templateUrl: 'views/main.html',
        controller: 'SampleCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);

})

I should also add that the folder structure is

project
  app
   views
     main.html
   app.js
   index.html

Whenever I try to hit

localhost:8000/app/doctors I get a 404 Error.

If I go to localhost:8000/app I am redirected to localhost:8000. If I go to localhost:8000 I see the directory structure and can click app to go index.html and the route is rewritten as localhost:8000

I've also tried localhost:8000/#/app/doctors and no luck there

What version of angular are you using? – Jared Reeves Sep 16 '14 at 14:28 — Jared Reeves, Sep 16 '14 at 14:28
have you included ngRoute in your app dependencies? – Mattias Farnemyhr Sep 16 '14 at 14:33 — Mattias Farnemyhr, Sep 16 '14 at 14:33
@JaredReeves 1..3.0-beta.17 – user2954587 Sep 16 '14 at 14:36 — user2954587, Sep 16 '14 at 14:36
@materik yes, updated question to clarify – user2954587 Sep 16 '14 at 14:37 — user2954587, Sep 16 '14 at 14:37
Can you post your directory structure? – sma Sep 16 '14 at 14:46 — sma, Sep 16 '14 at 14:46

score 3 · Answer 1 · edited May 23 '17 at 10:29

3

Unless you have configured your routes to use html5mode, you need to include a hashbang in the URLs like so (based on your example above):

localhost:8000#!/app/doctors

If you have configured your routes to use html5mode, then you need to set up URL rewrites on your server. apache, firebase hosting

edited May 23 '17 at 10:29

Community

1
1

answered Sep 16 '14 at 16:28

Kato

40,352
6
119
149

score 2 · Accepted Answer · answered Sep 16 '14 at 15:12

2

I think your Webserver is trying to serve localhost:8000/app/doctors and not giving the app a chance to serve a page.

Try configuring your webserver so that all requests get routed to the page your app lives on.

answered Sep 16 '14 at 15:12

Fordio

3,410
2
14
18

This is almost certainly the problem. AngularJS doesn't run until the whole page is downloaded to your browser. Your server needs to handle the same routes as your client. In a typical example project you'll set up some sort of global '*' handler to go to your home page and let AngularJS deal with the in-app routing from there. For example, in Express this would be something like `app.get('*', pages.index);` – Chad Robinson Sep 16 '14 at 15:22

Angular Routing Issues

2 Answers2