前端应用程序的角路由

Question

I know this is a very basic question, but can't seem to get everything hooked up right - I'm trying to get a handle on front end routing, using an Angular/Sinatra app. My app isn't hitting the right page, and I'm at a loss to why, as I'm having some trouble wrapping my head around the way routes work if you're not using a database.

In my main page, "display.html", I have some text, then a set of D3 graphs with hrefs:

<a href="/app/{{appname}}">
  <div ng-cloak class="nvd3-bullet-chart2" id="chart" data="subsetVals" showXAxis="true" showYAxis="true">
  </div>
</a>

The charts are populated by looping through an NVD3 function for each, rather than using ng-repeat (not sure how to do that given issues with asynchronicity).

In my displayCtrl, I define $scope.appname like this:

$scope.appname = ''

var getGraphs = function(dataset){
    var stats = {
        app: dataset[0].App
    }
    $scope.appname = stats.app;
    $scope.appname = $routeParams.appname;
}

I have my angular routes set up like this:

app.config(function($routeProvider) {
    $routeProvider

    // route for the display page
        .when('/', {
            templateUrl: '/views/display.html',
        })
        .when('/app/:appname', {
            templateUrl: 'views/details.html',
        });
});

When I click on the href for the charts, I'm getting an error that the page wasn't found at '/app/', which to me indicates that the :appname is never being picked up. So where should this be defined?

I'm happy to add more detail and code if needed. Thanks!

Answer 1

Try adding a hash to your href.

<a href="#/app/{{appname}}">

If you dont want hashes in your urls, you will have to setup the html5mode in your route settings.

$locationProvider.html5Mode(true);