我的 AngularJS 表达式不起作用

Question

我最近开始学习AngularJS，但是我运行陷入了一点问题。我尝试在 WebMatrix 3 中使用代码语言，并且指令有效，但表达式在网页中显示不佳。在我输入的代码中：

<p>{{ title }}</p>

然后在网页中它会显示：{{ title }} 而不是我编写的标题。

这是我的其余代码。

index.html:

<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body data-ng-app="myApp">

<div data-ng-controller="MainController">
<p>{{ title }}</p>
{{ 5 + 5 }}
</div>
</body>
</html>

MainController.js:

app.controller('MainController', ['$scope', function ($scope) {
    $scope.title = 'Top Sellers in Books';
} ]);

app.js:

var app = angular.module("myApp", []);

那么有人知道为什么表达式不显示我的数据吗？我用 {{ 5 + 5 }} 之类的东西试过了，但仍然没有用。任何帮助将不胜感激。谢谢！

Answer 1

根据我的评论，您显然没有包含 script 标记来引用包含您的应用程序模块初始化和控制器代码的文件，这就是您的表达式不起作用的原因。

您应该在 head 部分的 angular 脚本下方包含该脚本。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="fileContainingYourControllerScript.js"></script>
</head>

重构奖励：一旦你让它工作，做一些重构并将你所有的脚本移出 header 并将它们放在你的 HTML，在 HTML 文档的结束标记之前。它将提高 page-load 性能。您还可以考虑使用 Bower 来管理您的依赖项（Angular 等）。

我的 AngularJS 表达式不起作用

My AngularJS expressions don't work

javascript

expression

angularjs