Question

这是代码，不确定它为什么不起作用。将angular.min.js文件与index.html

放在同一文件夹中

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
        function HelloWorldCtrl($scope) {
            $scope.helloMessage = "Hello World";
        }
    </script>
</body>
</html>

Answer 1

这是声明控制器的旧语法。现在你不能将angualar控制器声明为全局函数，你应该使用angular.module("appName",[]).controller("CtrlName",function(){});代替。

将您的脚本重写为：

var app = angular.module("myApp",[]);
app.controller("HelloWorldCtrl($scope){
  $scope.helloMessage = "Hello World";
}

并将您的html文件第二行更改为

<html lang="en" ng-app="myApp">

Answer 2

Angular是一个完整的框架，而不仅仅是一个简单的调用。你需要实际做一些事情（通常在js文件中）：

angular.module("myapp",[]).controller('HelloWorldCtrl', ['$scope', function($scope){
$scope.helloMessage = "hello World";
}]);

并且它的HTML是

<!doctype html>
<html lang="en" >
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app="myapp">
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>


    <script type="text/javascript">
    angular.module("myapp",[]).controller('HelloWorldCtrl', ['$scope', function($scope){
    $scope.helloMessage = "hello World";
    }]);
    </script>
</body>
</html>

（请注意，这不是最佳做法，但为了帮助您入门，请在此处参考最佳做法，我发现准确：https://github.com/johnpapa/angular-styleguide）

Answer 3

试试这个

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="angular.js"></script>
    <script type="text/javascript">
        angular.module("HelloWorldApp", [])
        .controller("HelloWorldController", function ($scope) {
            $scope.helloWorld = "Hello World";
        })
    </script>
</head>
<body ng-app="HelloWorldApp" ng-controller="HelloWorldController">
    <h1>{{helloWorld || "undefined"}}</h1>
</body>
</html>

我的Hello World AngularJS应用程序出了什么问题？

3 个答案: