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

在本章中，我们将向应用程序添加 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 应用程序。因此，我们可以通过在 <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)，如下所示 −

angular
.module('myApp')
.controller('myController', function() {
    // 控制器代码在这里
});

最好使用命名函数而不是匿名函数，以提高可读性、可重用性和可测试性。在下面的代码中，我们使用新的命名函数"myController"来保存控制器代码 −

var myController = function() {
    // 控制器代码在这里
};
angular
.module('myApp')
.controller('myController', myController);

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

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

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

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

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