Question

我正在学习AngularJS并且无法获得简单的代码。这是我的代码：

HTML

<!DOCTYPE html>
<html ng-app>
   <head>
      <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
      <script src="script.js"></script>
   </head>
   <body ng-controller="MainController">
      <h1>{{ message }}</h1>
   </body>
</html>

的script.js

var MainController = function($scope) {
    $scope.message = "Test message";
};

当我运行代码时，我总是得到{{ message }}而不是Test message。我错过了什么吗？谢谢。

Answer 1

试试这个

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{ message }}</h1>
  </body>

</html>

<强>的script.js

var app=angular.module("app",[]);
app.controller("MainController",function($scope) {
    $scope.message = "Test message";
});

Answer 2

确保定义具有函数而非变量的控制器（read more

这是一个有效的例子：

angular
  .module('myApp', []);

angular
  .module('myApp')
  .controller('MainController', MainController);

function MainController($scope) {
    $scope.message = "Test message";
};

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{ message }}</h1>
  </body>

</html>

AngularJS样本控制器

2 个答案: