你能看看这个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"来引用创建的模块。