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

What techniques can I use to modify an object while it's being iterated through?

I've been attempting to manipulate the object while looping through it, but unfortunately, it's not working. How can I modify it so that the constant patient includes the property lastActivity inside the this.model array? My code looks like this ...

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

Tips for leveraging Backbone.js for creating dynamic single page websites

I am eager to create my own personal website with a unique functionality similar to this example: The idea is to have the entire website contained within a single HTML page, where clicking on a navigation item will dynamically load only the necessary info ...

Invalid Credentials - ajax authentication - Symfony2 / AngularJS / FosUserBundle

I have successfully implemented FosUserBundle with the regular web/app_dev.php/login login. The AuthenticationHandler is set up as shown here. When my Angular application sends a JSON request, it includes the following data: _csrf_token: "uSRZfxMycFCLKbx ...

Angular Material (8) error code S2591: The variable 'require' is not defined in the current scope

Currently, I am attempting to record the date and time in the JavaScript console. Despite the code successfully logging the dates, an error message persists: Note: The code is functioning properly, with the dates being displayed in the console. It is only ...

Transferring properties from React Router to child components on the server side

For my Isomorphic app using React, react-router v3, and material-ui, it's crucial to pass the client's user agent to the theme for server-side rendering. This is necessary for MUI to properly prefix inline styles. Initially, the root component o ...

Stop users from saving the page in Next.js

I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...

Exploring the React component life cycle: Understanding the distinction between render and return, and what happens post-return

This question pertains to the concepts surrounding react component life cycles. Below is an example code snippet provided as a general reference. const Modal = ({ className, variant, width, withCloseIcon, isOpen: propsIsOpen, onClose: tellParen ...

When using Express.js for file uploading, it is important to first verify that a file has been sent, set a maximum file size limit, and ensure

After working with expressjs for a month, I've encountered some issues with file uploads. Despite researching on Google and various blogs, I haven't been able to find answers to the following three questions: What do I need to do or what setting ...

Could someone elaborate on the fundamental idea behind models in AngularJS?

HTML Markup: <mydirective></mydirective> <input type="button" ng-click="showText()" value="Show Service Text" /> Javascript Code: var app = angular.module('demo', []); app.service('myService', function () { ...

Limiting Ant Design Date range Picker to display just a single month

insert image description here According to the documentation, the date range picker is supposed to display two months on the calendar, but it's only showing one month. I carefully reviewed the documentation and made a change from storing a single va ...

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

Unexpected outcomes from the Jquery contains method

Take a look at this example: http://jsfiddle.net/SsPqS/ In my HTML, there's a div with the class "record" to which I've added a click function. Within the click function, I have the following code snippet (simplified): $(".record").click(funct ...

How to toggle between arrays using ng-repeat

Currently, I am managing 3 arrays and wish to toggle between them using ng-repeat: $scope.fooDataObj = { array1:[{name:'john', id:'1'},{name:'jerry', id:'2'}], array2[{name:'bill', id:'1'},{name: ...

Using the 'type' field as a parameter in a Vue2 component object

I need help with passing an object into my component. Here is a snippet of the object's properties: { title: "myTitle", type: "myType" } However, when I define the prop in my component like this, I get a Vue runtime warning st ...

"When the value is false, use the Vue binding to apply a specific

My challenge involves managing a website that is designed to receive boolean values and store them in an array where the key represents the ID and the value represents the boolean. For example: policiesActive[ "2" => false, "3" => false] The w ...

The premature firing of the fireContentLoadedEvent in Internet Explorer is causing issues

I've encountered a strange issue with IE8 recently. My code has been functioning properly for a while and still works perfectly in Firefox, but all of a sudden Prototype has stopped calling my event listeners for dom:loaded. I typically attach them u ...

How to send props from a Vue.js component tag in an HTML file

I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component. Here's a snippet of my index.html file: <div id="js-group-discounts"> <div class="form-group required"> <datepick ...

Moving information from Ajax to PHP

I'm experiencing an issue with sending data from AJAX to PHP on the same site, "testpage.php". The PHP script doesn't seem to be displaying the data being sent. Using jQuery/Ajax: <script src="http://code.jquery.com/jquery-latest.js" type="t ...