我的Hello World AngularJS应用程序怎么了？

Question

这是代码，不确定为什么不起作用。 在与index.html相同的文件夹中找到了angular.min.js文件

<!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 个解决方案

解决方案1
1 2015-09-02 01:40:44

解决方案2
0 2015-09-02 01:42:49

解决方案3
0 2015-09-02 01:45:25

我的Hello World AngularJS应用程序怎么了？

问题描述

3 个解决方案

解决方案1 1 2015-09-02 01:40:44

解决方案2 0 2015-09-02 01:42:49

解决方案3 0 2015-09-02 01:45:25

解决方案1
1 2015-09-02 01:40:44

解决方案2
0 2015-09-02 01:42:49

解决方案3
0 2015-09-02 01:45:25