简单 Angular js 不适用于 Plunker

Question

你能看看 This Plunker Demo 并告诉我为什么它不起作用吗？

这是我的代码

<!DOCTYPE html>
<html ng-app>

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

  <body>
    <div ng-controller="FirstController">
      <h1>{{msg}}</h1>
    </div>
  </body>

</html>

并在 script.js 中：

var FirstController = function($scope){
    $scope.msg = "This Must Work!";
};

Answer 1

您链接到的 angular 文件 (https://code.angularjs.org/2.0.0-alpha.31/angular.js) 无效。所以 angular 永远不会加载。

Answer 2

您要使用 angular 还是 angular 2？ Angular 2 目前处于测试阶段，不是常用版本。

如angular1，有一些小错误。

首先，您没有在 javascript 中声明应用程序。为此，您应该这样写：

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

然后，您使用了 ng-app 指令，但没有为其提供值。它应该与您之前创建的 'module' 的值相同（在本例中为 myApp）。

<html ng-app="myApp">

接下来，要能够在您的应用中使用控制器，您必须 'attach' 将其添加到您的应用中。否则，angular 不知道它的存在。我们这样做：

myApp.controller('FirstController', ['$scope', function($scope) {
  $scope.msg = 'This Must Work!';
}]);

我在这个例子中也使用了 angular CDN。

和工作 Plunkr demo

Answer 3

您使用的 angular 引用无效。我用对 angular 的有效引用调整了代码，它工作正常。此外，您没有正确创建控制器，首先您应该创建一个模块，然后向其中添加一个控制器。 "script.js" 文件应该是这样的：

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

app.controller('FirstController', function($scope) {
    $scope.msg = "This Must Work!";
});

这就是带有有效 angular 引用的更新后 html 的样子：

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src= "script.js"></script>
</head>

<body>
    <div ng-app="myApp" ng-controller="FirstController">  
       <h1>{{msg}}</h1>
    </div>
</body>

</html>

注意我还添加了 ng-app="myApp" 来引用创建的模块。希望这有帮助。

简单 Angular js 不适用于 Plunker

Simple Angular js Not Working on Plunker

javascript

angularjs

plunker