Question

非常基本的问题：一个“hello world”应用程序开始练习Angular工作，直到我尝试添加控制器，此时表达式在页面上不起作用。

<!doctype html>
<html ng-app='app'>
<head>
<link rel='stylesheet' href='css/styles.css'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/app.js'></script>
<script src='js/angular.min.js'></script>
</head>
<body>
<div class='container col-md-6 col-md-offset-6 panel' ng-controller='FormController'>
    <input type='text' ng-model='name' placeholder='Enter your name'>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html>

JS：

angular.module('app', []).controller('FormController', function($scope){
$scope.name = 'Test';
});

页面最终显示{{name}}，但如果我取出控制器和'app'模块，它就可以正常工作。帮助会很棒，谢谢。

Answer 1

您应该更改包含js文件的顺序。

<script src='js/angular.min.js'></script>
<script src='js/app.js'></script>

Answer 2

此处的工作代码

<!doctype html>
<html ng-app='app'>
<head>
<script src = "http://www.ptutorial.com/angularjs/
angular.min.js"></script>
<link rel="stylesheet" href="http://freeonlinecompiler.ptutorial.com/
css/bootstrap.min.css">
  </head>
<body>
<div class='container col-md-6 col-md-offset-6 panel' ng-controller='FormController'>
    <input type='text' ng-model='name' placeholder='Enter your name'>
    <h1>Hello {{name}}</h1>
</div>
<script>
  angular.module('app', []).controller('FormController', function($scope){
$scope.name = 'Test';
});
  </script>
</body>
</html>

初始化Angular“Hello World”应用程序

2 个答案: