Greetings Universe in angular.js

Having trouble creating a Hello World page in angular.js. When I try to display {{helloMessage}}, it shows up instead of Hello World. I'm not sure where the issue lies.

Within the folder are two files: angular.min.js and HelloWorld.html. In HelloWorld.html, I've written the following code:

<!doctype html>
<html lang = "en" ng-app>
<head>
    <meta charset = "utf-8">
    <title> Hello World </title>
</head>

<body>
    <h1 ng-controller = "HelloWorldCtrl">{{helloMessage}}</h1>
    <script src = "angular.min.js"></script>
    <script type = "text/javascript">
    function HelloWorldCtrl($scope){
        $scope.helloMessage = "Hello World";
    }
    </script>
</body>
</html>

Answer №1

Your controller is not properly configured. It must be linked to your angular application. Start by giving your app a name:

<html ng-app='myApp'> 

Next, modify your script like this:

angular.module('myApp', []).controller('HelloWorldCtrl',    
    function($scope) {
        $scope.helloMessage = "Hello World";
    }
);

Check out the documentation for more information: https://docs.angularjs.org/api/ng/directive/ngApp

Answer №2

Make sure you're not just creating a function HelloWorldCtrl, but also assigning it to a controller. Don't forget to refer to the documentation for more information.

Here's the correct way to do it:

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

myApp.controller('HelloWorldCtrl', ['$scope', function($scope) {
  $scope.greeting = "Hello World";
}]);

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

React Three Fiber - THREE.BufferGeometry.computeBoundingSphere(): The calculated radius is invalid. It is possible that the "position" attribute contains NaN values causing this issue

Currently, I am working on a website using Reactjs and React Three Fiber for 3D components. Out of the total 3 3D components, 2 are functioning properly. However, one of them suddenly stopped working more than 6 hours ago, and I have been unable to find a ...

Determine if an array of objects within React JS contains additional objects

I need assistance in displaying the <div className="songs-list-header-col">Album</div> only if the tracks array contains the artist property as an object. In cases where the artist is not an object, I do not want to display the <di ...

navigating a collection of objects and retrieving individual property values

I am having trouble extracting values from an array of objects, specifically only the values from the first object in each sub-array. Here is how my array of objects looks: items [ [ {id: 1, title: "title1", imgUrl: "https://someimage1"}, {id: 2 ...

What is the best way to connect a string to a scoped variable in a view?

I'm looking to connect a string to a scope variable that will be determined by user input in an input field located within a specific view. The goal is for the combined string and scope variable value to appear in another div within the view. Here&ap ...

Leveraging ng-class with an Angular $scope attribute

My HTML structure includes: <div class="myDiv"> <div style="width:200px; height:200px;background-image:url('img/200x200/{{largeImg}}.png');" ng-class="{'magictime foolishIn': 1}"> <span> { ...

What separates the functions `useRef` and `createRef` from each other?

As I was delving into the hooks documentation, I came across useRef. Upon examining their example… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` refers to the mounted text inpu ...

When the button is clicked, I desire to reveal the background color of a specific div

<div class="mat-list-item" *ngIf="authService.isAdmin()" (click)="openModal('site-settings', site.siteID)"> <span class="mat-list-item-content">{{ "Application.site_settings_label&q ...

Attempting to simultaneously start my node.js server and React .js app, resulting in the error message 'ERR_MODULE_NOT_FOUND'

Currently facing issues while setting up a server for an ecommerce site being built in React. Attempting to run both the React app and the server simultaneously using npm run dev, but encountering various errors that persist even after attempted fixes foun ...

Before clicking the submit button, send field values using Ajax

Is it possible to send values using ajax before submitting form data with a submit button? I have the code below. It successfully reaches the success function, but I am unable to retrieve the posted data. Any ideas on how to solve this issue? Your help an ...

Tips for adding a search bar to a material-ui MenuItem?

Can someone guide me on how to add a search input within the component? I reviewed the material-ui documentation, tried various approaches, but haven't been successful yet. Here's the code for the demo What I attempted: const searchBar = `${& ...

Issue with bootstrap-timepicker not functioning within ng-repeat loop

Check out the Plunker demo I have been experimenting with creating multiple instances of the timepicker. When I hardcode them, they function properly. However, once I attempt to put them into an ng-repeat, they stop working. Any suggestions on how to reso ...

What is the best way to use toggleClass on a specific element that has been extended

I have been experimenting with this code snippet for a while. The idea is that when I hover my mouse over the black box, a red box should appear. However, it doesn't seem to be working as expected. Could someone please review this script and let me k ...

Combining values and eliminating duplicates from an external API: A step-by-step guide

My API provides soccer game results in this format: results:[ { Group:"A" Home: "Fc Barcelona", Away: "Fc Porto" Score: { Home: 0, Away: 0 }, { Group:"A" Home: "AC Milan", Away: "Fc Barcelona" Score: { Home: 0, Away: 1 }, { Group:"A" Home: "FC Barcelona" ...

Error: The specified function in the schema is not valid for the current operation mode

I'm facing an issue with validating a material ui form using Formik and Yup. The error keeps popping up. This is the schema I imported from another file: export const validationSchema = Yup.object({ email: Yup.string() .email('Invalid Ema ...

Issue with Vue Composition API: Unable to append a property to an object

Currently, I am utilizing Vue's Composition API in my project. However, I have encountered an issue where the template renderer does not recognize changes when I add a property to a ref object. Below is the code snippet that demonstrates this problem: ...

The JavaScript code is not being executed, as the address bar displays the function name instead

In my project, I have created numerous "js-classes" with various functions spread across different files. Unfortunately, the codebase is too large to share entirely. However, towards the end of the project, I encountered a bug where a specific function wa ...

Discover the most effective method for identifying duplicate items within an array

I'm currently working with angular4 and facing a challenge of displaying a list containing only unique values. Whenever I access an API, it returns an array from which I have to filter out repeated data. The API will be accessed periodically, and the ...

Troubleshooting the Ui-router refresh problem

I set up my ui-router configuration as follows: app.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $stateProvider .state('home', { url: "/home", templateUrl : 'h ...

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

Can the keypress event be modified within the Google Chrome browser?

My code is functioning in IE but not in Chrome. I am having issues with the event not changing. Is there a different method for achieving this in Chrome, rather than assigning specific values to the charCode, keyCode, and which variables? You can view my ...