Question

http://codepen.io/krabbypattified/pen/oYxmKz

＆＃xA;＆＃xA;

查看Codepen以上。 Chrome DevTools控制台返回错误：[$ injector：modulerr]。注释脚本区域时会发生相同的错误。

＆＃xA;＆＃xA;

但是，当脚本区域被注释并且（相同的）JS部分被取消注释时，Angular可以正常工作而没有错误。为什么会发生这种情况？

＆＃xA;＆＃xA;

注意：我有一个大型应用程序并将此错误隔离开来。我正在使用Prepros服务器而且我遇到了同样恼人的$ injector错误。

＆＃xA;＆＃xA;

 ＆lt; div ng-app =“testApp”＆gt;＆ #xA; ＆lt; div ng-controller =“testController”＆gt;＆＃xA; ＆LT; H1＆GT; {{TITLE}}＆LT; / H1＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;＆lt; / div＆gt;＆＃xA;＆＃xA;＆lt; script＆gt;＆＃xA; var app = angular.module（'testApp'，[]）;＆＃xA;＆ #xA; app.controller（'testController'，function（$ scope）{＆＃xA; $ scope.title =“Hello，World！”;＆＃xA;}）;＆＃xA;＆lt; / script＆gt;＆ #xA;

＆＃XA;

Answer 1

＆＃13;

<div ng-app="testApp">
  <div ng-controller="testController">
    <h1>{{title}}</h1>
  </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
  var app = angular.module('testApp', []);

  app.controller('testController', function($scope) {
    $scope.title = "Hello, World!";
  });
</script>

＆＃13;

您的angularjs库引用不适用于您的代码。

Answer 2

在codepen中，将您的脚本附加到HTML而不是在设置窗口中提及

<强> CODEPEN DEMO

问题是HTML窗口中的codepen只能包含HTML代码，

检查此处是否有效，

<body>
  <div ng-app="testApp">
    <div ng-controller="testController">
      <h1>{{title}}</h1>
    </div>
  </div>
  <script>
    var app = angular.module('testApp', []);

    app.controller('testController', function($scope) {
      $scope.title = "Hello, World!";
    });
  </script>
</body>

<强> DEMO

Answer 3

Codepen在HTML之后添加代码，因此初始化Angular的脚本无法访问angular。如果你改为这样就可以了。

<div ng-app="testApp">
  <div ng-controller="testController">
    <h1>{{title}}</h1>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script>
var app = 
    angular.module('testApp', []).controller('testController', function($scope){
  $scope.title = "Hello, World!";
});
</script>

为什么AngularJS不使用内联<script>进行初始化？

3 个答案: