我的AngularJS表达式不起作用

时间:2015-04-10 09:15:54

标签: javascript angularjs expression

我最近开始学习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}}之类的东西尝试了它,但它仍然没有用。 任何帮助将不胜感激。谢谢!

1 个答案:

答案 0 :(得分:1)

根据我的评论,您显然没有添加script标记来引用包含您的应用模块初始化和控制器代码的文件,这就是您的表达无法正常工作的原因。

您应该在头部的角度脚本下面加上该脚本。

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

重构奖励:一旦您开始工作,请执行一些重构并将所有脚本移出标题,并将其放在HTML底部,在HTML文档的结束标记之前。它将提高页面加载性能。您还可以考虑使用 Bower 来管理您的依赖项(Angular等)。