Question

我只是进入AngularJS的几天，并且一直在努力打印这个简单的消息。我有2个文件，一个是“index.html”，另一个是“app.js”。他们心里很简单：

<!--index.html:-->

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Testing Angular</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div ng-controller="maryCtrl">
        <p>{{mary}}</p>
    </div>

</body>
</html>
<<!--end of index-->


//app.js:

var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {

 $scope.mary = 'had a little lamb.';

});

//end of app.js

页面上的输出应该是“有一只小羊羔”。但我得到了“{{mary}}”。让我很生气的是我有一台独立的电脑，它工作得很好。我想我必须有一个字符错误或缺少扩展名，但我发现很难相信，因为我刚刚在这台预装了AngularJS和Angular-intellisense的机器上下载了Visual Studio 2015。任何帮助或批评将不胜感激。

Answer 1

您需要对angular.js代码的引用。确保它位于脚本引用的顶部。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>

我提供的链接是用于托管在Google CDN上的代码的副本。使用CDN有很多好处，而不是在计算机上安装angular.js的本地副本（只要您没有尝试离线测试代码）。

你可以在angularjs.org上找到CDN链接;只需单击蓝色大下载按钮，您将看到获取angular.js最新版本或旧版本的选项

Answer 2

正如@Pankaj Parkar评论的那样，你应该在你的app.js文件之前引用angular.js文件：

 <!--index.html:-->

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Testing Angular</title>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div ng-controller="maryCtrl">
        <p>{{mary}}</p>
    </div>

</body>
</html>
<<!--end of index-->


//app.js:

var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {

 $scope.mary = 'had a little lamb.';

});

//end of app.js

您可以从https://github.com/angular/angular.js

下载

为什么我的AngularJS代码不起作用？（刚开始）

2 个答案:

为什么我的AngularJS代码不起作用？ （刚开始）

2 个答案:

为什么我的AngularJS代码不起作用？（刚开始）