Error: The function 'myAppController' is not defined and is therefore not a valid argument

I am trying to incorporate my service into my controller and print a message to the console (in the Auth Service), but I keep encountering this error: Argument 'myAppController' is not a function, got undefined. Can you help me figure out what I'm doing incorrectly?

Here is how it's set up in my main.js file:

var myApp = angular.module('myApp',['ngRoute', 'ui.router']);

myApp.controller('myAppController', ['$scope', function($scope, AuthService) {
    console.log('controller');
    AuthService.console();
    ...

In my services.js file, this is how I defined the service:

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

myApp.service('AuthService', function(){
    this.console = function(){
        console.log('in the AuthService');
    }
});

When loading the files in my index.html file, I include them as follows:

    <script src="js/main.js"></script>
    <script src="js/services.js"></script>

Answer №1

Remember to also specify it as a string to prevent injection vulnerabilities:

app.controller('AppController', ['$scope', 'AuthService', function($scope, AuthService) {

Answer №2

Create MyApp as Shown Below

let myApp = angular.module("myApp", ['ngRoute', 'ui.router']);

myApp.controller('myAppController', function ($scope, dataService) {

        dataService.fetchData(url).then(function (response) {
            $scope.data = response;
        });

});

app.service('dataService', function ($http, $q) {

   this.fetchData = function (url) {

        let deferred = $q.defer();

        $http({
            method: 'POST',
            url: url,
            data: $.param(User),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        })
            .then(function (response) {

                if (response != null) {
                    deferred.resolve(response);
                }

            })
            .catch(function (error) {

                deferred.reject(error);
            });
        
        return deferred.promise;
    }
});

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

The troubleshooting of a find method in Mongoose

Why is it necessary to use await twice when calling the model function, even though we already used await in the model itself: async function model() { return await data.find({}, '-_id -__v') } When I console.log await data.find({}, '-_id ...

Incorporate JSON data to display SVG images

As a beginner in web development, I have been honing my skills with the AngularJS framework due to its user-friendly nature. Currently, I'm working on pulling JSON data from an API using $http.get method. One of the fields contains an image source i ...

Is there a way to retrieve multiple results by utilizing fetch and randomuser.me?

I am currently working with the randomuser.me API and have set up the fetch request correctly. My goal is to retrieve 5 users separated by commas instead of just one. As mentioned in randomuser.me's documentation, I simply need to append the fetch UR ...

Tips for making my JavaScript form open a new window after submitting

Currently, the link opens in the same window when submitted. I would like it to open in a new window instead. This is the script in the head section: <script type="text/javascript"> function getURL(val){ base = 'http://www.domain.com/'; ...

Creating virtual hover effects on Android browsers for touch events

My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...

Why do Material UI components fail to render in jsdom while using Jest?

During my UI testing using Jest/React Testing Library, I encountered a peculiar issue. In one of my components, the return statement is structured as follows: const sidebarContentUp = ( <Drawer anchor="left" onClose={onMobileC ...

The Service Worker seems to be neglecting to serve the sub-pages at

I've successfully implemented a service worker on my website. The home page loads correctly from the Service Worker cache, and when I visit previously viewed 'posts' while online in Chrome, they load and show as 'from ServiceWorker&apos ...

Can anyone help explain how to use Javascript to reverse the order of table row results that are being output

I am struggling to reverse the order of a table returned from a PHP database using JavaScript. Despite trying to use the reverse() method, I can't seem to get it to work. I would greatly appreciate any guidance you can provide. Below is the JavaScrip ...

Attempting to adjust numerical values to display with precise two decimal places using jQuery

Possible Redundancy: JavaScript: how to format a number with only two decimal places I'm getting confused while using variables and now I can't seem to get the calculation working correctly. Any ideas? $("#discount").change(function(){ ...

What is the best way to iterate through an array and make use of index values while removing any empty elements along the

In my current setup, I have defined two arrays keyVals and rows: keyVals = [ "Status", "ErrorHeading", "ErrorDetail" ] rows = [ { "Hostname": "ABC", "name& ...

Highcharts: Including plotlines in the legend

I need to include a plotline in the legend. Check out my example here. $('#container').highcharts({ xAxis: { tickInterval: 24 * 3600 * 1000, // one day type: 'datetime' }, yAxis: { plotLines: ...

Switching between multiple images using Jquery on a click event

Hi there, I am currently working on a project where I need to use jQuery to switch between three images when clicked. Once the third image is clicked, it should cycle back to the first picture. I was wondering if there is a way to modify the code below so ...

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...

Positioning CSS for a Responsive Button

Currently, I am working on making my modal responsive. However, I am encountering an issue with the positioning of the "SAVE" button. The button is not staying in the desired position but instead disappears. Below is the snippet of my HTML and CSS: .dele ...

Differentiating Between Arrays and Objects in AngularJS ng-repeat

When using ng-repeat to display data in a View from an endpoint in the form of an atom feed, I encountered an issue. The endpoint returns JSON if the Accept header is 'application/json', but when there is only one entry in the atom response, the ...

The error page is requesting a root-layout, which indicates that having multiple root layouts is not feasible

My issue is as follows: The not-found page located in my app directory requires a root-layout which I have added to the same directory. However, this setup prevents me from using multiple root layouts in the structure below. How can I resolve this? It see ...

Ways to receive a POST request from an external server on a GraphQL Server

Currently, I am working on a project that utilizes GraphQL. As part of the project, I need to integrate a payment processor. When a user makes a successful payment, the payment processor sends a POST request to a webhook URL that should point to my server. ...

Is there a way to retrieve a value from localStorage and use it to automatically set the selected option in a UL-based dropdown list upon page load

I have implemented a unique UL-based dropdown list that I discovered here (specifically the third model) as the foundation for a role-based selection box for my users. To enhance user experience, I am storing their role selection in localStorage so they do ...

Implementing Content-Security-Policy for a web application embedded in an iframe

Hey there! I've got this cool webapp called myApp, developed using Spring Boot and Vaadin. It's going to be deployed on a Tomcat server at http://tomcatserver:8080/myApp Now, what I want to do is display the webapp in an iframe like this: <if ...

Shifting elements within Phoria.js

I'm currently working on a game where a ball bounces and falls into a randomly placed bin. I'm wondering if there's a way for the ball to jump and land based on the dynamic coordinates of the bin. If I have knowledge of the direction and dis ...