The value for $routeParams.param appears to be undefined

I have set up a route and am attempting to send parameters to a controller:

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('spot', {
      url: "/spot/:param",
      templateUrl: "templates/spot.html",
      controller: "SpotCtrl"
    });
    $urlRouterProvider.otherwise('/');
});

controller:

angular.module('spotx.controllers')
  .controller('SpotCtrl', ['$scope', '$routeParams',
    function($scope, $routeParams) {

  $scope.do = function() {
    console.log($routeParams.param);
  };

}])

The URL is /#/spot/1111, but when I call the do-function, I receive undefined in the console.

Answer №1

$routeParams is specific to ngRoute and not angular-ui-router.

To access route parameters in angular-ui-router, you should use $stateParams as stated in the ui router documentation.

If you are not receiving an unknown provider error, make sure that both router scripts are included on the page and that ngRoute is injected into a module.

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

Determine in Node.js whether an image is empty or not

I am in the process of developing a testing application that generates an image based on the URL provided by the user. The screenshots are captured using phantomJS and nightmareJS. Occasionally, users may input a non-existent URL, resulting in a blank ima ...

A guide on how to add JSON data to an array using AngularJS

Is there a way to dynamically populate the label in the treedata_avm array with data from $scope.moduleSelected instead of using hardcoded values? app.controller('treeController',['$http','$scope','dataService',fun ...

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Currently, I am utilizing jQuery tabs that have a slide effect whenever you click on them. My query is: How can one prevent the slide effect from occurring on the active tab if it is clicked again? Below is the snippet of my jQUery code: $(document).read ...

Argument not accepted in JavaScript

Currently, I am encountering a unique error message while working with a complex function that iterates through elements in my JavaScript onSuccess event. The error I am seeing is: exception encountered : {"message": "Invalid argument.", "description": " ...

Dynamically Loading External JavaScript Files Depending on User Input

Looking for guidance on how to dynamically load a single javascript file out of several options based on user input in an HTML code. Any suggestions on how to achieve this task? Thank you! ...

Unable to invoke any fineUploader functions within a callback function

My autoUpload is currently set to false because I prefer uploading the images manually to my backend. To achieve this, I need the file object first. In the onSubmitted event callbacks, I am attempting to pass the image's ID to the getFile method to re ...

Utilizing JavaScript variable modifiers for enhanced functionality

I'm trying to find a way to perform a case-insensitive search for a variable within a string. To achieve this, I'm using the /gi modifier to ignore case sensitivity. However, the challenge arises because identifiers only accept direct strings rat ...

Encountering a "MissingSchemaError" while attempting to populate the database with mongoose-seeder

I am facing an issue while trying to populate a database using mongoose-seeder. Despite setting up the schema correctly, I keep encountering a MissingSchemaError which has left me puzzled. Here is a snippet from the file where I define the schema: const m ...

Display the value in Vue.js as a price format while maintaining it as an integer

I have created a Vue component called "formatted-number" which takes in an integer value (e.g. 1234) and currently displays it as a string (e.g. "12.34") to represent a price in a textfield, with the appropriate "," or "." based on the country. However, I ...

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

Tips for preserving the state of the Material-UI AutoComplete during component re-renders?

Currently, I am utilizing the Material-UI v4 AutoComplete component along with the renderOption prop in order to display a checkbox item option. The issue arises when the onChange event occurs and updates a hook in the parent component causing a re-rende ...

Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

// Performing an ajax request in jQuery $.ajax( { url : '', data: {}, dataType:'jsonp', jsonpCallback: 'callbackName', type: 'post' ,success:function (data) { console.log('ok'); }, ...

Is there a way to trigger the bootstrap datetimepicker when a custom button is clicked, while also storing the selected value in a hidden textbox

When the ADD button is clicked, a datetimepicker should open. After selecting a value from the datetimepicker, it should be saved in the textbox with ID #myTextBox. <div> <input id="myTextBox" type="text" ng-model="c" data-provide="datepicker ...

Having trouble with arrays in JavaScript - receiving TypeError when trying to set a property

Issue: An error has occurred - Uncaught TypeError: Cannot set property '0' of undefined Snippet of relevant code: var field = new Array(6); for(var x=0; x<field.length; x++){ field[x] = new Array(12); for(var y=0; y<field[x].length; y ...

What is the typical approach of JavaScript frameworks towards the 304 not-modified response?

Wondering about the inner workings of Jquery and web development in general. When a JavaScript file is requested and the server sends a 304 not-modified response, how does a framework handle it: Does it load the JS file from cache and run it? Or does it ...

Angular: efficiently sorting and selecting items from an array

In the process of developing an application, I am implementing a feature where users can filter items by clicking on category buttons. Many items have multiple categories assigned to them. By selecting specific category buttons, an array is generated with ...

Clicking on ng-click can lead to the dissociation of the Angular factory

My situation involves a factory with a series of prototypes that need to call each other. The issue arises when the reference to "this" is mistakenly applied to the html template instead of the original factory class when using ng-click. For example: ang ...

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

How to send a PHP variable to Ajax and execute a corresponding PHP function in response

I have a set of database records that are being displayed in separate div elements on the page. Each record corresponds to a specific ID, with its information displayed inside the div. My goal is to create a delete button for each record that would allow ...

The `innerHTML` function is responsible for closing HTML

My switch structure is set up as follows: switch (ratio) { case "16:9": imgContainer.innerHTML = '<img src="images/test-rata-de-aspect.jpg">' break case "4:3": imgContainer.innerHTML = '<img src="image ...