路線在Angular中不起作用

我正在學習AngularJS低谷Pluralsight培訓計劃。我仍然剛剛開始，我正在構建一個簡單的應用程序，在github上搜索用戶，並顯示一些關於它的基本信息，如用戶名，頭像和回購列表。路線在Angular中不起作用

下一步是使每個回購點擊，該用戶可以看到更多關於具體回購信息。我做了路線，控制器和視圖，但我無法弄清楚爲什麼它不起作用。我假設路線是問題，因爲我無法獲得期望的視圖。

在這裏，你可以找到我的路線：

(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

謝謝

來源

2017-02-15 Nikola Kokotec

由於您的站點的默認網址就像是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>

來源

2017-02-15 10:42:42

要添加到此答案：這是因爲從1.6角度默認哈希前綴不是一個空字符串（「」）了，而是一個感嘆號（「！」）。 [源（https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52） –

您應該始終避免在單頁應用程序中使用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); 
}

請讓我知道，如果有幫助！

來源

2017-02-15 10:48:28

路線在Angular中不起作用

回答

相關問題