Angularjs 路线不'；我不能在有角度的地方工作_Angularjs_Routes

Angularjs 路线不'；我不能在有角度的地方工作

angularjs routes

Angularjs 路线不'；我不能在有角度的地方工作,angularjs,routes,Angularjs,Routes,我正在通过多视距训练计划学习AngularJS。我还处于起步阶段，我正在构建一个简单的应用程序，在github上搜索用户，并显示一些基本信息，比如用户名、头像和回购列表下一步是让每个回购都可以点击，用户可以看到关于特定回购的更多信息。我制作了路线、控制器和视图，但我不明白为什么它不工作。我假设这条路线是个问题，因为我无法获得所需的视图在这里您可以找到我的路线： (function() { var app = angular.module("githubViewer", ["ngRoute"

我正在通过多视距训练计划学习AngularJS。我还处于起步阶段，我正在构建一个简单的应用程序，在github上搜索用户，并显示一些基本信息，比如用户名、头像和回购列表

下一步是让每个回购都可以点击，用户可以看到关于特定回购的更多信息。我制作了路线、控制器和视图，但我不明白为什么它不工作。我假设这条路线是个问题，因为我无法获得所需的视图

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

(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，您可以从该视图打开回购详情：

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


{{repo.stargazers_count|number}
{{repo.language}

您可以在此处找到整个项目：

谢谢

因为您的站点的默认url类似于

http://localhost/#!/main

您必须与#！/就像在user.html中一样

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

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

在repo.html中

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

因为您网站的默认url类似于

http://localhost/#!/main

您必须与#！/就像在user.html中一样

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

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

在repo.html中

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

您应该始终避免在单页应用程序中使用

href=“#/…”

，因为它会刷新您的页面，这意味着它会重新启动您的应用程序

这是您的路线不起作用的主要原因。您应该使用ng路由器的

$location.path（）

来更改路由

通过更改user.html，我让它工作了

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

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

如果有帮助，请告诉我