路由在 Angular 中不起作用答案

【问题标题】：Route doesn't work in Angular路由在 Angular 中不起作用
【发布时间】：2017-02-15 10:16:06
【问题描述】：

我正在通过 Pluralsight 培训计划学习 AngularJS。我还处于起步阶段，我正在构建简单的应用程序，用于在 github 上搜索用户并显示一些基本信息，例如用户名、头像和存储库列表。

下一步是让每个 repo 都可点击，并且用户可以看到有关特定 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"
        });
});

}());

回购控制器：

(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 从 wich 视图中可以打开 repo 详细信息：

<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

谢谢

【问题讨论】：

标签： angularjs routes

【解决方案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>

【讨论】：

添加到这个答案：这是因为从 Angular 1.6 开始，默认的哈希前缀不再是空字符串（“”），而是一个感叹号（“！”）。 source

【解决方案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);
}

如果有帮助请告诉我！

【讨论】：