Question

我正在通过Pluralsight培训计划学习AngularJS。我还在开始，我正在构建一个简单的应用程序，在github上搜索用户并显示一些基本信息，如用户名，头像和回购列表。

下一步是让每个repo都可以点击，并且该用户可以看到有关特定仓库的更多信息。我制作了路线，控制器和视图，但我无法弄清楚它为什么不起作用。我假设这条路线有问题，因为我无法获得所需的视野。

在这里你可以找到我的路线：

(function() {

var app = angular.module("githubViewer", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
        .when("/main", {
            templateUrl: "main.html",
            controller: "MainController"
        })
        .when("/user/:username", {
            templateUrl: "user.html",
            controller:"UserController"
        })
        .when("/repos/:username/:reponame", {
            templateUrl: "repo.html",
            controller:"RepoController"
        })
        .otherwise({
            redirectTo: "/main"
        });
});

}());

RepoController：

(function() {

var app = angular.module("githubViewer");

var RepoController = function($scope, github, $routeParams) {

    var onRepos = function(data) {
        $scope.repo = data;
    };

    var onError = function(reason) {
        $scope.error = "Could retrieve data";
    };

    var username = $routeParams.username;
    var reponame = $routeParams.reponame;
    github.getRepoInfo(username, reponame).then(onRepos, onError);

};

app.controller("RepoController", RepoController);

}());

从user.html开始，您可以打开回购详情：

<tbody>
            <tr ng-repeat="repo in repos | orderBy:repoSortOrder">
                <td><a ng-href="#/repos/{{user.login}}/{{repo.name}}">{{repo.name}}</a></td>
                <td>{{repo.stargazers_count | number}}</td>
                <td>{{repo.language}}</td>
            </tr>
        </tbody>

您可以在此处找到整个项目： https://plnkr.co/edit/YpDofAJmrxn5IU7rGIjh

谢谢

Answer 1

由于您网站的默认网址与http://localhost/#!/main相同你必须用＃！/喜欢在user.html

中改变你的链接

<a href="#!/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a>

和repo.html

<a href="#!/main">Back To Main</a>
<a href="#!/user/{{repo.owner.login}}">Back To {{repo.owner.login}}</a>

Answer 2

您应始终避免在单页应用程序中使用href="#/.."，因为它会刷新您的页面，这意味着它会重新启动您的应用程序。

这是您的路线无法正常工作的主要原因。您应该使用$location.path()和ng-router来更改路由。

我通过更改user.html

来实现它

<td><a href="javascript:void(0)" ng-click="goToRepos(user.name, repo.name)">{{repo.name}}</a></td>

此处，href="javascript:void(0)"不允许刷新页面。

然后我添加了一个全局方法，只是为了在MainController.js中进行测试

$rootScope.goToRepos = function(userlogin, reponame) {
      $location.path("/repos/" + userlogin + "/" + reponame);
}

请告诉我它是否有帮助！

路线在Angular中不起作用

2 个答案: