angular.min.js encountered a problem at line 118: [ng:areq]

I've just started delving into Angular.js with the book "Angular.js OReilly". I'm attempting to work on the initial examples provided in the book. Following the instructions, I downloaded Angular.js from the official website and created my controller.js file as directed. However, every time I try to run it, I keep encountering an error mentioned in the title.

Here is a brief overview of what I have done:

<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
    <div ng-controller='HelloController'>
        <p>{{greeting.text}}, World</p>
    </div>
</body>
</html>

function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}

Answer №1

To correctly structure your code, place the HelloController inside a tag within the tag.

<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>

Answer №2

Why are you still using outdated syntax? It's time to upgrade to the latest syntax for better efficiency. Below is an example of how you can achieve your requirement with the new code:

<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app

myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
  $scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
    <div ng-controller="GreetingController">
  {{ greeting }}
</div>
</body>

In the new syntax, first create the app and then define the controller. Give it a try!

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

Retrieve data stored in an array from the complete HTML document retrieved by an XMLHttpRequest

Here is a snippet of JavaScript code I am working with: var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState === 4) { var response = req.responseText; console.log(response); } }; req.open('G ...

"Emphasize the Importance of the Key in Angular First and Fore

In my ng-repeat, the structure looks like this: <div ng-repeat="(k, v) in query_p[$index].tags"> I want to prioritize the key (k) with a specific string, such as "foo", to always appear at the beginning of the list. I've tried using the getter ...

Employing a form for initiating a JavaScript function

I need help running a JavaScript method with a custom text variable as a parameter. My goal is to input some text in a form and then pass that value to the method for execution. However, I'm encountering an issue where it seems like the method is rece ...

Encountering the error message "Issue: [$rootScope:inprog] $apply already in progress" while trying to choose an option from a dropdown menu after upgrading from version 1.2 to version 1.6

Since upgrading our AngularJS application from v1.2.9 to v1.6.9, I have encountered a problem where clicking on a dropdown option triggers an error in the developer console. The error message reads: 'Error: [$rootScope:inprog] $apply already in pro ...

AngularJS: Why aren't my ng-options appearing?

Using AngularJS with a dropdown, all the options are displaying correctly when selected but their names are not showing up. I suspect there might be an issue with the ng-options value, but I am struggling to pinpoint it. Here is the snippet of the view: ...

React - utilizing dynamic properties using string values

I am facing a challenge in my test suite where I need to generate components with dynamic props. The desired components should look like this: <Button primary /> <Button secondary /> However, I am currently stuck at this point: [ &apos ...

Implementing the use of a partial view in ASP.NET MVC with the help of JavaScript

I am faced with a challenge of displaying 15 different partial views based on the user's selection from a menu tab. Essentially, I have these 15 menu tabs on one side of the page, and when a user clicks on a tab, the content related to that tab should ...

Press the 'enter' button to post your tweet with Greasemonkey

I am working on a Greasemonkey script that will automatically submit a tweet when the user presses the 'enter' key. The script works perfectly on a basic HTML page with some help from tips I found on this website. However, when I attempt to use t ...

What is the best way to enable editing of a form when the edit button is clicked?

I have created a simple profile page where users can edit their profile information. I have placed a button at the end of the page. Initially, the form should be uneditable, but when the button is clicked, the form becomes editable. I attempted to use `dis ...

When it comes to optimizing JavaScript, what is the best approach for replacing multiple substrings in a string with various strings?

While working on the code I develop and maintain, I encountered an issue. There is a function in my code that takes a query (in the form of a string) and replaces certain substrings within that string with different ones. For instance, if a user inputs th ...

Comparing plain objects and class instances for modeling data objects

What is the recommended approach for creating model objects in Angular using TypeScript? Is it advisable to use type annotation with object notation (where objects are plain instances of Object)? For example, let m: MyModel = { name: 'foo' } ...

Steps to ensure data is completely loaded using axios prior to rendering

Currently, I am learning about React and data fetching. I have a question - is it possible to render the react-dom only after successfully fetching the data? In other words, if we don't receive any data, can we prevent further code execution? Here&apo ...

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

What is the best way to bring functions from a separate file into a NodeJS application?

I recently started working with NodeJS and I'm facing some challenges. In my project, I am using Express for routing and Celebrate for data validation. Within my route.js file, I have successfully implemented a POST request using the create function ...

The gif loader persists even after subscribing

Looking to incorporate the SendGrid subscription widget into my site, but struggling with the implementation. The code provided by SendGrid is partially functional - the loader appears and a success message is displayed upon sign up, but the GIF loader doe ...

jQuery.ajax encountering failure to read success function

Hey everyone, I need some assistance with web programming. I'm facing an issue with ajax while trying to read a JSON response. The catch is, I have to use Internet Explorer for this task, so switching browsers is not an option. I'm stuck because ...

When Node.js is executed as a script, how is the context of `this` determined?

When using the node REPL: $ node > var x = 50 > console.log(x) 50 > console.log(this.x) 50 > console.log(this === global) true It all seems clear when working in this environment. However, things take a turn when running a script: $ cat test ...

When moving from Babel version 5.8.35 to 6.0.0, be prepared for app.js to throw a SyntaxError and encounter an unexpected token during compilation

Currently, I am in the process of enhancing my ReactJS components using webpack. However, I have encountered a hurdle while trying to transition from babel version 5 to 6. Upon attempting the upgrade, it resulted in a stack trace error within my app.js cl ...

Can we include intricate items within a redux store?

As I delve into developing a React application with Redux, I encountered an unexpected scenario. At one point, we inserted a DOM element within the store, causing issues with the Redux extension that freezes when the action is triggered. Despite this compl ...

Is there a way for me to acquire more information on event bubbling in web development, specifically relating to the YUI framework?

Are there any recommended resources for learning about event bubbling, specifically within the context of the Yahoo User Interface libraries (YUI)? ...