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>
or
<body ng-app>

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

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

<html ng-app="myApp">

我们可以使用以下语句在一个外部JavaScript文件中创建应用程序的定义：

angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definition

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

例如，我们将使用ng-controller指令以及您要使用的控制器的名称将控制器附加到body。在下面的代码行中，我们使用“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);

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

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

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

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

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

打印页面