在本章中，我们将向应用程序添加角度分量。它是一个Web前端JavaScript框架，它允许使用模型视图控制器（MVC）模式创建动态的单页应用程序。在MEAN.JS体系结构一章中，您已经了解了AngularJS如何处理客户端请求并从数据库中获取结果。

认识AngularJS

AngularJS是一个开放源代码的Web应用程序框架，它使用HTML作为模板语言，并扩展了HTML的语法以清楚地表达您的应用程序组件。 AngularJS提供了一些基本功能，例如数据绑定，模型，视图，控制器，服务等。有关AngularJS的更多信息，请参考此链接。

您可以通过在页面中添加Angular使页面成为Angular应用程序。只需使用外部JavaScript文件就可以添加它，该文件可以下载或直接用CDN版本引用。

考虑我们已经下载文件并通过添加到页面中来本地引用它，如下所示：

现在，我们需要告诉Angular该页面是Angular应用程序。因此，我们可以通过在或标记中添加属性ng-app来实现此目的，如下所示-

or

可以将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”。

您可以将控制器（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);

有关控制器的更多信息，请参考此链接。

定义范围

范围是一个特殊的JavaScript对象，它将控制器与视图连接在一起并包含模型数据。在控制器中，通过$ scope对象访问模型数据。控制器函数采用Angular创建的$ scope参数，可以直接访问模型。

下面的代码片段指定如何更新控制器函数以接收$ scope参数并设置默认值-

var myController = function($scope) {
   $scope.message = "Hello World...";
};

有关控制器的更多信息，请参考此链接。在下一章中，我们将开始使用Angular创建单页应用程序。