AngularJS {{message}} 不会显示答案

【问题标题】：AngularJS {{message}} won't showAngularJS {{message}} 不会显示
【发布时间】：2018-07-27 11:52:17
【问题描述】：

AngularJS 的新手。试图在 html 页面上显示来自控制器的消息，但没有显示。我正在使用 AngularJS 版本 1.6.0，并将控制器绑定到 body 标签。我错过了什么？

/// HTML

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

<head>
  <script data-require="angular.js@*" data-semver="4.0.0" 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

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

</html>

// script.js 文件内容

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

app.MainController('MainController', function($scope) {
  $scope.message = "Hello, Angular!";
});

谢谢。

【问题讨论】：

标签： angularjs

【解决方案1】：

由于您使用的是 1.6 版本，不支持全局控制器的声明，您还需要一个模块。

演示

var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
  $scope.message = "Hello, Angular!";
});

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

<head>
  <script data-require="angular.js@*" data-semver="4.0.0" 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

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

</html>

【讨论】：

感谢您的回复 Sajeetharan。我编辑了我的代码以反映我所做的更改，但它仍然无法正常工作。我错过了一步吗？
这是我在 Plunker 上的代码的链接：plnkr.co/edit/rWDDUdupqjT6Tkh1YxBn?p=preview
@rizzo 只需将 app.MainController 更改为 app.controller 代码片段正在工作并且是正确的
谢谢萨吉塔兰。就是这样。

【解决方案2】：

您是否需要在ng-app 标签上传递您的应用名称。

像这样：

<html ng-app="your-app">

所以 Angular 明白它来自哪里。

因此，给您的建议是使用 controllerAs 语法而不是带有 $scope 语法的经典控制器。

像这样：

JS 文件：

var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
    var vm = this; // view model
    vm.message = "Hello, Angular!";
});

HTML 文件：

<body ng-controller="MainController as mainCtrl">
    <!-- or any other name, your choice -->
    <h1>{{mainCtrl.message}}</h1> 
</body>

为什么？：控制器被构建，“更新”，并提供一个单一的新实例，并且 controllerAs 语法更接近于 JavaScript 构造函数比经典的 $scope 语法。

为什么？：它提倡使用绑定到视图中的“点”对象（例如 customer.name 而不是 name），这更符合上下文，更容易阅读，并避免任何可能发生的参考问题 “打点”。

为什么？：有助于避免在带有嵌套控制器的视图中使用 $parent 调用

https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-view-syntax

希望对你有帮助

【讨论】：