How to call a route config inside a controller in JS directly rather than from html a href on-click

  angularjs, javascript, routes

I am relatively a novice in the concept of routing and Single Page Applications in AngularJS. Therefore i am stuck and your help in addressing my query is most appreciated.

Background

I have a page "Products list" which lists all products in a ng-repeat loop. When I click on one of the products link, the application loads a "Details" page (An extension of Page ‘Products list’ (SPA)) for that ‘id’ through a href call

<a href="{{id}}/Details" class="button"> Details

to enable the routing to the ‘Details’ page, we have created an app.config as below

in Productslist.js
-------

$routeProvider
    .when("/:id/Details",{ templateUrl : "../ProductsList/Details" , controller :})
    .otherwise({
        templateUrl : "/"
    }); 

This present flow works fine and I am able to open the ‘Details’ page when i am on page ‘ProductsList’ and I click on the ‘Details’ Button in the html for any of the products displayed.

In case it is relevant, the URL shows ex: www.abc.com/list/4/Details and the product details of id = 4 is displayed on the page.

What is not working / What i need

Now From another third page "X", where i get the Product-ID, I want to navigate to the product details page directly (without the need for a click on the "Details" button in Page A).

Since the module for this page is first created in the "ProductsList" page, I a getting the ‘id’ value from page X into ProductList.js and i want to set the URL as below to open the ‘Details’ page.

if(fromPageX == 'true')
{
var x = id+"/Details";
location.href = x;   // dont wait on page productsList.html, but open "Details" page
}

Essentially i want to call the "routing" function from the controller in the .js file rather than from .html file (on-click)

the URL on the browser correctly shows : www.abc.com/A/4/Details

however I get a 404 – page not found error as it is not getting passed through the routing config.
i tried Window.location.href, or other suggestions in various threads still i am unable to successfully load the ‘Details’ page.

  1. Is this scenario i am looking for possible in AngularJS
  2. What am i doing wrong.

Thanks in advance for all your support!

Source: Ask Javascript Questions

LEAVE A COMMENT