What is the best way to include multiple parameters in config.route.js with Angular?

I am facing an issue while trying to pass multiple parameters in my config.route.js file. I have successfully passed one parameter, but encountering difficulties in passing two parameters. The second parameter is optional. Can anyone provide insight on how to achieve this? Below is the current state of my code...

function getRoutes() {
    return [{
        {
            url: '/main/:containerId',
            config: {
                title: 'main',
                templateUrl: 'app/main/edit.html',
                params: 'containerId',
            }
        }, {
            url: '/main/:containerId/:planId',
            config: {
                title: 'main',
                templateUrl: 'app/main/edit.html',
                params: {
                    containerId: 'containerId',
                    planId:'planId'
                }
            }
        }

Answer №1

Make sure to use a question mark to denote optional parameters.

For example:

url: '/main/:containerId/:planId?'

For more information on optional parameters, check out this helpful fiddle.

http://jsfiddle.net/p3QaK/14/

Remember, in the .otherwise({redirectTo: '/0/'}) function, do not forget to include the ending forward slash. Try changing it to '/0/3' to see both parameters being passed, otherwise only the first parameter will be passed.

Answer №2

Why make things more difficult when you have the option to utilize the $routeParams service?

Say goodbye to the need to explicitly define parameters in your config.route.js file. Instead, just inject the service into your controller and easily access the parameters within it.

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 Grunt build functionality seems to be malfunctioning following the NPM Update and Clean process

I recently updated the NPM clean on my AngularJs website, and now I'm facing issues with 'Grunt Build.' The project gets stuck after processing the images part. Tried reinstalling the previous version of NPM Set up the complete environment ...

Why are JS & jQuery's inArray() and indexOf() functions not functioning correctly when indexes are strings?

Here is an example of an array: var arr = []; arr['A string'] = '123'; arr['Another string'] = '456'; I am attempting to find the index of either '123' or '456'. Both methods below are returnin ...

iterative outcomes with ajax and jquery scripting in javascript

Hey there! I'm trying to create a JavaScript script using AJAX that will extract the id and value of a button when hovered over. The extracted value will then be sent to a PHP script on the same page, where it will be used as a variable for searching ...

Storing jQuery output in a global variable can be achieved by assigning the result

Take a look at the Code snippet below - $(function() { $.fn.getPosition = function() { var results = $(this).position(); results.right = results.left + $(this).width(); results.bottom = results.top + $(this).height(); return results; } ...

Just a simple canvas animation

My canvas animation consists of two rectangles moving in different directions, but I believe it can be simplified further. http://jsfiddle.net/tmyie/R5wx8/6/ var canvas = document.getElementById('canvas'), c = canvas.getContext('2d&apo ...

Remove the 'name' attribute from the input tag within the URL

Is there a way to make the server update the URL format to localhost:3000/userinput instead of localhost:3000/?name=userinput when submitting a name? Any suggestions would be greatly appreciated. Thank you in advance. ExpressJs FILE <!DOCTYPE html> ...

What is the best way to retrieve the Firebase API key from an Express backend in order to initialize firebase.initializeApp()?

At the moment, my Firebase.js file is structured to fetch the API key from the .env file on the client side. Here's a snippet of the code: import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import "firebase/compat/firestore" ...

Exploring the depths of async/await within ExpressJS fetch operations

So far, my API-middleware code is functioning properly. I am being cautious to avoid any blocking calls in my express server, which is why I have implemented a function containing asynchronous fetch calls. I'm wondering if this extra step is necessar ...

Click to open a Swipeable Drawer using an onClick event handler in Material UI

Issue Encountered: Currently, in the provided documentation code (https://codesandbox.io/s/cnvp4i?file=/demo.tsx), the drawer opens when the "Open" button is clicked at the top. However, I am looking to have the drawer triggered and opened when it is direc ...

Utilizing Literal and Instance Formats in JavaScript

There are two main methods for creating JavaScript objects. The confusion arises in understanding when to use each notation. Below are examples of both literal and instance variables, each holding different values and producing different results when opera ...

Counting the number of AngularJs elements in a table

<table align="center"> <tr> <th>No</th> <th>Movie Title</th> </tr> <tr data-ng-repeat="mov in movie | pagination: curPage * pageSize | limitTo: pageSize | filter:searchText" data- ...

Counting words with JavaScript without using an input tag is a useful skill

Is there a way to count the words in a text using only p and span tags, without using input tags? How can this be achieved? <span class="word" id="word">Words Number</span> <p class="any" id="any"> ...

Differences between Mongoose's updateOne and save functions

When it comes to updating document records in a MongoDB database, there are several approaches to consider. One method involves defining the User model and then locating the specific user before making modifications and saving using the save() method: let ...

There is no assigned value in scope for the shorthand property. You must either declare one or provide an initializer

I'm just starting out with TypeScript. Encountering the error 'No value exists in scope for the shorthand property 'firstName'. Either declare one or provide an initializer.' while using Prisma with Next.js to create a new user in ...

The AngularJS framework does not recognize the _spPageContextInfo variable

I have recently embarked on the journey of integrating userName with AngularJs into SharePoint. My goal is to be able to retrieve and display all userNames from a SharePoint list. However, I keep encountering an error message that states '_spPageConte ...

Vue Dev Tools is not updating data in Ionic Vue 3

There seems to be an issue with the updating of Reactive and Ref data in Vue Dev Tools when changes are made in an input field bound with v-model within a form. The updated data is only visible when I interact with another component and then return to the ...

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...

Find unique numbers within a specified range using NodeJS

I need to update my arts on an NFT test via OpenSea API, but I'm facing an issue where the numbers are being repeated. Is there a way to select a number within a range that does not repeat? Here is my current code: const opensea = require("opense ...

performing an AJAX request to dynamically fill the scope with data in an AngularJS application

Hey there, I have an AngularJS controller set up like this: function InstantSearchController($scope){ $scope.items = [ { url: 'http://tutorialzine.com/2013/04/services-chooser-backbone-js/', title: 'Your First Backbone. ...

Ways to access component load status in Next.js

I'm currently developing a basic Pokedex to showcase all Pokemon. I am utilizing a map function on an array of Pokemon objects to display all the cards in this manner: {pokemons.results.map((el, i) => { return ( <di ...