Аргумент "MainController" не является функцией, получил undefined в AngularJS

Вот мой HTML и JS файл

HTML файл

<!DOCTYPE html>
<html ng-app="">

<head>
  <!--Works with latest Stable Build-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->


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

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  {{message}}
  <br />Total Length: {{message.length}}
</body>

</html>

ФАЙЛ JAVASCRIPT

var MainController = function($scope) {
    $scope.message = "Hello, Michael";
};

Если я использую последнюю стабильную сборку, я получаю следующий результат (что, очевидно, правильно):

Angular Игровая площадка

Привет, Майкл Общая длина: 14

Однако, если я использую бета-версию 18, я получаю следующую ошибку:

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

и страница возвращает следующее:

Angular Игровая площадка № 2

{{message}} Общая длина: {{message.length}}

Любая идея, что может быть причиной этого?

Ответы

Ответ 1

С последними версиями Angular ( > 1.3.0) вы не можете объявить глобальную конструкторскую функцию и использовать ее с ng-контроллером.

Быстрое исправление будет заключаться в создании модуля Angular и добавлении MainController в качестве контроллера.

Здесь я завернул MainController в IIFE, чтобы предотвратить добавление функции в качестве глобальной:

(function() {

    angular
        .module("appName", [])
        .controller("MainController", MainController);

    MainController.$inject = ["$scope"];

    function MainController($scope) {
        $scope.message = "Hello, Michael";
    };

})();

В вашем HTML вам нужно добавить имя модуля Angular в директиву ng-app:

<!DOCTYPE html>
<html ng-app="appName">

<head>
  <!--Works with latest Stable Build-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

  <!--Does not work with Latest Beta-->
  <!--UNCOMMENT ME! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>-->


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

<body ng-controller="MainController">
  <h1>Angular Playground</h1>
  {{message}}
  <br />Total Length: {{message.length}}
</body>

</html>