javascript - 前端应用程序的 Angular 路由

Question

我知道这是一个非常基本的问题，但似乎无法将所有内容都正确连接起来 - 我正在尝试使用 Angular/Sinatra 应用程序来处理前端路由。我的应用程序没有访问正确的页面，我不知道为什么，因为如果您不使用数据库，我很难理解路线的工作方式。

在我的主页“display.html”中，我有一些文本，然后是一组带有 href 的 D3 图表:

<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;
}

我的 Angular 路线设置如下:

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}}">

如果您不想在网址中使用哈希值，则必须在路由设置中设置 html5 模式。

$locationProvider.html5Mode(true);