基本角度(绑定不显示)

时间:2016-03-30 08:06:07

标签: javascript angularjs data-binding

我有以下目录:

-flapper-news
  -app.js
  -index.html

在app.js中我有:

angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world!';
}]);

在index.html中。我有以下内容:

<html>
  <head>
    <title>My Angular App!</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-app="flappeNews" ng-controller="MainCtrl">
    <div>
      {{test}}
    </div>
  </body>
</html>

当我导航到我的index.html并在google chrome上打开它时,只能看到这样的绑定:

{{test}}

显然不起作用。在我的浏览器控制台中,我看到:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=flappeNews&p1=Erro…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)

我已尝试更改角度版本并在我的角度模块中包含ngroute,但没有任何效果。知道发生了什么事吗?

2 个答案:

答案 0 :(得分:1)

您身上有ng-app="flappeNews"而不是ng-app="flapperNews"

<body ng-app="flapperNews" ng-controller="MainCtrl">

答案 1 :(得分:1)

尝试这样做是有效的:

使用ng-app="flapperNews"代替ng-app="flappeNews"

Plnkr:http://plnkr.co/edit/84P1zpbHdhGOwI2oNMrQ?p=preview