### AngularJS 学习笔记
#### 一、AngularJS 概述
AngularJS 是一个用于构建动态Web应用的开源框架，由 Google 维护。它通过扩展 HTML 的功能来简化 Web 开发，并允许开发者以声明式的方式编写代码，极大地提高了开发效率。
##### 1.1 AngularJS 的特点
- **数据绑定**：AngularJS 提供了双向数据绑定的功能，即模型（Model）和视图（View）之间的数据同步更新。
- **依赖注入**：AngularJS 使用依赖注入（Dependency Injection, DI）模式，使得代码更易于测试和维护。
- **模块化**：支持模块化的应用程序结构，可以将不同的功能拆分成独立的模块进行管理。
- **指令（Directives）**：提供了一种扩展 HTML 的方式，使页面更加语义化。
- **控制器（Controllers）**：负责管理视图逻辑，是连接模型与视图的桥梁。
- **服务（Services）**：封装了一些特定功能，如HTTP请求等，可以在整个应用程序中复用。
##### 1.2 AngularJS 的工作原理
- **编译过程**：AngularJS 在运行时会扫描HTML文档中的所有AngularJS特定属性，并根据这些属性执行相应的指令。
- **作用域（Scope）**：作用域是控制器和视图之间共享的数据对象。每个控制器都有自己的作用域，它定义了数据模型以及模型上的操作方法。
- **模板（Templates）**：AngularJS 支持动态模板，可以使用表达式来展示数据，也可以使用指令来控制DOM结构。
#### 二、AngularJS 的安装与配置
##### 2.1 安装 AngularJS
可以通过以下几种方式之一来获取 AngularJS：
- **CDN**：最简单的方法是从 CDN 下载最新的 AngularJS 文件并引入到项目中。
- **npm**：使用 npm 安装 AngularJS，适用于 Node.js 项目。
- **Bower**：如果项目使用 Bower 作为包管理器，可以通过 Bower 来安装 AngularJS。
##### 2.2 配置 AngularJS 应用
创建一个新的 AngularJS 应用需要以下步骤：
1. **引入 AngularJS 库**：在 HTML 文件的头部引入 AngularJS 的 JS 文件。
2. **定义模块**：使用 `angular.module()` 方法定义一个新的模块。
3. **定义控制器**：使用 `module.controller()` 方法定义一个控制器，并将其关联到模块上。
4. **关联视图**：在 HTML 中添加 ng-app 属性指定模块名称，ng-controller 属性指定控制器名称。
##### 2.3 创建简单的 AngularJS 应用
假设我们有一个简单的应用，显示当前的时间，并且每秒自动更新一次时间。
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.time = new Date();
setInterval(function() {
$scope.time = new Date();
$scope.$apply(); // 触发数据绑定
}, 1000);
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p>当前时间: {{time | date:'HH:mm:ss'}}</p>
</body>
</html>
```
#### 三、AngularJS 指令详解
AngularJS 中的指令是一种非常强大的特性，它可以让我们轻松地扩展 HTML 的功能。指令可以分为几类：
- **内置指令**：AngularJS 自带的一些指令，如 `ng-if`、`ng-repeat` 等。
- **自定义指令**：开发者可以根据需要自定义指令，从而实现特定的功能。
##### 3.1 内置指令示例
- **ng-bind**：绑定表达式的值到 HTML 元素中。
- **ng-show/ng-hide**：根据表达式的值决定是否显示或隐藏元素。
- **ng-repeat**：遍历数组或对象，并为每个元素生成一组 DOM 节点。
##### 3.2 创建自定义指令
自定义指令的创建过程如下：
1. **定义指令函数**：创建一个函数，该函数接收几个参数，包括元素（element）、属性（attrs）等。
2. **注册指令**：使用 `module.directive()` 方法将指令函数注册到 AngularJS 模块上。
```javascript
app.directive('myDirective', function() {
return {
restrict: 'E', // 指定为元素（Element）
template: '<div>这是一个自定义指令!</div>',
link: function(scope, element, attrs) {
// 这里可以写指令的具体逻辑
}
};
});
```
```html
<my-directive></my-directive>
```
通过以上内容的学习，我们可以了解到 AngularJS 是一个功能强大且灵活的前端框架。它不仅简化了 Web 开发的过程，还提供了丰富的工具和 API 来帮助开发者构建高质量的应用程序。对于初学者来说，掌握 AngularJS 的基础知识是非常重要的第一步。随着对框架的深入理解，开发者将能够利用更多的高级特性来构建复杂的应用程序。
