我的“Hello World”Angular JS无法正常工作

My "Hello World" Angular JS is not working

本文关键字：常工作 工作 Hello World JS Angular 我的      更新时间：2023-09-26

我一直在学习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 ！我该怎么办？我在这里错过了什么？

你需要：

<body ng-app>

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

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

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

function HelloWorldCtrl($scope) {
    $scope.helloMessage = "Hello World ";
}
<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>

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';
});

您始终需要将指令放在首位。您也可以在或任何其他 html 标签中执行此操作。ng-app 指令告诉浏览器"嘿，这是一个 Angular 应用程序，让我们看看脚本"。在ng-app之后，它将识别所有Angular指令。

更好的做法是将角度脚本加载放在 html 的底部，在正文之后。建议最后加载它，以提高性能和屏幕加载推理。

谢谢大家，是的，问题确实出在缺少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>

缺少 ng-app 指令：

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

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

<!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';
        } ]
    );

您需要做的就是在页面上定义一个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

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

相关文章：