Question

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!";
});

谢谢。

Answer 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>

Answer 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

希望对您有帮助

AngularJS {{message}}将不会显示

2 个答案:

JS文件：

HTML文件：