Utilizing AngularJS to Retrieve URL Parameters Within a Controller

I am attempting to retrieve URL parameters in my controller:

Although I came across this example, I encountered an error that appears to be connected to the loading of necessary modules.

app.controller('WidgetCtrl', ['$scope', '$routeParams', function ($scope, $routeParams, $http) {
    var param1 = $routeParams.param1;
    var param2 = $routeParams.param2;

    var vm = $scope;

    vm.data = "test";

}]);

Error:

Uncaught Error: [$injector:modulerr]

In my HTML file, I include:

<script src=".../angular-1.2.21/angular.min.js"></script>
<script src=".../angular-1.2.21/angular-route.min.js"></script>

How can I correctly access and utilize the URL parameters in my controller? What are the essential modules that should be loaded?

Answer №1

It seems like you haven't included $http in your injection, so the correct way to do it would be:

app.controller('WidgetCtrl', ['$scope', '$routeParams', '$http', function ($scope, $routeParams, $http) {

By following this structure, the error should disappear.

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

Retrieve information for AJAX tooltip from a specific URL

I am currently utilizing a script for tooltips. Is there a method available to dynamically load the content of a tooltip from a URL (using dynamic content loaded from a PHP script) rather than specifying the path to an html/php file? For Example What I ...

Obtain a collection of custom objects through an HTTP GET request to be utilized in an Angular 2 application

I am currently grappling with the task of efficiently retrieving a list of custom objects and displaying their contents using an HTML file. Here is a simplified version of the HTTP GET method that I am working with: [HttpGet("/atr/testing")] public List& ...

Tips for successfully sending data to an ng-include controller

So, I've got this ng-include html element, and I'm trying to figure out how to pass data from an external source to the controller. The primary controller is responsible for fetching json data from a http webservice, and then parsing that data i ...

Adjust the horizontal position of the background by +/- X pixels

Is there a way to adjust the background-position by a specific distance, say 20px, from its original position? For example: $(".selector").animate("slow").css("backgroundPosition", "center -=20px"); (Unfortunately, this approach doesn't yield the d ...

Show a collection of elements containing attributes in JSX

I have a React component where I am displaying data from an array called pkgData: <div className="mainApp"> <div className="pkgsList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> ...

Retrieve targeted information from MySql using jQuery AJAX Success

I've got this AJAX code set up to retrieve data from MySQL and display it in the Success block. $.ajax({ type:"POST", url:"index.php", success: function(data){ alert(data); } }); This is my Query $sql ...

Not defined within a function containing arrays from a separate file

Can anyone help me with listing multiple arrays from another file? When I try to iterate through each array using a "for" loop, the code compiles and lists everything but gives an undefined error at the end. How can I fix this? I have included some images ...

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

React js web application facing excessive content problem

I am encountering an overflow issue with the styles sheet I'm using on mobile and tablet views, but it works fine on desktop view. Can anyone provide a solution to this problem? I am developing a ReactJS web app hosted on Firebase. When I include fewe ...

Utilizing JQuery to alter the text color if validation fails when entering a value

Is there a way to change the text in the input box to red when PHP validation fails using JQuery? I had success with Javascript, but it kept disappearing every time I clicked submit... <form class="link-form" method="post" action=""> <la ...

The localStorage API (getItem/setItem) is not supported with setTimeout

I find it fascinating how these two codes exhibit different behaviors. It's interesting to note that functions like 'console.log' would work in both scenarios, but localStorage API functions such as getItem and setItem do not. setTimeout(()= ...

Vue/Vuex - using async dispatch for AJAX requests in multiple components

I am working with vuex and using a store module to load user lists in my app through ajax. After the list is loaded, it doesn't fetch again if it's already present in the vuex store. I have implemented this logic in the main application layout as ...

Having trouble with Angular + Rails combination: Angular can't seem to locate the controller

Issue: I am encountering an error in my Angular / Rails app. When trying to access a Rails controller function from the Angular controller, I receive the following error: Uncaught TypeError: tasks.moveOrder is not a function. Strangely, all other functions ...

ng-class in AngularJS not interacting with Scope method

I am in the process of creating a new application. Here is how my index.html file looks: <html ng-app='myApp'> <body ng-controller='mainController'> <div ng-view> </div> </body> </html> My m ...

Is it possible to invoke a JavaScript function within PHP code?

When setting up server side validations on my login form, I want to display error messages directly below the validated control when an error occurs. However, I am currently having trouble calling a JavaScript function from my PHP code to handle this. < ...

Error encountered: Multer TypeError - fields does not have a function called forEach

I'm currently working on a metadata reader using multer in node.js with express on c9. I've spent some time searching for solutions to my issue, but it seems like no one else has encountered the error I am facing: TypeError: fields.forEach is no ...

Creating raw JavaScript from npm package:How to convert npm modules into plain

Is there a way to get a pre-compiled plain JavaScript file from the repository https://github.com/airbrake/airbrake-js? I'm looking for a solution without using bower, npm or any other tools - just a single JavaScript file. By the way: The file "http ...

Utilizing Angularfire OAuth for Facebook authentication in login strategy

After successfully implementing the code below in the loginCtrl controller and login.html, I encountered some issues with setting up the workflow correctly. My goal is to achieve something like this: //check if the current $scope has authData //if so red ...

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...

Is the injector giving back a value of undefined?

Having an issue with my legacy code where injector() is returning undefined. Check out this plnkr for more details. Furthermore, I am wondering if updating a property value in the service will automatically reflect in the scope without needing to use ...