为什么 AngularJS 不使用内联<脚本>初始化

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

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

但是，当脚本区域被注释并且(相同的(JS部分未被注释时，Angular工作正常，没有错误。为什么会这样？？

注意：我有一个大型应用程序，并将错误隔离到这种现象中。我正在使用 Prepros 服务器，但遇到了同样烦人的$injector错误。

<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>

<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>

您的 angularjs 库引用不会应用于您的代码。

在代码笔中，以HTML格式附加脚本，而不是在设置窗口中提及，

代码笔演示

问题是 HTML 窗口中的代码笔只能有 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>

演示

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>

相关内容

最新更新

热门标签：