"An issue with ng-controller in AngularJS causing a simple error

Currently, I'm in the process of learning angularJS. While ng-app and ng-model are functioning properly, I've encountered an issue with ng-controller. Despite my efforts, I can't seem to pinpoint where I've gone wrong. My code isn't complex, I'm simply attempting to get ng-controller to work.

What mistake am I making in the code below?

HTML : 

<div ng-app="">
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</div>`

and JS : 

function HelloWorldCtrl($scope){
    $scope.helloMessage="Hello World";
}

The same issue arises when running it in jsfiddle

javascriptangularjs

Answer №1

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

myapp.controller('GreetingCtrl', function($scope){
  $scope.greeting = "Welcome to the world of programming";
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <h1 ng-controller="GreetingCtrl">{{greeting}}</h1>
</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

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

javascripthtml

Extracting the month and year from a datetime string: A simple guide

I am working with a JSON object that includes a field called Month with a string datetime value- { Month : "31-Jan-2022 12:00 AM (EST)" .... .... } Is there a way to extract the Month Name and Year from this string using JavaScript's dat ...

javascriptjqueryreactjs

What is the best way to display an error message when a necessary field is left empty?

I am currently utilizing a plugin to validate my form. My goal is to display an error message on the button when clicked, as all fields in my form are required and need validation. Despite attempting the code below, it hasn't been successful: <Fo ...

javascriptreactjsvalidationmaterial-designmaterial-ui

Error: JSON array contains unterminated string literal

Hey there, var favorites = 'Array ( [0] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] [1] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] [2] => [" 6 "," 1 "," 2 "," 5 "," 3 "," 4 "] ) '; I've been encountering a syntax error - an untermi ...

javascriptjson

Find the current elapsed time using Wavesurfer in real time

I am currently utilizing the waveSurfer library created by katspaugh for playing audio files. In order to display 'elapsed time / total time', I have written code in the following manner: waveSurfer.on('play', function() { $scope.g ...

javascriptangularjshtml5-audio

Exploring the use of ngResource in conjunction with HttpBackend - Potentially unreached rejection issue

Issue Currently, I am working on testing a controller utilizing Karma, Mocha, Chai, and PhantomJS as part of the testing process. IndexCtrl.js (simplified) app.controller('IndexCtrl', ['$scope', '$resource', function($scope ...

javascriptangularjsmocha.jskarma-runnerangularjs-ngmock

Can React-Select be utilized in the browser directly from the CDN?

Is it possible to utilize react-select directly in the browser without using bundlers nowadays? The most recent version that I could find which supports this is 2.1.2: How to import from React-Select CDN with React and Babel? In the past, they provided r ...

javascriptreactjsreact-selectcommonjses6-modules

Issue encountered while generating REST API through Postman resulting in a 500 error

I am in the process of creating a Node.js API for a web application. The GET request is functioning properly, however, when attempting to execute a POST request, I encounter an error messageError Below is the code snippet: //User Schema const mongoose ...

javascriptnode.jspostman

Getting row data in datatables after a button click: A step-by-step guide

Could somebody provide assistance with retrieving a single row of data on a click event? This table is dynamically populated after the AJAX call's Success function is executed <div class="table-responsive table-wrap tableFixHead container-flu ...

javascriptjqueryajaxdatatables

Module for React Native that enables users to select and copy text within a specified view

Is there a feature that enables users to highlight and copy text from within a view? If not, is there a method to identify all "Text" type elements and extract the text they contain? <View> <Text>Text1</Text> <Text>Text2</Text& ...

javascriptandroidreact-nativenpmmodule

Innovative ways to design a responsive carousel with Bootstrap

My goal was to create a slider with divisions inside a bootsrap carousel, and here is what I did. However, I am looking for guidance on how to adjust it so that on screens smaller than sm (of bootstrap), there are only two divisions in one carousel, and a ...

javascripthtmljquerycssbootstrap-5

Troubleshooting: Issues with AngularJS Data Binding in HTML Tables

I have been working on code from an online tutorial but unfortunately, it is not functioning properly. I have checked the script, app, and controller but still cannot identify the issue. Any assistance would be greatly appreciated! ...

htmlangularjs

What is the process for uploading an image with express-fileupload?

Looking to upload an image to Cloudinary via Postman using the express-fileupload library for handling multipart forms. Here is a snippet from my index.ts file: import fileUpload from "express-fileupload"; app.use(fileUpload()); In my controller ...

javascriptnode.jstypescriptexpressfile-upload

Why does json_encode() work for one string and fail for another?

UPDATE: Resolved the issue. Initially, someone left a comment with a solution that was later deleted. Interestingly, simply adding semi-colons after the two json_encode lines fixed the problem. I'm still puzzled as to why string1 worked without a clo ...

phpjavascriptjqueryjson

Issue: Unspecified error when trying to access object attribute in Vue (Nuxt)

I am facing an issue with my 'region' object. It appears to be displayed correctly with all its attributes, but when I try to access specific attributes, it shows up as 'undefined'. const region = { "id": 7, "name": ...

javascriptvue.jsnuxt.js

Please rewrite the following sentence: "I am going to the store to buy some groceries."

As I navigate through my styled HTML page, an interesting sequence of events unfolds. When the Create New List button is clicked, a pink div emerges, contrasting with the orange hue of the All Lists div. At this moment, a new user has joined but hasn' ...

javascriptphphtmljquerycss

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

javascripthtml

Is it possible to switch the linter in grunt.js to jslint instead?

Is it feasible to switch the linter used by grunt.js from jshint to jslint, considering that I am more accustomed to using jslint over jshint as the default linter? ...

javascriptjslintgruntjs

Angular is throwing an error stating that the type '{ }[]' cannot be assigned to the type '[{ }]'

I'm in need of assistance and clarification regarding the error I encountered in my application... When I receive a JSON response from an API with some data that includes an array of products, I aim to extract these products (izdelki) from the array, ...

javascriptarraysangulartypescriptionic-framework

Continuously flowing chain of replies from a series of queries using RxJS

I am exploring the world of RxJS and seeking guidance from experienced individuals. My goal is to establish a synchronized flow of responses, along with their corresponding requests, from a stream of payload data. The desired approach involves sending ea ...

javascriptreactive-programmingrxjs