The controller has not been defined

Greetings and thank you for your anticipated assistance. I am relatively new to Angular and still learning Javascript. I've encountered an issue that has me stumped.

WebStorm is indicating that my imported controller is not defined. I'm trying to reference it from another file, which has been properly imported. My goal is to utilize the Spotify API with the angular-js web wrapper.

Index.html

<!DOCTYPE html>
<html ng-app='app'>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="spec/lib/angular-spotify/src/angular-spotify.js"></script>
    <script src="spec/lib/angular-spotify/examples/main.controller.js"></script>
    <title>angular-spotify demo!</title>
    <style>
        ul {
            list-style: none;
        }

        .media {
            display: table;
            width: 100%;
        }

            .media img {
                display: table-cell;
                max-width: 100%;
            }

        .media-details {
            padding-left: 1em;
            vertical-align: middle;
            display: table-cell;
            width: 90%;
        }
    </style>
</head>
<body ng-controller='test'>
    <script>
        var app = angular.module('app');
        app.controller('test');
    </script>
    
    <!--Page Content Here-->

main.controller.js

Angular module settings and functions related to Spotify integration.

angular-spotify.js

Javascript module responsible for handling Spotify API calls and authentication methods.

Console Log

Uncaught ReferenceError: test is not defined
  Error details here...

Answer №1

The module and the application have clear definitions, however, the scripts tags within the body are in the wrong place. Angular does not function well with imperative programming.

To access the controller $scope members, your body should utilize bindings like this:

<body ng-controller='test'>
    <div ng-repeat="artist in artists">
      {{artist|json}}
    </div>
</body>

Once the ajax request is complete, the data should automatically display. If an error occurs, more details can be found in the browser's developer console.

Additionally, the controller scope does not include a method called getAlbum.

To address these issues (assuming the login workflow is no longer necessary), add a controller method for loading album data and call it from the controller or another directive like ng-click:

// inside the main controller
$scope.loadData = function () {
  Spotify.getAlbum('your album Id').then(function (data) {
    $scope.albumInfo = data;
  });
};
// call the function here or use ng-click, for example.
$scope.loadData();

Display the data using bindings, such as formatting it as json:

<html ng-app="app">
<body ng-controller="test">
    <pre>{{albumInfo | json}}</pre>
</body>

Please note that the html has been simplified; make sure to load angular, main.controller, and Spotify.

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

jQuery link disabling malfunctioning

I attempted to disable a hyperlink by checking a certain condition using an if statement in jQuery. After researching other solutions, I implemented the following code: if (discussionPointsSize == 0) { $('#discussionPointsLink').preventDefault ...

Error encountered when attempting to utilize the push() method on a two-dimensional

My goal is to arrange database data by their groupID (each with a different groupID in a separate sub-array). However, when I attempt to push the data into an array, I encounter the following error: TypeError: Cannot read property 'push' of unde ...

What could be the reason for hotkeys.trigger not functioning properly on a Mac device?

I have been trying to use this protractor command to revert the text inserted in a specific element, but unfortunately it is not successful. Can anyone explain why? Here is the command I am using: hotkeys.trigger('mod+z',{targetElement: $(prope ...

An uncaught error occurred in ReactJs while trying to read the property 'map' of an undefined variable within the {Component} component

As I pass my array to the props of the sidebar component and try to access it in my child component... After saving the code and checking the browser, an error message pops up: https://i.stack.imgur.com/6cPY8.png import React, { Component } from 're ...

What's the reason for the empty data issue in Next.js?

Currently, I am utilizing the Next.js app router in an attempt to retrieve data from a database and access it within the app using fetch. export default async function Home() { try { const userData = await fetch("http://localhost:3000/api/userD ...

How can I enable automatic completion of material components in vscode?

I'm currently following along with a tutorial on YouTube where the author demonstrates how VSCode autocompletes custom material elements when he hits return. However, I am not experiencing the same autocomplete feature when I type and hit return. How ...

Adjusting attention to the switched element

I am currently developing an inline editing feature using AngularJS. Here is the code snippet from my Controller: $scope.toggleEditor = function(){ $scope.editorEnabled = !$scope.editorEnabled; //toggle editor view //struggling with this part $time ...

How can I reference a Bootstrap icon in the buttonImage attribute of a jQuery datepicker?

How can I customize the jQuery datepicker button image? I want to use the Bootstrap calendar icon as the button image for the jQuery datepicker. The icon image can be referenced in the HTML page like this: <i class=icon-calendar></i> When us ...

Combining properties from one array with another in typescript: A step-by-step guide

My goal is to iterate through an array and add specific properties to another array. Here is the initial array: const data = [ { "id":"001", "name":"John Doe", "city":"New York&quo ...

Error message: The property or method "Name" is not defined on this object, but it is being referenced during the rendering process

Currently facing a challenge in implementing the modal closure functionality within the Vue.js template. Take a look at the code snippet: var modalInstance = new Vue({ el: "#modalInstance", data: { displayModal: false } }); Vue.compo ...

Two clicks are needed for an AJAX call to be made

Can anyone help me figure out why my function is not displaying the content after one click? It seems to only work after two clicks. Is there a way to fix this so that the information loads and displays with just one click? function getFuncDoc(funcName, ...

Troubleshooting Problem with $.ajax Call in jQuery Full Calendar (Using Static Events Upon Page Load)

Currently, I am utilizing Yii along with the FullCalendar widget in a view of CalendarController. When the widget is called, it retrieves existing events from the database and displays them within the FullCalendar. In addition to this, I have implemented a ...

What is the best way to extract the upcoming hours from an Array specifically containing night hours?

My task involves working with an array of hours like this: ['10:00:00', '11:00:00', '13:00:00', '14:00:00', '01:00:00']. The goal is to filter and retrieve all the hours that come after the current time. Fo ...

Creating Dynamic Input Binding in Vue.js with an Array of Computed Properties

Currently, I am faced with a situation where I need the v-model binding of an input field to be determined by the computed property's returned value. Take a look at the example provided below: <!DOCTYPE html> <html> <head> <scri ...

Why isn't my Vue.js application automatically refreshing when I add or remove an object from the array?

In my Quasar and Vue.js project, I am working on a form where I can add objects to an array for insertion into the database simultaneously. However, I am facing an issue where the additions or deletions in the array only reflect on the screen after focusin ...

Are there any resources available for optimizing performance on iOS and Android browsers?

Being a web developer means considering the Android and iOS web browsers, which have their own rendering engines and limitations in power and memory. This can pose many complications. Therefore, I'm curious if there is a detailed guide available for ...

Opera's compatibility with jQuery's Append method allows developers to

I recently wrote a jQuery script that interacts with a JSON feed and dynamically creates HTML code which is then added to a designated div on my WordPress site. Surprisingly, the functionality works flawlessly in all browsers except for Opera - where not ...

Error: Missing 1 type argument(s) in generic type definition

I've developed an abstract class structure as shown below: export abstract class CsvFileReader<T> { data: T[] = [] constructor(public file: string) {} abstract mapRow(row: string[]): T read() { this.data = this.file .split(& ...

ngAnimateSwap - animations do not function as intended when boolean expressions are utilized

I adapted the original ngAnimateSwap demonstration from the AngularJS documentation to utilize a boolean expression for triggering the slide animation. Initially, I anticipated the banner to switch back and forth between 'true' and 'false&a ...

Node.js and the Eternal Duo: Forever and Forever-Montior

Currently, I am utilizing forever-monitor to launch a basic HTTP Node Server. However, upon executing the JavaScript code that triggers the forever-monitor scripts, they do not run in the background. As a result, when I end the TTY session, the HTTP server ...