简单的Angular js不能在Plunker上工作

Simple Angular js Not Working on Plunker

本文关键字：Plunker 工作 不能 Angular js 简单      更新时间：2023-09-26

你能看看这个Plunker演示，让我知道为什么它不工作吗?

这是我的代码

<!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!";
};

你想用angular还是angular 2?Angular 2目前处于测试阶段，并不是常用的版本。

在角1的情况下，有一些小错误。

首先，你没有在javascript中声明应用程序。要做到这一点，你应该这样写:

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

然后，您使用了ng-app指令，但没有为它提供值。它应该与您之前创建的"模块"(在本例中为myApp)的值相同。

<html ng-app="myApp">

接下来，要想在你的应用中使用控制器，你必须把它"附加"到你的应用上。否则，angular不会知道它的存在。我们这样做:

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

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

和一个工作的Plunkr演示

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

您使用的角度引用无效。我用一个有效的引用来调整代码，它工作得很好。此外，您没有正确创建控制器，首先您应该创建一个模块，然后向其添加控制器。"script.js"文件应该是这样的:

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

更新后的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"来引用创建的模块。

相关文章：