Using Javascript outside of the AngularJS environment

I am trying to utilize Javascript functions outside the controller in Angular JS instead of using a service within a module. Is this allowed?

For instance:

var UrlPath="http://www.w3schools.com//angular//customers.php"
//this section will store all the functions
 function testing_Model ($http){
 var self=this;

 self.getRecords=function(){
 $http({
  Method:'GET',
  URL: UrlPath,
 }).success(function(data){
  self.record=data.records;
});

}
self.getRecords();
}

angular.module("myApp", []);
app.controller('myController', function ($scope, $http) {
$scope.testing_Model = new testing_Model();}

Upon running the above code, I encountered an error stating "$http is not a function".

I appreciate any assistance provided.

Answer №1

In order for this function to work properly, you must include $http as a parameter.

Ensure that the $scope.testing_Model is initialized with $http injected into it like so: new testing_Model($http);

While the above approach may yield results, it goes against the principles of Angular. The recommended practice is to inject your function as a service in the controller. This allows for writing testable code, keeping track of dependencies, and showing respect towards other developers who might need to support your project in the future.

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

Enhancing jQuery UI elements (Customizing jQuery Datepicker to prevent incorrect entries)

My goal is to enhance the functionality of the jQuery UI Datepicker by adding validations. I have spent considerable time searching the internet for help without success. Although I came across a similar question on Stack Overflow jquery-datepicker-functi ...

Error: Unable to access 'map' property of an undefined variable in NextJS while using getStaticPaths

Currently facing an issue with dynamic routing in my Next.js project. I have a dynamic page [id].js and am trying to fetch data from an API. const res = await fetch(`myAPI`); const resData = await res.json(); const paths = resData.data.map((r) =&g ...

Combine array elements in Angular/Javascript based on a certain condition

Is there a way to combine elements from two arrays while avoiding duplicates? array = [ {id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'} ]; The desired output is: result = [{id: ...

What is the best way to cancel Interval in a React application?

I need help with implementing setInterval in my react redux application. Below is the code snippet from FileAction.js export const SetPath = ({ path, location }) => async (dispatch) => { try { let interval; if (pre_path === path) ...

Tips for centering the InputLabel in Material UI?

Upon loading the page, I am looking to have the InputLabel appear as shown in the second picture. However, I haven't been able to find any InputLabel props that achieve this. I attempted using the focused prop, but it didn't give me the desired o ...

Is there a way to swap out values in a JavaScript Object for new ones?

I need to update the initial values of myObject with new names: let myObject = [ { name: 'X0', values: 'FALSE,TRUE' } , { name: 'X1', values: 'NORMAL,LOW,HIGH' } , { name: 'X2', values: ' ...

Credit for the Position swipejs

After integrating a swipeJS photo slideshow into my jQuery mobile application, I encountered an issue. I am trying to create points for counting the pictures similar to what is seen on this page: Although I have added the necessary HTML and CSS code to my ...

Strategies for avoiding a hover component from causing distortion to its parent component in React

I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet: Styling for Lang ...

Is there a way to directly display all the content in pagination format without a print preview option?

I have been tasked with implementing a feature that involves displaying content using pagination and allowing users to print all the content at once with a single click on a print button. However, I am currently experiencing an issue where clicking the pri ...

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...

Inserting items into an array based on the user-specified quantity

Suppose I have an array with 8 elements. If the user enters a number greater than the length of the array, how can I dynamically add the remaining items to the list? For example: If my array length is 8 and the user enters 15, how can I add 7 items to th ...

Organizing the dropdown menu in alphabetical order

I am facing an issue with the following element <li id="li_15" class="dropdown dropdown-alpha highlighted" style=""> <label class="description" for="element_15">Name <span id="required_15" class="required">*</span></labe ...

Tips for sending attributes to jQuery autocomplete

I'm facing a major issue with implementing a jquery autocomplete feature, and JavaScript isn't my strong suit. Currently, I'm using the jquery.auto-complete plugin available at: https://github.com/Pixabay/jQuery-autoComplete, which is an up ...

Struggling to display a navigation menu on angular 1 with complex nested json structure

I have set up a navigation bar using JSON data fetched by an Angular service. Everything is working fine with my service and controller, but I am facing difficulty in displaying the nested JSON data in my view. Here is the JSON data: { "menu": [ ...

transfer a javascript variable with ajax

I am currently developing a website that contains multiple forms, most of which will be submitted using jQuery AJAX. Although I have implemented reCAPTCHA for security reasons, the client is not satisfied with it due to the difficulty in reading the words ...

What could be causing the Jquery keydown event to only trigger every other key press?

Recently, I have put together a thumbnail gallery that can be navigated using left and right arrows. I have noticed that while the right arrow works smoothly, the left arrow only seems to navigate to the previous thumbnail every other time. Can someone ple ...

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

SignalR enables the display of identical dashboard data pulled from queries on various browsers. By utilizing SignalR/hub, MVC, and C#.NET, the data can

Encountering an issue with my signalr/hub while fetching dashboard data. I'm using 2 browsers to access data based on dates. However, when searching for July on browser 1 and then switching to another month on browser 2, the data in browser 1 gets upd ...

Obtain the updated cart total for WooCommerce when the 'updated_cart_totals' jQuery event is triggered

Currently, I have implemented the updated_cart_totals jQuery event to monitor updates to my WooCommerce cart. While this setup successfully triggers when the cart is updated, I am also seeking a way to retrieve the updated total for the cart. Below is the ...