Simple AngularJS Program is Blank in Browser

I'm working on learning some Angular for an application I'm building.

After going through some tutorials, I had a basic program working which had two views and some routing to flip between them. I'm running it now in the browser, and it's coming up blank. There are no console errors, and I swear I haven't touched it since I had it working last.

Here's my main file:

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>AngularJS Routing example</title>

    <style>
      body
        {
        font-family: arial;
        padding: 20px;
        }
    </style>

  </head>

  <body ng-app = "journal_program">

    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src = "app.js"></script>

    <div ng-view>
    </div>

  </body>
</html>

And my Javascript:

var journal_program = angular.module ("journal_program", []);

journal_program.config (['$routeProvider', function ($routeProvider)
  {
  $routeProvider.
  when ('/AddNewOrder',
    {
    templateUrl: 'templates/add_order.html'
    }).
  when ('/ShowOrders',
    {
    templateUrl: 'templates/show_orders.html'
    });
  }]);

The first view:

<h2>Add New Order</h2>

<a href = "#ShowOrders">Show Order</a>

The second view:

<h2>Show Orders</h2>

<a href = "#AddNewOrder">Back</a><br>

Any ideas are appreciated. I'm not sure what to check at this point.

UPDATE:

Here are the 3 important things I figured out from this little exercise:

1) Angular views don't have a default route unless you set one with "otherwise". Basically, even if you've set up a couple different routes, ng-view is blank when the page first loads unless either the user loads a route by clicking a link outside the view, or if you've set a default by adding "otherwise" to your route controller.

otherwise (
  {
  templateUrl: 'templates/add_order.html'
  });

This link is extremely helpful: http://blog.kevinchisholm.com/angular/angular-js-basics-routes-part-iii-creating-a-default-route/

2) Apparently nothing you put inside the html of ng-view will be rendered unless you have a " when ('/' " route in the controller.

3) Angular doesn't work so well when run off the hard drive. You've got to upload it to a server first, for whatever reason.

After adding these steps I got my demo working again. Looking back now, I'm not sure how I got it working the first time around without this knowledge.

Solution

It working fine...

Take a look at this Demo

Working Demo

  <div ng-view>
  </div>

  <h2>Show Orders</h2>
  <a href="#ShowOrders">Show Order</a>
  <h2>Add New Order</h2>
  <a href="#AddNewOrder">Add Order</a>
  <br>