Question

我一直在学习Angular js的教程，我正在使用Web Storm 9.0.1。

我只是创建了一个Html页面并将Angular.js文件加载到项目中。这是我的简单代码：

    <!DOCTYPE html>
<html>
<head lang="en">
    <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>

但是当我运行页面时，我得到的是：{{helloMessage}}作为标题1！我该怎么办？我在这里失踪了什么？

Answer 1

你需要：

<body ng-app>

需要这个ngApp来理解AngularJS必须在哪里工作

这是您的工作代码： http://plnkr.co/edit/lPOknrPD5dykwImL6Pb9?p=preview

Answer 2

您还没有初始化Angular应用程序。您需要做的就是稍微修改body标记。请注意以下正文标记中的ng-app属性：

＆＃13;

function HelloWorldCtrl($scope) {
    $scope.helloMessage = "Hello World ";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</body>

＆＃13;

Answer 3

check Angular hello word in plunker

 <html ng-app="plunker">
    <body ng-controller="MainCtrl">
       <p>Hello {{name}}!</p>
    </body>
  </html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

Answer 4

您始终需要先将指令放入。您也可以使用或任何其他html标记。 ng-app指令告诉浏览器'嘿，这是一个Angular应用程序，让我们看看脚本'。在ng-app之后，它将识别所有Angular指令。

更好的做法是将角度脚本加载到html底部，在body之后。建议最后加载它以获得性能和屏幕加载推理。

Answer 5

谢谢大家，是的，确实问题在于缺少ng-app指令。注意：我关注的教程错过了这一点！

工作守则：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
</header>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

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

Answer 6

缺少ng-app指令：

<body ng-app="">...</body>

Answer 7

如果您还没有找到任何解决方案，请尝试使用此代码。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <title> Hello World </title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

</head>

<body>

    <div ng-app="HelloWorldApp">

        <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

    </div>

    <script>

        // INITIALIZE THE APP.
        var hello = angular.module('HelloWorldApp', []);

        // ADD THE CONTROLLER.
        hello.controller(
            'HelloWorldCtrl',
             ['$scope', function ($greet) {
                $greet.helloMessage = 'Hello World!';
             } ]
        );
    </script>
</body>
</html>

我在DIV元素中定义了“ng-app”指令，稍后在脚本中对其进行了初始化。这样我就可以在DIV元素中添加多个视图和控制器。

例如。在标题标记下添加另一个DIV。

  <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

  <div ng-controller="greet">
      <span> {{greetings}} </span>
  </div>

稍后在脚本标记内添加此代码。

    // ADD THE SECOND CONTROLLER.
    hello.controller(
        'greet',
        ['$scope', function ($greet1) {
            $greet1.greetings = 'Good Morning';
        } ]
    );

Answer 8

您需要做的就是在页面上定义AngularJS应用程序。 ng-app指令定义了AngularJS应用程序。你可以在你的页面上这样做：

<html ng-app=""> or

<body ng-app="">或

<div ng-app="">

确保在开始编写其他角度JS代码之前执行此操作。

有关Angular JS基础知识的更多信息：

http://www.w3schools.com/angular/angular_intro.asp

Answer 9

将角度版本更改为1.2，我做了它并且它有效。这里是： https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js

我的“Hello World”Angular JS无效

9 个答案: