为什么 Plunker 不加载 AngularJS？答案

【问题标题】：Why is Plunker not loading AngularJS?为什么 Plunker 不加载 AngularJS？
【发布时间】：2019-05-21 08:09:52
【问题描述】：

我打开了一个干净的 plunker 编辑器，将 Angular 添加到其中并编写了一个表达式。但是它不起作用。

代码：

<!DOCTYPE html>

    <html>



    <head data-ng-app="">
        <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
        <link href="style.css" rel="stylesheet" />
        <script src="script.js"></script>
      </head>

      <body>
        <h1>Hello Plunker!</h1>
        <div>
          {{ 1 + 1 }}
        </div>
      </body>

    </html>

我是 Angular 和 Plunker 的新手。我正在使用火狐。谁能帮帮我？

【问题讨论】：

尝试使用 ng-app 而不是 data-ng-app，最好在 <html>-tag 处定义 ng-app... 所以尝试使用 <html ng-app="myApp">

标签： javascript html angularjs plunker

【解决方案1】：

我已经从 google cdn 更新了 angular 脚本。

您需要在脚本上添加一个模块。

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

并在 html 页面中添加模块的引用

<body ng-app="myApp">

查看更新的插件：http://plnkr.co/edit/ObpHaAeV9UXITNiCbhqf?p=preview

【讨论】：

谢谢，实际上是“myApp”部分完成的，我已经多次移动 ng-app，它无处不在 :)

【解决方案2】：

使用 New->AngularJS 创建正确的 angular plunker 项目；

【讨论】：

【解决方案3】：

这不起作用，因为您将data-ng-app="" 放在<head> 标记上，而不是<body>，这是您的{{ 1 + 1 }} 所在的位置。由于它不知道那里应该有一个应用程序，因此 Angular 不会评估该表达式并将其保留为 {{ 1 + 1 }} 而不是 2。

您还使用了 Angular 2.0 而不是当前版本，与当前版本相比，这是对 Angular 的彻底改造。为当前版本添加一个脚本标签<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="text/javascript"></script> 解决了这个问题。

【讨论】：

谢谢，我想我修好了
@user2969329 另外，我注意到您使用的是 Angular 2.0 而不是当前版本。我不完全确定 Angular 2.0 的语法，但如果你使用 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js" type="text/javascript"></script> 添加指向当前版本的链接，它会起作用。