The angular application fails to load the page properly and keeps refreshing itself

I'm currently working on an Angular app that searches for a Github user based on their username and then displays the list of repositories. When a user clicks on a repo name, it should show the open issues and contributors associated with that repository. You can check out the plunk here.

Please take a look at the plunk and test the app yourself, as I might not be explaining my issue clearly enough.

This is my repocontroller js file.

(function(){

var app = angular.module('plunker');
app.controller('RepoCtrl', function($scope, $routeParams, $http, $log){
    var username = $routeParams.username;
    var reponame = $routeParams.reponame;

    var onSuccess = function(response){
      $scope.repo = response.data;
      $http.get($scope.repo.contributors_url)
      .then(onCollab , onError);
    };

    var onCollab = function(response){
        $scope.contributors = response.data;
    };

    var onError = function(reason){
    $scope.error = "Data Load Error";
    };

    //GET https://api.github.com/repos/:owner/:repo/contributors
    $http.get('https://api.github.com/repos/' + 'username/' + 'reponame')
    .then(onSuccess, onError);
});

}());

I've run into a problem in the final stage where clicking on any repo name results in the application reloading the main page instead of loading the repo.html page. Can you please assist me with this issue? :)

Answer №1

If your website's default URL is set up as http://localhost/#!/main, it is important that you update all links accordingly with the #!/ structure, as shown in user.html.

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

Similarly, in repo.html, make sure to include:

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

Answer №2

Simply delete the # from the anchor link in the

ng-repeat="repo in repos | orderBy:repoSort"
shown in the code snippet below for clarification:

<div>
  <h2>{{error}}</h2>
  <h1>{{user.name}}</h1>
  <a href="{{user.blog}}" target=_blank>{{user.blog}}</a>
  <h1>{{user.email}}</h1>
  <h1>{{user.location}}</h1>
  <img ng-src="{{user.avatar_url}}" title={{user.name}} width="250px" id="userDetails"> OrderBy:
  <select ng-model="repoSort">
    <option value="-stargazers_count">Stars</option>
    <option value="name">Name (A-Z)</option>
    <option value="-name">Name (Z-A)</option>
  </select>

</div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Stars</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="repo in repos | orderBy:repoSort">
      <td>
        <a href="/repo/{{user.login}}/{{repo.name}}">{{repo.name}}</a>
      </td>
      <td>{{repo.stargazers_count | number}}</td>
      <td>{{repo.language}}</td>
    </tr>
  </tbody>
</table>

<a href='#/main'>Back To Main</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Node.js engine isn't updating to support compatibility with Firebase functions

Encountered First Failure Below is the content of package.json "engines": { "node": "8.0.0" }, Error: The engines field in the functions directory's package.json is unsupported. You can choose from: {&quo ...

Can someone guide me on how to use contract.on() in ethers.js to listen to events from a smart contract in a node.js application?

I've been working on a node.js application using ethers.js to listen to events emitted from the USDT contract Transfer function. However, when I run the script, it exits quickly without displaying the event logs as expected. I'm unsure of what st ...

"Run JavaScript code within the boundaries of the start and end of XMLHttpRequest

Currently, I am using XMLHttpRequest to execute an AJAX request without the use of jQuery, relying solely on plain old Javascript. This particular AJAX request may take some time as it calls an endpoint responsible for processing transactions. In order to ...

Issue: [$injector:unpr] encountered in AngularJS

I am currently working on a project involving a webApi. My goal is to display a list of students from my database. Surprisingly, everything works perfectly fine when I don't use a service (factory), but as soon as I introduce a service, things start f ...

I am seeking a way to conceal text in an HTML document using JavaScript when the browser window width is less than a specified amount, and reveal it when the window width exceeds that value

