Angular JS promise not fulfilling its return obligation

I am a beginner in Angular JS and encountered an issue while trying to load a JS file in a cshtml extension. I was able to alert the message 'testing 1' but not 'testing 2'. Can someone help me understand what might be causing this issue? Any guidance would be greatly appreciated. My understanding is that when the page loads, it should run the $q.all function correctly. However, for some reason, it's not functioning as expected.

var app = angular.module('myApp');
alert("Testing 1");
app.controller('ListController', function ($scope, $q, $http,$timeout) {
   
    function doTask1() {
        var deferred = $q.defer();
        deferred.resolve("Testing 2");
        return deferred.promise;
    }
    console.log("ListController instantiated");
    $q.all([
        doTask1(),
        
    ]).then(function (value) {
        
        alert(value);
    });
    
});

Within the cshtml file (all Angular dependencies are located in "~/Views/Shared/_Layout.cshtml"), there are no errors in the console log indicating that Angular has been successfully imported.

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div ng-controller="ListController as listCtrl" class="margin-top-80px">

</div>

@section Scripts{

    <script src="~/Scripts/controllers/News/ListController.js"></script>
}

Here is the output showing the alert message "testing 1"

However, the console log remains empty

Answer №1

The issue at hand may be due to the controller not being initialized. To aid in troubleshooting, add a console log to confirm the initialization of the controller:

var app = angular.module('myApp');
alert("testing 1");
app.controller('ListController', function ($scope, $q, $http,$timeout) {
   
    function doTask1() {
        var deferred = $q.defer();
        deferred.resolve("testing 2");
        return deferred.promise;
    }

    //**********DEBUGGING
    console.log("ListController initiated successfully");

    $q.all([
        doTask1(),
        
    ]).then(function (value) {
        
        alert(value);
    });
    
});

Answer №2

Problem solved! Big thanks for the assistance!

Instead of using:

var app = angular.module('myApp');

I made this change:

var app = angular.module('myApp',[]);

Furthermore, Instead of:

<div ng-controller="ListController as listCtrl" class="margin-top-80px">
</div>

consider adding "ng-app"

<div ng-app="myApp ng-controller="ListController as listCtrl" class="margin-top-80px">
</div>

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

[Vue alert]: Issue encountered with intersect unbind hook in directive: "TypeError: Cannot access 'observer' property of undefined"

I'm puzzled by the appearance of this message. It only shows up when I click on a button and get redirected to the page using router.push. [Vue warn]: Error in directive intersect unbind hook: "TypeError: Cannot read property 'observer&apos ...

Exploring Illumination with Three.js

I'm interested in exploring the light properties further. I am curious about the variables used in the DirectionalLight.js and SpotLight.js source codes. Could you explain the difference between castShadow and onlyShadow? Is there a way to manage th ...

How can I effectively handle extensive data parsing from a file using JavaScript?

Looking to optimize data parsing in JavaScript for a large file? I'm currently using JSON parse for a 250MB file, but it's too slow. Is there a faster method to extract a high volume of data without iterating through every character? The file con ...

What is the best way to add <li> to every element in an array?

I had a tough day today trying to figure out my code. My English isn't the best, so explaining my issue is hard. I decided to illustrate my problem in HTML and specify the kind of styling I need to achieve with JS. I also included an example using the ...

Struggling to achieve improved results with Ambient Occlusion in three.js

After reviewing the demonstration here . var depthShader = THREE.ShaderLib[ "depthRGBA" ]; var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms ); depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vert ...

"Seamless payment processing and gratitude display in PHP and JavaScript checkout and

I am currently working on integrating a Stripe checkout for my ecommerce website as part of my latest project. Everything seems to be functioning well, but I have a few questions that are causing some confusion. Is it a good idea to use AJAX for the che ...

AngularJS - Array binding issue not updating in directive

I am currently developing a directive that has the ability to display a series of controls. Each individual control is implemented as a directive named fsFilter. In the controller managing the parent element, I establish a binding between the filters arra ...

Guide on inserting random numbers into an array and calculating their total with ReactJs

My issue lies with a random number generator method that produces random numbers between 1 and 6. I have been adding these numbers to an array one by one, but the problem is that only the current value gets pushed into the array each time, not the previous ...

The method to eliminate the default active class using AngularJS when clicking on different links

Here is the scenario: The first link is initially active and highlighted with the active class when the page loads. <a class="button active" ng-click="$parent.Filter = ''" ng-class="{ 'active': Filter === '' }"> Test l ...

Poor efficiency in $watch functionality

I have incorporated the angular range slider into my project to enhance the Slider functionality. Below is a snippet of the code being utilized: The directive syntax in its minimal form: <body ng-controller=“MainController as MC”> <div r ...

Creating a 2D array matrix in JavaScript using a for loop and seamlessly continuing the number count onto the next row

I'm attempting to create a 2d matrix with numbers that continue onto the next row. var myMatrix = []; var rows = 5; var columns = 3; for (var i = 0; i < rows; i++) { var temp = 1; myMatrix[i] = [i]; for (var j = 0; j < columns; j++) ...

The functionality of vue-simple-alert is not compatible with Nuxt.js

I've been attempting to integrate the vue-simple-alert package into my Nuxt.js application, but unfortunately, it's not functioning as expected. Here are the steps I've followed: First, I installed and added the package to my package.json u ...

"Creating eye-catching popup images in just a few simple steps

<div className="Image popup"> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Image popup" > <img src="../img/navratri-1.png" alt="Image popup" /> <b ...

Can you explain the process of utilizing CSS to create a smooth transition effect with

In the example application, I am utilizing the following plugin: I am perplexed by this line of code: style="width: 538px; transition: opacity 10000ms cubic-bezier(0.42, 0.65, 0.27, 0.99) 0s;. Can someone explain how the transition works? From what ...

Protractor struggles with locating elements within separate div elements on a single webpage

I'm currently developing a test script using Protractor for the specified web page. https://i.stack.imgur.com/CrMzG.jpg My goal was to target each field using their unique locator. Below is the test script I have created. describe('Protractor ...

Creating a Webgrid in MVC and integrating it with a custom class in AngularJS

Hey there, I'm a beginner when it comes to AngularJS and I'm looking to bind the webgrid within the method of AngularJS. $scope.SaveDetails = function () { debugger; var UserID = '@Session["ID"]'; ...

What methods can I use to locate the circular dependency within my program?

I am facing numerous circular dependency errors in my Angular project, causing it to malfunction. Is there a way to identify the section of the code where these circular dependencies exist? Warning: Circular dependency detected: src\app&bs ...

Angular Field Reverting Back to Default Name During Editing

I need assistance with a remote process to retrieve a user's name and then allow it to be edited and saved. Although I am successful in obtaining the name, any attempt to change it results in it reverting back to the original name. Could there be an ...

What is the process for displaying the save file dialog in Safari?

I'm struggling with generating a PDF and saving it as a file in Safari using an Angular app and DocRaptor. I've tried various methods from Stack Overflow, but none seem to trigger the save file dialog. Instead, they either open the file in the cu ...

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...