Угловая маршрутизация для приложения с интерфейсом

Question

Я знаю, что это очень простой вопрос, но, похоже, он не может все правильно подключиться - я пытаюсь получить ручку маршрутизации на передней панели, используя приложение Angular/Sinatra. Мое приложение не попадает на нужную страницу, и я не понимаю, почему, так как у меня возникают проблемы с тем, как мои маршруты работают, если вы не используете базу данных.

В моей главной странице «display.html», у меня есть некоторый текст, то набор графиков D3 с hrefs:

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

Диаграммы населены перекручивание через функцию NVD3 для каждого, а чем использование ng-repeat (не уверен, как это сделать, учитывая проблемы с асинхронностью).

В моей displayCtrl я определяю $ scope.appname как это:

$scope.appname = '' 

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

У меня есть угловые маршруты, установленные вверх, как это:

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

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

Когда я нажимаю на HREF для диаграмм , Я получаю сообщение об ошибке, что страница не найдена в '/ app /', что для меня означает, что: appname никогда не подбирается. Итак, где это должно быть определено?

Я рад добавить дополнительные детали и код при необходимости. Благодаря!

Answer 1

Попробуйте добавить хэш на свой href.

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

Если вы не хотите хэшей в ваших URL-адресов, вы должны установить html5mode в настройках маршрута.

$locationProvider.html5Mode(true);