MEAN.JS - 应用程序中的角度组件

在本章中，我们将向应用程序添加角度组件。它是一个 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 应用程序。因此，我们可以通过向 <html> 或 <body> 标记添加属性 ng-app 来实现此目的，如下所示 -

<html ng-app>
或者
<body ng-app>

ng-app 可以添加到页面上的任何元素，但它通常被放入 <html> 或 <body> 标签中，以便 Angular 可以在页面内的任何位置工作。

要使用 Angular 应用程序，我们需要定义一个模块。您可以在其中对与应用程序相关的组件、指令、服务等进行分组。模块名称由 HTML 中的 ng-app 属性引用。例如，我们将 Angular 应用程序模块名称称为 myApp，并且可以在 <html> 标签中指定，如下所示 -

<html ng-app="myApp">

我们可以通过在外部 JavaScript 文件中使用以下语句来创建应用程序的定义 -

angular.module('myApp', []); //[]参数指定模块定义中的依赖模块

AngularJS 应用程序依赖控制器来控制应用程序中的数据流。控制器是使用ng-controller指令定义的。

例如，我们将使用 ng-controller 指令以及您要使用的控制器的名称将控制器附加到主体。在下面的行中，我们使用控制器的名称作为“myController”。

<body ng-controller="myController">

您可以将控制器（myController）附加到 Angular 模块（myApp），如下所示 -

有角的
.module('myApp')
.controller('myController', 函数() {
   // 控制器代码在这里
});

为了可读性、可重用性和可测试性，最好使用命名函数而不是匿名函数。在下面的代码中，我们使用新的命名函数“myController”来保存控制器代码 -

var myController = 函数() {
   // 控制器代码在这里
};
有角的
.module('myApp')
.controller('myController', myController);

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

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

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

var myController = 函数($scope) {
   $scope.message = "你好世界...";
};

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