I attempted to use the window.screen.width method, but it appears that the script only runs once (upon page load). I am seeking a way for the code to run continuously. Below is my JavaScript snippet: var textinSelected = document.getElementById("se ...

What is the process for integrating IBM MobileFirst Adapter with Angular JS?

I am currently developing a program using IBM MobileFirst, Ionic, and AngularJS. This program is designed to search for customers by name and display the results in a table. Let's consider the following adapter: <wl:adapter name="customerAdapter" ...

The Cascading of Bootstrap Card Designs

Looking for some assistance with my TV Show Searcher project that is based on an API. The functionality is complete, but I'm struggling to get the Bootstrap cards to stack neatly without any empty space between them. I want it to resemble the image ga ...

In React and Node Js, the setState function will return a value of NULL

My Node Js API utilizes a find function to retrieve data from the database, which works flawlessly and returns the results. However, when I pass this data into setState using React and Axios, it ends up returning null. Below is my API's find() functi ...

How to efficiently use promises within loops in JavaScript

I recently delved into Javascript and I'm still struggling with how promises work within loops. Currently, I am utilizing repl.it db for my project. Let's say I have an array consisting of keys, and my goal is to query each key in the array to st ...

What is the process for displaying validation errors sent back from a WebAPI?

Currently, I am utilizing the most up-to-date versions of angular.js, WebAPI, and bootstrap. Consider a form containing several textboxes and a submit button. Upon submission, the data undergoes validation via a WebAPI call on the server, as client-side v ...

Distinguishing between creating controllers in AngularJS

I am a beginner in the world of AngularJS and I have come across two different examples when it comes to creating a controller. However, the one that is more commonly used doesn't seem to be working for me. The problem with the first example is that ...

Guidance on retrieving state and city information using placeid within Google Maps API with AngularJS

Is there a way to retrieve the state and city information using a place_id? I am looking to extract the state and city based on the given place_id. You can refer to this link Google_map, where I need to find out the state and city of the specified place_i ...

Building a JavaScript application with Node.js and MySQL to seamlessly interact with both offline and online databases

As I develop a JavaScript web-app, my plan is to utilize Node.js for connecting the app with an existing MySQL database. My initial question pertains to the structure of the Node code: should it be written in the same .js file as my application or kept se ...

Transform the Data into JSON format

I need assistance converting my data into the correct JSON format. The current structure of my data is as follows: [ "{ id:001, name:akhilesh, }", "{ id:002, name:Ram, }" ] My goal is to transform the above data into valid J ...

What are the steps to add a Search Box to my HTML Website?

Currently, I am in search of a way to incorporate a "Search" feature on my website that is built solely with HTML. I have added a Search box for the users but I'm uncertain about how to proceed next. Can I use PHP to enable the Search functionality o ...

Error in AWS Lambda: JSON parsing error due to unexpected token 't' at position 6

I'm currently working on a basic lambda function that utilizes a post request to insert data into DynamoDB. However, every time I deploy the lambda function and test it using Postman, I keep encountering a 502 Bad Gateway error. To troubleshoot this ...

React is unable to identify the prop `controlID` when used on a DOM element in React-Bootstrap Forms

While constructing a form with React components sourced from react-bootstrap, and taking guidance directly from an example provided in its documentation: <Form.Group controlId="formBasicEmail"> <Form.Label>Email address</Form.Label> ...

Swipe to eliminate an element in Ruby on Rails

I am looking to implement a drag-and-drop delete feature on my website, similar to the recycle bin/trash function on Windows or OSX. Within my database, I have multiple objects represented by div elements using Ruby. While I know how to add drag functiona ...

What is the best way to monitor two expressions with distinct listeners in AngularJS?

I'm trying to monitor two different expressions with separate listeners, so I currently have two $watch() methods. Is it possible to combine them into a single watch statement? Thank you for your response. Just to clarify, I want each expression to h ...

What is the best way to duplicate the table header?

I'm looking to have the table header repeat twice using ng-repeat, like this: a b | a b | Instead of aa | bb. Currently, my code only displays a b | <table class="table table-striped table-bordered"> <thead> ...