Маршрут не работает в Угловом

Question

Я изучаю программу обучения AngularJS через Pluralsight. Я все еще нахожусь в самом начале, и я создаю простое приложение, которое ищет пользователя в 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" 
     }); 
}); 

}()); 

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

Поскольку по умолчанию URL вашего сайта, как http://localhost/#!/main Вы должны Chenge свои ссылки с #!/Как в 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); 
} 

Пожалуйста, дайте мне знать, если это помогает!