Establish routes in Angular depending on a certain condition

Within my app.js file, I am setting up routes to direct to various controllers using the following code snippet:

 var urlArray=['Suggest','Comment']; 
 var pdfURL="Suggest";
 app.config(function($routeProvider,$locationProvider) {
  .when('/datatrial/' +pdfURL, {
       templateUrl: 'simple/TestPanelTrial.html',
            controller: 'SimpleDemoTrailController'
        });});

Currently, I am introducing the variable pdfUrl. I wish to include a condition where if pdfURL matches any string within the urlArray, then the 'when' statement should be utilized to redirect to the appropriate controller. The code above resides in app.js, which is the initial file to load. How can I implement this scenario?

Answer №1

Instead of using .when(), consider implementing a state with a parameter.

.state('/datatrial', {
  url: "/datatrial/:id",
  templateUrl: 'simple/TestPanelTrial.html',
  controller: function ($stateParams) {
    if ($state.params.id !== 'Suggest') {
      $state.go('/error');
    }
  }
});

This code snippet is untested, but should function properly. Alternatively, you could include this logic in your controller, as you have a reference to one in your query, but I opted for this method for simplicity.

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 'onChange' event in React is being triggered only once

Currently utilizing material-ui Library Below is my React component: import Checkbox from '@material-ui/core/Checkbox'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import React from "react"; import { withStyles ...

Extracting user login details from a Java script-based web browser for a RASA chatbot

Our website integrates a web bot using Javascript. When users log in, they can access the chatbot icon. Currently, the chatbot starts without collecting user data. However, having user data is important as we plan to trigger actions based on user ID. If ...

Loading a different webpage seamlessly without having to reload the current one

Here is a snippet of my code in okay.html: {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post> {% csrf_token %} <div align="center" class="cont ...

Is there a way to identify the index of user input when using the .map method?

I'm currently utilizing the Array.prototype.map() method to present an array within a table. Each row in this table includes both an input field and a submit button that corresponds to each element from the Array.prototype.map() function. Is there a w ...

Tips for making a REST call without page redirection in AngularJS

I am trying to create a button link that will call the delete function on a REST API in the backend, but it is not working as expected. <li><a href="" ng-click="deleteItem(keyId)">Delete</a></li> Every time I click on this link, t ...

It is not possible to recycle a TinyMCE editor that is embedded in a popup

Having a frustrating issue with the TinyMCE Editor plugin embedded within a Fancybox pop-up window. I have a list of objects with Edit links that trigger an AJAX call to retrieve content from the server and place it in a <textarea>. A TinyMCE editor ...

What is the best way to find information in a multi-page table?

I've implemented a table with pagination and search functionality to look up data within the table. However, currently the search only works within the current page of the table rather than searching the entire dataset. Is there a way to modify the se ...

PHP header malfunctioning post AJAX request triggered by JavaScript

Hey there, I have a query that might sound silly to some, but I'm curious if it's feasible to utilize the header function within a php file when receiving an AJAX response. In my scenario, I'm working on a login form where I use AJAX to com ...

Tips for enhancing the efficiency of my JavaScript code?

On my page, I have a list of items with various actions assigned to them. One can either click on an icon next to each item or check a checkbox on the left side. However, when clicking on an action after selecting multiple items, there is a noticeable lag ...

Unable to deploy Firebase functions following the addition of an NPM package

Scenario: I recently tried integrating Taiko into my Firebase web application, similar to Puppeteer. It's worth mentioning that Taiko downloads Chromium for its operations. Challenge: Ever since then, none of my functions are deploying successfully. ...

PhantomJS is failing to provide any output

Currently, I am utilizing PhantomJS for web scraping purposes. However, I have encountered an issue where the evaluate method is not returning any data. The script seems to run for a few seconds and then unexpectedly exits. I have confirmed that PhantomJS ...

Tips for preventing an AJAX response from populating a select dropdown

https://i.sstatic.net/gA1VE.gif In the example above, there is a placeholder (an option without value) that says something like Select Subcategory. When I change the category value, the subcategories are displayed. But what I want is for the subcategory ...

Developing a modular text input component with Material UI and react-hook-form for enhanced reusability

While I was in the process of creating a reusable text field component using Material UI and react-hook-form, I decided to refer to a couple of examples for guidance: Example 1 source: type FormProps<TFormValues> = { onSubmit: SubmitHandler& ...

Employing setTimeout within a repetitive sequence

function displayColors() { $.each(colors, function(index) { setTimeout(function(){ revealColor(colors[index]); }, 1000); }); } I'm attempting to create a loop where the revealColor function is executed every second until all colors ...

What is the best way to apply various styles using the ng-style directive in different scenarios?

When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...

Issue with Orgchart JS: The requested resource does not have the 'Access-Control-Allow-Origin' header present

Currently, I am developing a program to create organization charts using orgchart.js and simple PHP. This project does not involve any frameworks, but unfortunately, I encountered the following error: CORS policy is blocking access to XMLHttpRequest at & ...

Sending an Angular $http post request to a MVC action but the parameter is coming through as

After posting this content: $http.post(Common.blog.save, { blog: blog }) .then(saveBlogComplete) .catch(function(message) { }); The Fiddler output I receive is as follows: {"blog":{"title":"Chicken Is Good","content":"#Chicken Is Good\ ...

Struggling to retrieve information from a JSON file and display it within a component?

After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent f ...

Storing arrays using Backendless and Realm

Recently, I've started exploring backendless.com and Realm.io My current task is to create a simple table with categories and associated items I'm facing a challenge retrieving data from backendless as I need to create a class that is compatibl ...

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...