Problem with Angular controller

Question

Problem with Angular controller

Recently delving into the world of angular.js, I encountered an issue while trying to run a basic controller example.

The error message reads: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Mycontroller&p1=not%20a%20function%2C%20got%20undefined at Error (native)

Here is the code snippet from index.html:

<!DOCTYPE html>
<html ng-app>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-controller="Mycontroller">
 <h1>{{message}}</h1>
</body>

</html>

And here's what is in script.js file:

var Mycontroller = function($scope){
  $scope.message = "Hello Angular";
};

The output displays as follows:

{{message}}

Could someone help me identify where I have gone wrong?

javascript angularjs

Answer 1

Answer №1

To follow the Angular way, it is recommended to create a module and then attach a controller to it. Your code structure should resemble the following:

<html ng-app="my-app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-controller="Mycontroller">
 <h1>{{message}}</h1>
</body>

</html>

Make sure your JavaScript file contains the following:

angular.module('my-app', [])
    .controller('Mycontroller', function($scope) {
         $scope.message = "Hello Angular";
    });

You can also check out the Plunker example here: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview

Answer 2

To follow the Angular way, it is recommended to create a module and then attach a controller to it. Your code structure should resemble the following:

<html ng-app="my-app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

  <script src="script.js"></script>
</head>

<body ng-controller="Mycontroller">
 <h1>{{message}}</h1>
</body>

</html>

Make sure your JavaScript file contains the following:

angular.module('my-app', [])
    .controller('Mycontroller', function($scope) {
         $scope.message = "Hello Angular";
    });

You can also check out the Plunker example here: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview

Answer 3

Answer №2

give this a try, it's effective

Web Design Code Example

 <!doctype html>
 <html ng-app="MyApp">
    <head>
    <title>Sample HTML Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="hello.js"></script>
  </head>

<body>
    <div ng-controller="Hello">

        <p>The ID is {{greeting.id}}</p>
        <p>The content is {{greeting.content}}</p>
        <p>{{message}}</p>
    </div>
</body>

hello.js

      var app = angular.module("MyApp", []);
     app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
     function Helloz($scope, $http) {
     //$http.get('http://rest-service.guides.spring.io/greeting').
     $http.get('/person').
       then(function(data) {
         $scope.greeting =angular.fromJson(data).data;
         $scope.message=angular.fromJson(data).data;
     },null);
 }

Answer 4

give this a try, it's effective

Web Design Code Example

 <!doctype html>
 <html ng-app="MyApp">
    <head>
    <title>Sample HTML Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="hello.js"></script>
  </head>

<body>
    <div ng-controller="Hello">

        <p>The ID is {{greeting.id}}</p>
        <p>The content is {{greeting.content}}</p>
        <p>{{message}}</p>
    </div>
</body>

hello.js

      var app = angular.module("MyApp", []);
     app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
     function Helloz($scope, $http) {
     //$http.get('http://rest-service.guides.spring.io/greeting').
     $http.get('/person').
       then(function(data) {
         $scope.greeting =angular.fromJson(data).data;
         $scope.message=angular.fromJson(data).data;
     },null);
 }

Problem with Angular controller

Answer №1

Answer №2

Similar questions

Simulated 'paths' configuration in non-TypeScript Node.js environment

Highlight a pair of words in a phrase using jquery technology

Utilize Javascript to generate intricate table headers based on JSON data

Error: The module cannot be located due to a recursion issue in resolving within the Angular application

Is it possible to manipulate a parent component's state with a child component?

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

``There seems to be an issue with implementing the SlideDown feature in JavaScript

Angular Translate - Utilizing translate-values attribute for translation

Guide on exporting type definitions and utilizing them with npm link for a local package

Ways to combine two arrays using dual requests in JavaScript with Mailchimp

Certain public files in Express cannot be accessed locally

What is causing the extra space on the right side of the box?

Steer clear of utilizing Number() when working with scientific notation

Tips for eliminating all line breaks in a Node JS application's console log statement

Accessing html form elements using jQuery

Tips for finding the index of distinct values in an array

When utilizing JSON data in node.js, the .find() method may return undefined

Changing the value of a form input name after a $scope.$watch event is activated

React is indicating that returning functions is not appropriate as a React child. This issue may arise if you accidentally return a component instead of <Component /> within the render method

Using PHP in combination with Ajax for automatically performing an action when there is an update

Problem with Angular controller

Answer №1

Answer №2

Similar questions

Simulated 'paths' configuration in non-TypeScript Node.js environment

Highlight a pair of words in a phrase using jquery technology

Utilize Javascript to generate intricate table headers based on JSON data

Error: The module cannot be located due to a recursion issue in resolving within the Angular application

Is it possible to manipulate a parent component's state with a child component?

What could be the reason for the 'tsc' command not functioning in the Git Bash terminal but working perfectly in the command prompt?

``There seems to be an issue with implementing the SlideDown feature in JavaScript

Angular Translate - Utilizing translate-values attribute for translation

Guide on exporting type definitions and utilizing them with npm link for a local package

Ways to combine two arrays using dual requests in JavaScript with Mailchimp

Certain public files in Express cannot be accessed locally

What is causing the extra space on the right side of the box?

Steer clear of utilizing Number() when working with scientific notation

Tips for eliminating all line breaks in a Node JS application's console log statement

Accessing html form elements using jQuery

Tips for finding the *index* of distinct values in an array

When utilizing JSON data in node.js, the .find() method may return undefined

Changing the value of a form input name after a $scope.$watch event is activated

React is indicating that returning functions is not appropriate as a React child. This issue may arise if you accidentally return a component instead of <Component /> within the render method

Using PHP in combination with Ajax for automatically performing an action when there is an update

Tips for finding the index of distinct values in an array