Uncaught ReferenceError: angular не определен - AngularJS не работает

Я пытаюсь выучить угловой, и я борюсь с простым нажатием кнопки.
Я последовал примеру, код которого идентичен приведенному ниже.

Результат, который я ищу, заключается в нажатии кнопки, чтобы вызвать предупреждение. Тем не менее, нет ответа на нажатие кнопки. У кого-нибудь есть идеи?

<html lang="en" ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div >
        <button my-directive>Click Me!</button>
    </div>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

    <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

Ответ 1

Вам нужно переместить код приложения angular ниже включения библиотек angular. Во время выполнения вашего angular кода angular еще не существует. Это ошибка (см. Консоль инструментов разработчика).

В этой строке:

var app = angular.module(`

вы пытаетесь получить доступ к переменной с именем angular. Подумайте, какие причины для этой переменной существует. Это находится в angular.js script, который затем должен быть включен первым.

  <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

      <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

Для полноты верно, что ваша директива похожа на уже существующую директиву ng-click, но я считаю, что смысл этого упражнения - это просто практика написания простых директив, поэтому это имеет смысл.

Ответ 2

Используйте директиву ng-click:

<button my-directive ng-click="alertFn()">Click Me!</button>

// In <script>:
app.directive('myDirective' function() {
  return function(scope, element, attrs) {
    scope.alertFn = function() { alert('click'); };
  };
};

Обратите внимание, что в этом примере вам не нужно my-directive, вам просто нужно что-то связать alertFn в текущей области.

Обновление: Вы также хотите, чтобы библиотеки angular загружались до вашего блока <script>.

Ответ 3

Чтобы дополнить правильный ответ m59, здесь работает jsfiddle:

<body ng-app='myApp'>
    <div>
        <button my-directive>Click Me!</button>
    </div>
     <h1>{{2+3}}</h1>

</body>

Ответ 4

Как вы знаете, angular.module (объявлен в файле angular.js. Перед тем как получить доступ к angular.module, вы должны сделать его доступным, используя <script src="lib/angular/angular.js"></script> (в вашем case) после этого можно вызвать angular.module. все будет работать.

лайк

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>
</head>
<body ng-app="myApp">
    <div >
        <button my-directive>Click Me!</button>
    </div>
    <h1>{{2+3}}</h1>

</body>
</html>

Ответ 5

я забыл добавить строку ниже в мой HTML-код после того, как я добавил, что проблема решена.

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

Ответ 6

Если вы новичок и думаете, что angular включен в ваш проект, проверьте, добавлен ли он в ваш проект или нет. в Visual Studio перейдите в обозреватель решений, затем остановите подачу и щелкните правой кнопкой мыши на угловом проекте и добавьте папку в свой проект.