AngularJs Error: [ng:areq]

Question

I get an [ng:areq] Error, might be silly, but I didn't see through it.

Done some research found nothing helpful.

Demo code:

<!DOCTYPE html>
<html ng-app>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/javascript; charset=utf-8" />
    <title>Angular Third Example</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
    <script>
        function NameCtrl($scope) {
          $scope.firstName = 'John';
          $scope.lastName = 'Doe';
        }
   </script>
</head>
<body ng-controller="NameCtrl">
    First Name: <input ng-model="firstName" type="text" />
    <br />

    Last Name: <input ng-model="lastName" type="text" />
    <br />

    Hello {{firstName}} {{lastName}}
</body>
</html>

cs1193 · Accepted Answer · 2014-11-22 10:47:48Z

1

Please don't use this kind of declaration. Kindly use module based declaration.

ng-app does not recognize a name, which is needed.

var app = angular.module('app', []);
    app.controller('NameCtrl', ['$scope', function($scope) {
      $scope.firstName = 'John';
      $scope.lastName = 'Doe';
    }]);

Demo : http://plnkr.co/edit/LOHXR6DrH2o7YtfnCX8G?p=preview

answered Nov 22, 2014 at 10:47

cs1193

1,1092 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cs1193 Over a year ago

@ZiyadMestour You have just upvoted it, it needs to be accepted by clicking tick mark below the voting to the left of the answer.

Wawy · Accepted Answer · 2014-11-22 10:46:26Z

Since angular 1.3.x you can't initialize a controller as a window function. Instead you need to define your app and controller explicitly:

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/javascript; charset=utf-8" />
    <title>Angular Third Example</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
    <script>
       angular.module('myApp', []).
       controller('NameCtrl', function($scope) {
          $scope.firstName = 'John';
          $scope.lastName = 'Doe';
       });
   </script>
</head>
<body ng-controller="NameCtrl">
    First Name: <input ng-model="firstName" type="text" />
    <br />

    Last Name: <input ng-model="lastName" type="text" />
    <br />

    Hello {{firstName}} {{lastName}}
</body>
</html>

Collectives™ on Stack Overflow

AngularJs Error: [ng:areq]

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related