Issue with AngularJS: error:areq Invalid Argument

<!DOCTYPE html>
<html ng-app>
<body  data-ng-controller="SimpleController">
    <div class="container">


        Title:
        <br/>
        <input type="text" ng-model="title" />{{title}}

        <br/>

        <ul>
            <li ng-repeat="item in items | filter:title | orderBy:'category'">{{item.name | capitalize}} - {{item.category | lowercase}}
            </li>
        </ul>

    </div>

    <script src="angular.min.js" ></script>
    <script>
        function SimpleController($scope)
        {
            $scope.items = [
                { name: 'Apple', category: 'Fruit'},
                { name: 'Carrot', category: 'Vegetable'},
                { name: 'Banana', category: 'Fruit'}
            ];
        }       
    </script>               
</body>

I recently watched a tutorial on coding. I've reviewed it multiple times but can't seem to pinpoint the issue. The error message says "https://docs.angularjs.org/error/ng/areq?p0=SimpleController&p1=not%20a%20function,%20got%20undefined" Can someone provide assistance?

Answer №1

In order to render the scope data, it is necessary to assign a view to a controller in the template.

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
            $scope.customers = [
                { name: 'Joe', city: 'Seattle'},
                { name: 'Jack', city: 'Dallas'},
                { name: 'Jason', city: 'Houston'}
            ];
        }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" >
 <div class="container" ng-controller="MyCtrl">


        Name:
        <br/>
        <input type="text" ng-model="name" />{{name}}

        <br/>

        <ul>
            <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}
            </li>
        </ul>

    </div>
</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

How can I incorporate a spinning cog from Font Awesome into a jQuery click event?

I am looking to incorporate a spinning font awesome cog while the data is being fetched and remove it once the process is complete. Here is the HTML snippet that needs to be inserted: <i class="fa fa-spin fa-cog"></i> And this is the accompa ...

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

I am trying to display both parent and child from a Nested JSON data structure. Below is a sample of the JSON data: [ { "name": "India", "children": [ { "name": "D ...

Tips on enhancing an array by separating values with vertical bars instead of commas

I am trying to store checked values in an array and separate them with vertical bars instead of commas. Is there a way to achieve this using the jQuery map .get() function? Any suggestions or links you can provide would be greatly appreciated. Thank you in ...

How can I set the background of specific text selected from a textarea to a div element?

Is it possible to apply a background color to specific selected text from a Text area and display it within a div? let elem = document.getElementById("askQuestionDescription"); let start = elem.value.substring(0, elem.selectionStart); let selection = ...

Passing state from a parent component to a child component and then down to subsequent child components through props in React.js

Currently, all the data is static information. I am using a parent state which is an array containing 4 objects: function App(){ const [searchResults,setSearchResults] = useState([ { name: 'name1', artist: 'artist ...

When using MathJax on an iPhone with a device width setting, you will experience the

Utilizing MathJax to display mathematical symbols on a mobile device- such as an iPhone, I encountered an issue with the meta tag: <meta name="viewport" content="user-scalable=no, width=device-width" /> This seemed to be causing problems as the Mat ...

What is the best way to perform a redirect in Node.js and Express.js following a user's successful login

As I work on developing an online community application with nodejs/expressjs, one persistent issue is arising when it comes to redirecting users to the correct page after they have successfully signed in. Despite reading several related articles and attem ...

Supplying information to my ejs template while redirecting

I am currently working on a feature that involves sending data from the login page to the home page when the user is redirected. This data will then be used in the home EJS file. Below is the code snippet I have implemented: module.exports = functio ...

Clicking in Javascript can hide the scroll and smoothly take you to the top of the page

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

Unable to locate module within a subdirectory in typescript

The issue I'm facing involves the module arrayGenerator.ts which is located in a subfolder. It works perfectly fine with other modules like Array.ts in the parent folder. However, when I introduced a new module called Sorting.ts, it started giving me ...

Vue Eslint Extension

My current project utilizes the eslint vue plugin with specific rules set in place. "rules": { "vue/html-closing-bracket-newline": ["error", { "singleline": "never", "multiline": "always" }], "vue/html-closi ...

Utilizing Django to send post requests to an external API in various views

I am looking to develop a Django App that allows users to submit data via a form and then send a post request to an external API, with the response being displayed on the same page/view. For instance, I have a view defined as follows: class Home(TemplateV ...

How do useCases interact with each other within Clean Architecture principles in NodeJS?

I'm currently working on implementing Bob Martin's Clean Architecture in my project, and I have a question. How do use-cases interact with each other? For instance: In my project, there are entities for Department and Employee. The Department ...

Enhanced Slider Display featuring Multiple Posts for Improved Performance

My Sample Page features a slider that displays over 200 posts, each containing 5 images. However, the slider loads all the images at once, causing my page speed to be very slow. I am looking for an optimized way to display the slider without compromising l ...

Having trouble configuring the sticky-footer correctly

Currently enrolled in a web development course on Udemy, I am facing an issue with the footer on my webpage. Even after setting its CSS position to relative, the footer overlaps the content when more data is added. However, removing this positioning causes ...

Opening the media library in Wordpress through the Angular JS function triggered by an ng-click event

I have been working on a plugin where I need to select an image from the media library. However, despite having implemented the code correctly to call the media library window, I encounter an issue. When I click the button to select an image, nothing happe ...

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

Executing an AJAX POST request from one domain (localhost:9393) to another domain (localhost:9696) using Spring Rest

I am encountering an issue with a form on one app running on localhost:9393. The JavaScript function used to post data is: function registerClient() { var postData = $("#client-reg").serializeArray(); var formURL = "http://localhost:9393/mPaws/client/re ...

Manipulating arrays and troubleshooting Typescript errors in Vue JS

I am attempting to compare the elements in one list (list A) with another list (list B), and if there is a match, I want to change a property/field of the corresponding items in list B to a boolean value. Below is the code snippet: export default defineCo ...

Exploring the power of Angular's $observe and enhancing it with

Currently, I am closely monitoring attribute values by using $observe within a directive. The callback function is triggered when the value of the attribute is changed. However, when I try to update a $scope variable, it does not seem to reflect the change ...