Пример области AngularJS не работает локально

Я просто читал учебник AngularJS онлайн, и в основном они приводили в качестве примера FIDDLE. Теперь я попробовал пример локально, и он не работает. Мой HTML выглядит следующим образом:Пример области AngularJS не работает локально

<!doctype html> 
<html class="no-js" lang="" ng-app="" > 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title>Title</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
     <!-- Place favicon.ico in the root directory --> 
     <link rel="stylesheet" href="css/style.css"> 

     <script type="text/javascript" 
       src="https://code.angularjs.org/1.0.1/angular-1.0.1.js"></script> 
     <script type="text/javascript" 
       src="script.js"></script> 
    </head> 
    <body> 
     <!--[if lt IE 8]> 
      <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 


     <div ng-controller="MyCtrl"> 
      <h2>Parent Scope</h2> 
      <input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i> 
      <br><br> 
      <!-- attribute-foo binds to a DOM attribute which is always 
       a string. That is why we are wrapping it in curly braces so 
       that it can be interpolated. 
      --> 
      <my-component attribute-foo="{{foo}}" binding-foo="foo" 
          isolated-expression-foo="updateFoo(newFoo)" > 
       <h2>Attribute</h2> 
       <div> 
        <strong>get:</strong> {{isolatedAttributeFoo}} 
       </div> 
       <div> 
        <strong>set:</strong> <input ng-model="isolatedAttributeFoo"> 
        <i>// This does not update the parent scope.</i> 
       </div> 
       <h2>Binding</h2> 
       <div> 
        <strong>get:</strong> {{isolatedBindingFoo}} 
       </div> 
       <div> 
        <strong>set:</strong> <input ng-model="isolatedBindingFoo"> 
        <i>// This does update the parent scope.</i> 
       </div> 
       <h2>Expression</h2> 
       <div> 
        <input ng-model="isolatedFoo"> 
        <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button> 
        <i>// And this calls a function on the parent scope.</i> 
       </div> 
      </my-component> 
     </div> 
    </body> 
</html>

И мой файл script.js выглядит следующим образом:

var myModule = angular.module('myModule', []) 
.directive('myComponent', function() { 
    return { 
     restrict:'E', 
     scope:{ 
      /* NOTE: Normally I would set my attributes and bindings 
       to be the same name but I wanted to delineate between 
       parent and isolated scope. */ 
      isolatedAttributeFoo:'@attributeFoo', 
      isolatedBindingFoo:'=bindingFoo', 
      isolatedExpressionFoo:'&' 
     } 
    }; 
}) 
.controller('MyCtrl', ['$scope', function ($scope) { 
    $scope.foo = 'Hello!'; 
    $scope.updateFoo = function (newFoo) { 
     $scope.foo = newFoo; 
    } 
}]);

Теперь почему мой пример не работает на местном уровне? Что я делаю не так?

я получаю сообщение об ошибке в консоли со следующим:

Error: Argument 'MyCtrl' is not a function, got undefined 
    at Error (native) 
    at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:488) 
    at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56) 
    at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219) 
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348 
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494) 
    at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213) 
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307) 
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) 
    at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)

источник

2015-10-22 Tenali Raman

Check вашей консоли, каких-либо ошибок? – taxicala

Кстати, вы имеете в виду старую угловую версию. вы должны сначала обновить это, что изменит ваше 'ng-app' на' ng-app = "myModule" ' –

На самом деле есть ошибка! обновленный вопрос –

отлично работает для меня, я только вставить имя модуля нг-приложение тег: MyModule

<html class="no-js" lang="" ng-app="myModule" >

источник

2015-10-22 17:25:07

Пример области AngularJS не работает локально

ответ

Смежные вопросы