CODEWITHSUNDEEP
angularjsroutes
Nikola Kokotec
Nikola Kokotec

Reputation: 251

Route doesn't work in Angular to search for GitHub user

I'm learning AngularJS through Pluralsight training program. I'm still on very beginning and I'm building simple app that searches for a user on GitHub and show some basic info about it, like username, avatar and list of repos.

Next step is to make each repo clickable and that user can see more info about specific repo. I made route, controller and view, but I can't figure out why it doesn't work. I'm assuming that route is problem because I can't get desired view.

Here you can find my routes:

(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);

}());

And user.html from which view you can open repo details:

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

You can find whole project here: https://plnkr.co/edit/YpDofAJmrxn5IU7rGIjh

Thank you

Upvotes: 0

Views: 520

Answers (2)

Anadi Sharma
Anadi Sharma

Reputation: 295

You should always avoid using href="#/.." in your single page applications, because of the reason that it refreshes your page, that means it would re-initiate your application.

This is the main reason your route is not working. You should use $location.path() with ng-router to change the routes.

I got it working, by changing user.html

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

Here, href="javascript:void(0)" would not allow refreshing of the page.

And then I added a global method just to test in MainController.js

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

Please let me know if it helps!

Upvotes: 1

Ankur
Ankur

Reputation: 3209

Since your site's default url is like http://localhost/#!/main You have to chenge your links with #!/ like in user.html

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

and in repo.html

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

Upvotes: 2

Related Questions