Confused about the path

After completing an AngularJS lesson, I encountered an issue where Angular was not able to understand links to the details page, such as template/1, when clicking on a link from the browser. However, when manually entering the URL in the address bar of the browser, it worked perfectly fine. How can this issue be resolved?

App.js

angular.module('templateStore.templates', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/templates', {
           templateUrl: 'templates/templates.html',
           controller: 'TemplatesCtrl'
     })
    .when('/template/:templateId', {
         templateUrl: 'templates/template-details.html',
         controller: 'TemplateDetailsCtrl'
    })
    .otherwise({
        redirectTo: '/templates'
    });    
}])
.controller('TemplatesCtrl', ['$scope', function($scope) {
   console.log('This is Template ');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
     console.log('This is Template Details');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
     console.log('This is Template Details');
}]);

Templates.html(main page)

<div class="col-md-4 template">
    <h3>Template 4</h3>
    <img src="img/4.jpg">
    <h4>$29.99</h4>
    <a class="btn btn-primary btn-block" href="#/template/1">Details</a>       
</div>

Here is an image showing the highlighted URL in the address bar after being clicked.

Answer №1

.when('/template/:templateId', {
             templateUrl: 'templates/template-details.html',
              controller: 'TemplateDetailsCtrl'
             })  

 App.controller('TemplateDetailsCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {        
     console.log($routeParams.templateId); }]);

Experience To see the demo in action, try using #/template/2 or any number higher than 2 as it is a part of the functional code. Hope this information aids you....

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

Reveal the CSRF token to the client located on a separate domain

Utilizing the module https://www.npmjs.com/package/csurf to safeguard my public routes from cross-site request forgery. Due to the server and client being on separate domains, a direct method of passing the generated token to the client is not feasible. I ...

Utilizing Next 13 for flexible MDX imports

Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...

Why is Vue JS throwing an error stating "undefined is not an object"?

After creating a Vue app on a single page .html file served by django, which consists of multiple components, I decided to transition this project into a full-fledged Vue.js project using the Vue CLI. Initially, I thought it would be a simple task to trans ...

AngularJS does not interact with Servlets

A simple web page is being created with the goal of taking two inputs and inserting them into a database, but there seems to be an issue when using AngularJs. The Servlet communication works perfectly fine without Angular, but not with it. Here are all the ...

Divide the canvas into 100 separate sections using Javascript

Help! I'm trying to divide a canvas into 100 squares that are 50x50px each, but my current code is becoming too lengthy with multiple for loops. Is there a more efficient way to achieve this with just one for loop? https://i.sstatic.net/0UD0s.png Bel ...

The request to retrieve data from the model at http://localhost:9000/model/data.json resulted in a 404

This is the path to my directory I have a npm server running on http://localhost:9000/ to utilize the cytoscape module. However, my server is unable to locate my json file. What could be the issue with my code? This is the source code of my index.js file ...

Tips for invoking a JavaScript function within an iframe

I'm looking to add an iframe to my HTML document, but I also need to pass a variable from a JavaScript function that is located on the same page (which retrieves cookie values). <script type=text/JavaScript> var generateLinkerUrl = function(url ...

Creating a video game HUD effect using JavaScript and HTML5

In an attempt to recreate a video game HUD using HTML5, I have styled a div with CSS properties to resemble a game overlay. When a navigation link is clicked, the div should transition from a hidden state (display:none), then flash twice rapidly before fad ...

What is the best way to change the order of rows and columns in

Is there a way to rotate a table using jQuery? Maybe with a function or some other method? For instance, if I have a table structured like this: <table> <tr> <th></th> <th></th> <th>&l ...

Could you assist me in retrieving information from an API request?

I can't seem to pinpoint my mistake, but I know it's there. After the user provides their state and city information and submits it, a fetch request is supposed to retrieve latitude and longitude values. These values are then used in another API ...

Instead of showing the data in the variable "ionic", there is a display of "[object object]"

Here is the code snippet I'm working with: this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => { this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height( ...

Continuous loop of images displayed in a slideshow (HTML/JavaScript)

Greetings everyone, I am currently working on creating an endless loop slideshow of images for my website. Despite researching several resources, I am still struggling to get the code right. The issue I am facing is that only the image set in the HTML code ...

Having trouble getting JQuery Ajax POST to work in Codeigniter

Encountering an issue with jQuery AJAX post in CodeIgniter, where clicking the submit button triggers an error. Below is the code snippet: home.js form.on('submit', function(e){ e.preventDefault(); var fields = {}; form.find(' ...

What is the solution to determining the width in AngularJS without taking the scrollbar size into account

How can I retrieve the window inner height without including the scrollbar size when using $window.innerHeight? ...

Traversing through Object consisting of dual arrays within VueJS

Currently, I am working on a chat application built in VueJS and encountering an issue when attempting to display messages along with their respective timestamps. The challenge arises from the need to iterate through an object that contains two arrays: one ...

What is the best way to transmit a 500x500 2D Integer Array using Websockets?

I'm encountering an issue where I believe it may be too time-consuming to JSON.stringify and send data to each individual user. For example, if 4 people connect at the same time, the server will become stalled during array parsing, resulting in signif ...

What is the best approach to implementing a blur function for a specific input within a parent component?

I have created a custom input field as a separate component. I want to include multiple input fields in the parent component using directives: <app-input ...></app-input> My goal is to pass the blur event/function to the parent component speci ...

Uncovering the secrets to fetching numerous JSON files asynchronously using JavaScript and JQuery

My goal is to fetch multiple JSON files using JavaScript or jQuery and extract elements named j_name, j_value, and j_sts into sarr[i], rarr[i], and parr[i], respectively. var sarr = new Object; var rarr = new Object; var parr = new Object; //num_json rep ...

When a StaticFiles instance is mounted, FastAPI will issue a 405 Method Not Allowed response

Running a FastAPI application has been smooth sailing until I encountered an issue. In my current setup, the application script is as follows: import uvicorn from fastapi import FastAPI from starlette.responses import FileResponse app = FastAPI() @app.ge ...

Tips for adding a string variable to a JQuery HTML element attribute

Hi there, I've been working on a JQuery code to append data to a div element and it's been successful so far. Here is the code: $('#conversation').append('<div id="receiver"><p><b>' + username + ':< ...