Tips for verifying the functionality of your AngularJS controller and troubleshooting any potential issues

Testing my controller functionality has been a challenge. I attempted to use an alert function to check if the controller is working properly, but unfortunately, nothing seemed to happen.

JS

routerApp.controller('myCtrl', ["$scope", "$http", 
"$timeout", function($scope, $http, $timeout){
    $http({
        method: 'GET',
        url: 'image.json'
    }).then(function successCallback(response){
        $scope.images = response.data.items;
        console.log(response.data.items);

    $timeout(function(){
        $("#lightSlider").lightSlider({
            item:1,
            auto: true,
            loop:true,
            speed:1000,
            pause:3000,
        });
    },0);
    }, function errorCallback(response){
        alert("Something went wrong!");
    });
}]);

HTML

<div class="banner">
    <ul id="lightSlider">
        <li ng-repeat="image in images">
            <img ng-src="{{image.img}}"  />
        </li>
    </ul>
</div>

Answer №1

Ensure that you include ng-app and ng-controller in your code snippet, as shown below:

Add the following lines to your code:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="routerApp" ng-controller="myCtrl">
<div class="banner">
    <ul id="lightSlider">
        <li ng-repeat="image in images">
            <img ng-src="{{image.img}}"  />
        </li>
    </ul>
</div>
</div>

<script>
var app = angular.module('routerApp', []);
app.controller('myCtrl', function($scope) {


/**
* add your code here
*/
    alert('Debugger');
});
</script>

</body>
</html>

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

Testing controls in AngularJS is an essential part of verifying the

Just diving into the world of Angular and wanting to write some basic unit tests for my controllers, here is what I have so far. app.js: 'use strict'; // Define the main module along with its dependencies angular.module('Prototype', ...

Access Denied: Laravel Auth0 user authentication failure

Running my application as a single page app incorporates Angular 1.x on the client side and Laravel 5.3 for the server/api. Successfully implementing Auth0 authentication on the client side, I encountered a roadblock when trying to access protected routes ...

What precautions should I take to safeguard my HTML/CSS/JS projects when sharing a link with my employer?

Picture this scenario: you need to share a link for your work, but you want to protect it from being easily copied or developed further by someone else. However, since it's a document, any browser can still view it. Can anyone recommend a tool that wi ...

Headers cannot be reset after being sent while attempting to log in a user

I'm very puzzled at the moment, as I'm utilizing bcrypt to authenticate a user login and encountering an unexpected error: Error: Can't set headers after they are sent. Let me share with you the code snippet for that particular route: rou ...

Determine whether one class is a parent class of another class

I'm working with an array of classes (not objects) and I need to add new classes to the array only if a subclass is not already present. However, the current code is unable to achieve this since these are not initialized objects. import {A} from &apo ...

The value selected is not being shown using uib-typeahead in the user interface

Within my AngularJS application, I am utilizing uib-typeahead to provide auto-suggestions in a text box. As I start typing, I can see the suggestions appearing. However, when I select one of the options, it does not display in the text field (ng-model). I ...

Unlocking the Power of $http and Stream Fusion

I'm interested in accessing the public stream of App.net. However, when I attempt to retrieve it using a simple $http.get(), I only receive one response. $http .get('https://alpha-api.app.net/stream/0/posts/stream/global') .success(func ...

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

I am facing a challenge with an array of objects where some properties contain commas. My goal is to split these properties into new objects and recursively copy the rest of the properties into new array elements. For example, consider this original array ...

Manipulating graphics with CSS - dynamically linking Divs

I'm attempting to create a unique design by connecting a series of dynamically generated content divs with CSS. The goal is to have a curved line every three divs, complete with an arrow image at the end and an additional line to separate the contents ...

Instructions: Include the class 'active' only on the initial image within the gallery of images

<div class="placeImgCol "> <div class="slider-outer"> <img src="/images/arrow-left.png" class="prev" alt="Previous"> <img src="/images/arrow-right.png" class="next" alt="Next"> ...

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

Node.js is executing the CRON process twice

Within my Node.js application, I have set up a CRON job that runs every day at 10 AM to send push notifications to users. However, I am encountering an issue where two notifications are being sent to the user's device each time the CRON job is trigger ...

Issue: The function "generateActiveToken" is not recognized as a function

I encountered an issue in my Node.js project and I'm unsure about the root cause of this error. Within the config folder, there is a file named generateToken.js which contains the following code snippet: const jwt = require('jsonwebtoken'); ...

Utilizing Vue.js to dynamically populate one multiple select based on another multiple select's

Can I create two multiple select fields where the options in the second select menu are based on what is chosen in the first select? Clarification: Each category has various associated descriptions. The initial select menu, named "categories", contains ...

NextJS head section contains the HubSpot form script

I'm attempting to insert this script into the Head section of my NextJS project: <script> hbspt.forms.create({ region: "na1", portalId: "XXXXXX", formId: "XXXXXX" }); </script> However, I encoun ...

Executing jQuery callback functions before the completion of animations

My issue revolves around attempting to clear a div after sliding it up, only to have it empty before completing the slide. The content I want to remove is retrieved through an Ajax call. Below you will find my complete code snippet: $('.more& ...

Run a function after all xmlHttpRequests have finished executing

OVERVIEW My website relies on an API to fetch data, making multiple post and get requests to a server upon opening. While we know how long each individual call takes, determining the total time for all calls to complete is challenging. SCENARIO For inst ...

Include a future date with a date extracted from a JSON response

I have retrieved a date from a JSON response. After confirming that the date is indeed a valid date type, I am having trouble setting it to a future date. The snippet of code below shows my attempt: $rootScope.until = response.data.data.dateReceived; //r ...

Issues with sending FormData through Ajax POST requests over a secure HTTPS connection

We are currently experiencing issues with uploading pictures to our server. The process works smoothly on http sites, but encounters errors on https sites. An error message is displayed:https://i.sstatic.net/hPMZv.png Failed to load resource: the server r ...

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...