Question

index.html页面如下所示。

<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js@*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
    {{person.firstName}}
</div>
</div>
</body>
</html>

script.js文件如下所示：

var MainController = function($scope) {
var person = {
    firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};

但是当我启动应用程序时，我的页面会显示：

{{message}}

{{person.firstName}}

而不是它应该的值。我在这里错过了什么吗？我正在使用弹簧靴。我调试了chrome并且看到js文件正确加载，它甚至命中了js文件中的调试器点，因此文件加载不是我想的问题。

更新 - 此工作

var MainController = function($scope) {
var person = {
    firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};


angular.module('mainApp', [])
.controller('MainController', MainController);

的index.html

<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
    {{person.firstName}}
</div>
</div>
</body>
</html>

Answer 1

您需要定义模块和控制器，

<强> HTML：

<body ng-app="DemoApp" ng-controller="DemoController">
  {{message}} {{person.firstName}}
</body>

<强>控制器：

var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
    firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";

});

<强> DEMO

Answer 2

因为角度为1.3+ global function declaration of controller haven't been supported。因此，您首先创建一个角度模块，然后将其所有角度组件绑定到它。

在/js/script.js引用后立即移动angular.js并关闭</script>代码。

<强>代码

angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
    var person = {
        firstName: "Nagendra"
    };
    $scope.person = person;
    $scope.message = "Hello Angular!";
};

然后在mainApp指令中添加ng-app模块，如ng-app="mainApp" html标记。

Demo Here

Angular js绑定表达式不显示值

2 个答案: