경로가 각도로 작동하지 않습니다.

Question

저는 AngularJS 골짜기 Pluralsight 교육 프로그램을 배우고 있습니다. 나는 아직 시작 단계에 있으며 github에서 사용자를 검색하고 사용자 이름, 아바타 및 repos 목록과 같은 기본 정보를 보여주는 간단한 응용 프로그램을 작성 중입니다.

다음 단계는 각 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" 
     }); 
}); 

}()); 

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

사이트의 기본 URL이

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

user.html에서

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

추천하고 repo.html에!/#와 링크를 chenge해야 http://localhost/#!/main처럼이기 때문에 6,

당신에게

Answer 1

감사

Answer 2

단일 페이지 응용 프로그램에서 항상 href="#/.."을 사용하지 마십시오. 페이지를 새로 고칩니다. 다시 말해서 응용 프로그램을 다시 시작합니다. 이온.

경로가 작동하지 않는 주된 이유입니다. 경로를 변경하려면 ng-router에 $location.path()을 사용해야합니다.

나는 페이지 새로 고침을 허용하지 않을 여기

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

, href="javascript:void(0)"을 user.html 변경하여 작업을 얻었다.

그리고 난 그냥 MainController.js

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

가 도움이 있으면 알려 주시기 바랍니다에서 테스트하기 위해 글로벌 방법을 추가!