Question

有什么问题？

<!doctype html>
<html lang="en" ng-app='SOO'>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div ng-controller='someController'>
        <p>{{someData}}</p>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
    <script>
        $(function(){
            var app = angular.module('SOO', ['ngRoute']);
            app.controller('someController', function($scope){
                $scope.someData = 'Ok, all good!';
            })
        })
    </script>
</body>
</html>

控制台中的错误消息：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-beta.7/$injector/modulerr?p0=app&p1=Error…s.org%2F1.3.0-beta.7%2F%24injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20E...<omitted>...2) angular.js:36

但官方网站的例子正常。我看不出严重的差异。

Answer 1

变化：

var app = app.module('SOO', ['ngRoute']);

要：

var app = angular.module('SOO', ['ngRoute']);

删除包装代码的jQuery文档就绪处理程序：

<script>
  var app = angular.module('SOO', ['ngRoute']);
  app.controller('someController', function($scope){
    $scope.someData = 'Ok, all good!';
  });
</script>

来自documentation：

Angular会在DOMContentLoaded事件或自动时自动初始化如果当时是document.readyState，则会计算angular.js脚本已设置为“完成”。此时Angular会查找ng-app 指定应用程序根目录的指令。

Answer 2

只需删除Jquery语句$（function（）{}），然后一切正常。

<!doctype html>
<html lang="en" ng-app='SOO'>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <div ng-controller='someController'>
      <p>{{someData}}</p>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-route.min.js"></script>
    <script>      
      var app = angular.module('SOO', ['ngRoute']);
      app.controller('someController', function($scope){
       $scope.someData = 'Ok, all good!';
      });        
    </script>
  </body>
</html>

为什么角度不起作用？

2 个答案: