Question

我试图让我的AngularJS HelloWorld工作，但我不能。我的代码如下：

<!DOCTYPE html>
<html np-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angular Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("appCtrl",function($scope){
            $scope.mensagem="HelloWorld!";
        });
        console.log(angular);
        console.log(app);
    </script>
</head>
<body>
    <div ng-controller="appCtrl">
        {{mensagem}}
    </div>
</body>

输出：

{{mensagem}}

我在搜索结果中搜索了类似的问题，但只找到了缺少ng-app属性的问题我尝试在Firefox和Chrome中打开我的文件，我得到了同样的错误。同时记录angular和app表明它们都已定义。我不知道自己做错了什么。

Answer 1

在您的HTML标记中，您拼写错误ng-app，这可能是它无法正常工作的主要原因。您还应该将body for Angular放在body的末尾，这样可以确保在脚本运行之前定义app和controller元素：

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Angular Test</title>
</head>
<body>
    <div ng-controller="appCtrl">
        {{mensagem}}
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("appCtrl",function($scope){
            $scope.mensagem="HelloWorld!";
        });
        console.log(angular);
        console.log(app);
    </script>
</body>
</html>

AngularJS HelloWorld无法正常工作

1 个答案: