Angular 快速入门 | 使用 Angular.js 构建模块

在本文中，我们将探索如何使用 Angular.js 创建模块。我们将介绍 Angular.js 的基本概念，并提供相应的源代码示例。

首先，确保已经安装了 Angular.js。可以通过以下方式在你的项目中引入 Angular.js：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

一旦 Angular.js 被引入，我们就可以开始创建我们的模块了。Angular.js 中的模块是一个容器，用于组织相关的组件、服务和指令。以下是创建一个简单模块的示例：

// 创建一个名为 myApp 的模块
var myApp = angular.module('myApp', []);

在上面的代码中，我们使用 angular.module 函数创建了一个名为 myApp 的模块。angular.module 函数接受两个参数：模块的名称和一个依赖数组。依赖数组用于指定该模块所依赖的其他模块。

接下来，我们可以在模块中添加组件、服务和指令。让我们创建一个简单的控制器来演示：

// 在 myApp 模块中创建一个名为 MyController 的控制器
myApp.controller('MyController', function($scope) {
  $scope.message = 'Hello, Angular!';
});

在上述代码中，我们使用 myApp.controller 方法在 myApp 模块中创建了一个名为 MyController 的控制器。控制器函数使用 $scope 对象来共享数据和方法。

现在，我们可以在 HTML 中使用我们的模块和控制器了。以下是一个示例：

<div ng-app="myApp" ng-controller="MyController">
  {{ message }}
</div>

在上面的代码中，我们使用 ng-app 指令将模块 myApp 应用到 <div> 元素上。然后，我们使用 ng-controller 指令将控制器 MyController 应用到该 <div> 元素上。最后，我们使用双花括号 {{}} 来绑定控制器中的 message 变量。

当我们在浏览器中打开包含上述代码的 HTML 文件时，将会看到输出 Hello, Angular!。

除了控制器外，Angular.js 还提供了其他许多组件和功能，如服务、指令、过滤器等。你可以根据自己的需求来选择和使用这些功能。

综上所述，我们已经了解了如何使用 Angular.js 创建模块。通过定义模块并在模块中添加组件、服务和指令，我们可以构建功能强大的应用程序。希望这篇文章对你入门 Angular.js 有所帮助！