Utilize AngularJS $http.get method to trigger an MVC5 controller action

As a beginner in AngularJS, I recently developed an application using AngularJS. Within my app folder, there is a list folder containing two files: List.html and

listcontroller.js

angSalaryApp.controller('listController',
function ListController($scope, ListService) {
    $scope.list = listService.newlist;

    $scope.count = 0;

    $scope.submitForm() = function () {

    };

    $scope.updateName() = function () {
        $scope.count++;
    };
});

listService.js

angSalaryApp.factory('ListService',
    ["$http",
        function ($http) {
            var newList = function(){
                return $http.get("Areas/Employer/List/newlist");
            };
        }
    ]);

listdirective.js

    angSalaryApp.directive("listForm", function () {
    return {
        restrict: "E",
        templateUrl: "app/list/list.html"
    }
});

Within the app folder, I have a JS file named SalaryApp.js

var angSalaryApp = angular.module('angSalaryApp',[])

However, when I tried to invoke $http.get, I encountered an error message

Error: [$injector:undef] Provider 'ListService' must return a value from $get factory method.
http://errors.angularjs.org/1.4.6/$injector/undef?p0=ListService
   at enforcedReturnValue (http://localhost:5137/Scripts/angular.js:4330:9)
   at invoke (http://localhost:5137/Scripts/angular.js:4476:7)
   at Anonymous function (http://localhost:5137/Scripts/angular.js:4293:13)
   at getService (http://localhost:5137/Scripts/angular.js:4435:11)
   at invoke (http://localhost:5137/Scripts/angular.js:4464:9)
   at Anonymous function (http://localhost:5137/Scripts/angular.js:9127:11)
   at nodeLinkFn (http://localhost:5137/Scripts/angular.js:8239:13)
   at compositeLinkFn (http://localhost:5137/Scripts/angular.js:7671:13)
   at compositeLinkFn (http://localhost:5137/Scripts/angular.js:7675:13)
   at publicLinkFn (http://localhost:5137/Scripts/angular.js:7546:30)

Answer №1

When setting up your controller, make sure to inject the ListService and then call ListService.newlist instead of listService.newlist.

angSalaryApp.controller('listController',
function ListController($scope, ListService) {
    $scope.list = ListService.newlist;
});

In your factory function, it is important to return an object, but currently you are not returning any. Make sure to add a function in the return object.

angSalaryApp.factory('ListService', ["$http",
  function($http) {
    return {
      newList: newList
    };

    function newList() {
      return $http.get("Areas/Employer/List/newlist");
    }
  }
]);

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

Similar to jQuery's ajaxStart event handler, AngularJS provides an equivalent event handler for handling Ajax requests

Seeking a way to detect Ajax start and end events in an AngularJS application. In JQuery, one can utilize the ajaxStart, ajaxComplete functions to capture start, complete, end, and fail events on a global or local level. How can I globally monitor Ajax ev ...

Using regular expressions, divide the string at every occurrence of a period unless there is a quotation mark immediately following the period, in which case

Can anyone help me split this string? It includes quotation marks: "This is a test. I need this to be splitted." And here is one with a question? I am looking for: ['"This is a test.', 'I need this to be splitted."' ...

Can CSS be used to create curved dashed lines?

Is it possible to achieve dashed lines similar to the ones highlighted in the images below using only CSS? I have a responsive web page built with Bootstrap, and I need the dashed lines to adjust accordingly when the window width changes. https://i.sstat ...

How can I move a TableItem from one material UI component to another using drag-and-drop?

I am facing an issue where I need to drag a ListItem from one List component to another. I am uncertain about how to accomplish this in Material UI. ...

Guide on deploying a dynamic AngularJS web application on AWS and navigating to it on a web browser

Seeking guidance on hosting my dynamic angular web app in an AWS EC2 instance and accessing it through a browser. Despite adding custom inbound rules, I couldn't get it to work. Perhaps I made a mistake. Can someone please provide a step-by-step expla ...

Only perform SetTimeout or $timeout on select actions

Is there a way to initiate either setTimeout or $timeout when a button is clicked? Currently, the function seems to be executing on its own rather than waiting for the click event to trigger it, even when placed inside the button click function. $scope. ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

xhr.send(params) allows for sending multiple parameters in one request

Hey there, I'm looking for guidance on passing multiple parameters with the correct syntax. Can someone please assist me? function formSubmit() { var name = document.getElementById('name').value; var email = document.getElementById ...

The process of transferring a local image file to the Clarifai API

I am currently exploring the functionality of the food categorization API provided by clarifai. However, I noticed that the example in the documentation uses a publicly hosted image. Is there a way for me to utilize the API with an image from a local direc ...

What is the best way to import JSON functionality into Javascript specifically for use with Internet Explorer

I am facing an issue with loading JSON feature in JavaScript for IE8 while in compatibility mode. After receiving advice, I decided to utilize douglascrockford/JSON-js to enable JSON support on outdated browsers. To tackle this problem, I created a new f ...

Angular sorting - Strings with undefined values are placed at the end

I am looking to understand how to effectively utilize the Angular orderBy filter with a custom sorting function that places undefined values at the end. For numeric sorting, my code looks like this: <tr ng-repeat="item in items | handleEmptyValues(sor ...

Attempting to include a new choice on a drop-down menu and ensure its visibility within the drop-down menu

On my journey into the world of web development, I am facing a challenge with adding an option to a dropdown list. Despite pressing the add button to insert "Pasta" as a new option, it is not showing up in the list immediately. However, selecting all optio ...

Invoke the Parent Controller's Function from Directive

When attempting to trigger a parent controller's function from a custom directive upon a selection in a dropdown, I keep encountering the ng:cpws error. Error: [ng:cpws] http://errors.angularjs.org/1.4.8/ng/cpws This is the HTML snippet: <select ...

Is there a way to integrate a calendar feature within an Angular 2 application?

I am brand new to Angular 2 and have a question: I need to integrate a calendar into a page where users can add events. Something similar to the following example: I'm unsure if the angular material calendar project is designed for Angular 2 or for ...

"Utilize the drag-and-drop functionality with jQuery to upload images

I am new to jquery and I am currently working on creating a game for children that involves drag and drop functionality with images in specific zones. A similar game can be found at this URL: I have attempted to understand the source code but I am having ...

In JavaScript, how is the symbol "." referred to as?

While I am familiar with its purpose and the language terminology, could you please provide the official name for the period/dot used in Javascript/jQuery? Appreciate your help! ...

Tips for uploading files with AJAX while also including additional fields

As a beginner in ajax and .net MVC, I am facing an issue with uploading a file along with other form fields in my application. @using (Html.BeginForm("upload", "upload", FormMethod.Post, new { enctype = "mutipart/form-data" })) { < ...

Issue encountered in TypeScript: Property 'counter' is not found in the specified type '{}'.ts

Hey there, I'm currently facing an issue while trying to convert a working JavaScript example to TypeScript (tsx). The error message I keep encountering is: Property 'counter' does not exist on type '{}'.ts at several locations wh ...

Error in jQuery: the variable has not been defined

I am currently working on creating a custom plugin using the code below. I have encountered an error at the line if(options.controls == true) The specific error message says 'options is not defined'. How can I properly define this variable? ( ...

how to combine a string in JavaScript using a prefix and suffix

Anion Gap Body Surface Area (BSA) Creatinine Clearance Stack Overflow i want to add "String" Before Text and "String" after end of text. I have Following expression which runs perfectly in excel:- =CONCATENATE("",B1,"") Output:- <string>Anion Ga ...