MEAN.JS Angular组件
在本章中，我们将向应用程序添加角度组件。它是一个 Web 前端 JavaScript 框架，允许使用模型视图控制器 (MVC) 模式创建动态的单页应用程序。在 MEAN.JS 架构一章中，您已经看到了 AngularJS 如何处理客户端请求并从数据库中获取结果。
认识 AngularJS
AngularJS 是一个开源的 Web 应用程序框架，它使用 HTML 作为模板语言并扩展了 HTML 的语法以清楚地表达您的应用程序组件。 AngularJS 提供了一些基本功能，例如数据绑定、模型、视图、控制器、服务等。有关 AngularJS 的更多信息，请参阅此 链接。
您可以通过在页面中添加 Angular 来使页面成为 Angular 应用程序。只需使用外部 JavaScript 文件即可添加，可以下载或直接使用 CDN 版本引用。
考虑我们已经下载文件并通过添加到页面在本地引用它，如下所示-
<script src="angular.min.js"></script>
现在，我们需要告诉 Angular 这个页面是一个 Angular 应用程序。因此，我们可以通过向 或 标签添加一个属性 ng-app 来做到这一点，如下所示-
<html ng-app>
or
<body ng-app>
ng-app 可以添加到页面上的任何元素，但它通常放在 或 标签中，以便 Angular 可以在页面内的任何地方工作。
Angular 应用程序作为模块
要使用 Angular 应用程序，我们需要定义一个模块。它是您可以对与应用程序相关的组件、指令、服务等进行分组的地方。模块名称由 HTML 中的 ng-app 属性引用。例如，我们会说 Angular 应用程序模块名称为 myApp 并且可以在 标签中指定，如下所示-
我们可以通过在外部 JavaScript 文件中使用以下语句为应用程序创建定义-
angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition
定义控制器
AngularJS 应用程序依赖控制器来控制应用程序中的数据流。续使用
ng-controller 指令定义滚轮。
例如，我们将使用 ng-controller 指令以及您要使用的控制器的名称将控制器附加到主体。在下面的行中，我们使用控制器的名称作为"myController"。
<body ng-controller="myController">
您可以将控制器 (myController) 附加到 Angular 模块 (myApp)，如下所示-
angular
.module('myApp')
.controller('myController', function() {
// controller code here
});
为了可读性、可重用性和可测试性，最好使用命名函数而不是匿名函数。在下面的代码中，我们使用新命名的函数"myController"来保存控制器代码-
var myController = function() {
// controller code here
};
angular
.module('myApp')
.controller('myController', myController);
有关控制器的更多信息，请参阅此链接。
定义范围
Scope 是一个特殊的 JavaScript 对象，它连接控制器和视图并包含模型数据。在控制器中，模型数据通过 $scope 对象访问。控制器函数采用由 Angular 创建的 $scope 参数，它可以直接访问模型。
以下代码片段指定如何更新控制器函数以接收 $scope 参数并设置默认值-
var myController = function($scope) {
$scope.message = "Hello World...";
};
有关控制器的更多信息，请参阅此链接。在下一章中，我们将开始使用 Angular 创建单页应用程序。
