Ошибка: [ng: areq] Аргумент 'CustomersCtrl' не является функцией, получил неопределенное значение

Question

Когда я впервые использовал angular.js, используя http-запрос для динамического рендеринга данных, я столкнулся с такой странной проблемой, нет проблемы с одним только следующим кодом, но если вы поместите его на страницу, которую я хочу сделать,выдает ошибку:

Ошибка: [ng: areq] Аргумент 'CustomersCtrl' не является функцией, получил неопределенное значение

Но я определил CustomersCtrl,

<div ng-controller="customersCtrl">

Это мой код:

<div ng-app="myApp" >
<div ng-controller="customersCtrl">
    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            $http.get("http://localhost:17900/flower/flowers?flowerName")
                .then(function (result) {
                    $scope.names = result.data.body;
                });
        });
    </script>
</div>

Answer 1

Вы должны определить тег <script> вне элемента ng-app.Если вы используете inline js, тег script должен быть определен перед элементом ng-app.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $scope.names = ["Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas"]

    // $http.get("http://localhost:17900/flower/flowers?flowerName")
    //   .then(function (result) {
    //   $scope.names = result.data.body;
    // });
  });
</script>

<div ng-app="myApp">
  <div ng-controller="customersCtrl">
    <p ng-repeat="name in names">{{name}}</p>
  </div>
</div>

Примечание

Рекомендую использовать версию 1.7.5

Answer 2

Проблема в том, что вы включили угловой контроллер в теги html до того, как его определили, поэтому угловой компилятор не смог найти customersCtrl как функцию.Отредактируйте ваш код так:

<script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl',['$scope','$http' function($scope, $http) {
            $http.get("http://localhost:17900/flower/flowers?flowerName")
                .then(function (result) {
                    $scope.names = result.data.body;
                });
        }]);
 </script>
<div ng-app="myApp" >
<div ng-controller="customersCtrl"></div>