AngularJS 简介

AngularJS 是一个由 Google 提供的开源前端框架，旨在简化单页面应用（SPA）开发。它是基于 JavaScript 的，主要用于构建动态网页和 Web 应用程序，尤其适合需要高交互性的应用。AngularJS 提供了很多有用的特性，例如双向数据绑定、指令、依赖注入、模板语法等，使得开发者可以在前端开发中大大提高生产力和应用的可维护性。

AngularJS 最早发布于 2010 年，并在接下来的几年中成为了前端开发的流行框架之一。尽管 AngularJS 已经被 Angular（2 及以上版本）替代，但它仍然在许多现有的项目中被广泛使用。

AngularJS 的特点

双向数据绑定 (Two-way Data Binding):
- 数据绑定 是 AngularJS 的核心功能之一。双向数据绑定意味着模型（JavaScript 变量）和视图（HTML 页面）之间是相互绑定的。当模型中的数据变化时，视图会自动更新；而当视图中的数据变化时，模型数据也会自动更新。
指令 (Directives):
- AngularJS 使用指令（Directives）来扩展 HTML 的功能。指令是 AngularJS 特有的标签或属性，通常用于处理 DOM 元素的行为。例如，ng-model, ng-repeat, ng-if 等指令可以在视图中动态地绑定数据或控制视图的渲染。
依赖注入 (Dependency Injection):
- AngularJS 提供了一个内置的 依赖注入 系统，它能自动注入所需的服务和控制器，使代码更加模块化，易于测试和维护。它允许组件（如控制器）声明其所依赖的服务，框架负责自动处理依赖关系。
模块化 (Modularization):
- AngularJS 提供了模块化机制，可以将应用程序分解为多个功能模块，每个模块处理应用的一部分逻辑。应用程序通常由一个或多个模块组成，模块之间可以进行交互。
单页面应用 (SPA):
- AngularJS 支持开发 单页面应用，即无需重新加载整个页面，只更新页面的某一部分。这种方式能大大提升用户体验，因为页面交互更流畅，减少了页面跳转的延迟。
路由功能 (Routing):
- AngularJS 内置了 ngRoute 模块，允许开发者在不同的视图之间进行路由导航。它支持 Hashbang 或 HTML5 History API，用于实现前端的页面跳转。
模板语法 (Template Syntax):
- AngularJS 提供了强大的模板语法，能够让你在 HTML 中动态插入数据。模板包括了 AngularJS 的指令、表达式、控制结构等，使得开发者可以将数据和视图结合得非常紧密。
表单管理 (Form Management):
- AngularJS 提供了一套强大的表单管理系统，可以帮助开发者轻松地管理表单的验证、提交以及数据绑定。

AngularJS 核心概念

模型 (Model):
- 模型指的是应用程序的业务逻辑部分，它通常是一个 JavaScript 对象。AngularJS 的双向数据绑定会使得模型和视图之间的交互自动化。
视图 (View):
- 视图是用户看到并与之交互的部分。它通常是由 HTML 构成，但通过 AngularJS 指令和数据绑定，使得视图可以动态更新。
控制器 (Controller):
- 控制器是应用程序中的一个 JavaScript 函数，它主要用于处理视图和模型之间的交互。控制器负责处理用户输入、更新数据、调用模型方法等。
指令 (Directives):
- 指令用于扩展 HTML，改变页面元素的行为和结构。例如：ng-model 用于绑定表单输入与模型，ng-repeat 用于循环显示数据等。
服务 (Services):
- 服务是 AngularJS 中共享的功能模块，通常用于封装和共享逻辑。服务可以被注入到控制器、指令等中，通常用于处理数据请求、管理应用状态等。

AngularJS 示例代码

1. 创建一个简单的 AngularJS 应用

HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AngularJS 示例</title>
</head>
<body ng-app="myApp">

    <div ng-controller="myController">
        <h1>{{ message }}</h1>
        <button ng-click="changeMessage()">点击我</button>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script>
        // 定义 AngularJS 应用
        var app = angular.module('myApp', []);

        // 定义控制器
        app.controller('myController', function($scope) {
            $scope.message = 'Hello, AngularJS!';

            // 点击按钮时改变消息
            $scope.changeMessage = function() {
                $scope.message = '消息已改变!';
            };
        });
    </script>

</body>
</html>

2. 代码说明

ng-app: 这是 AngularJS 的根元素，告诉 AngularJS 从哪里开始应用。
ng-controller: 通过控制器绑定数据和行为，视图会通过控制器处理数据。
{{ message }}: 使用双花括号语法来绑定数据，显示 message 变量的值。
ng-click: 这是 AngularJS 提供的指令，用于绑定点击事件。当用户点击按钮时，changeMessage() 函数将被调用，更新 message 的值。

3. 模块化和依赖注入

AngularJS 支持模块化开发，可以将应用拆分成不同的模块，每个模块负责不同的功能，提升可维护性。依赖注入是 AngularJS 的核心特性之一，它使得组件（如控制器、服务等）之间的依赖关系被自动注入，简化了代码结构。

var app = angular.module('myApp', []);

// 服务定义
app.service('myService', function() {
    this.sayHello = function() {
        return 'Hello from Service!';
    };
});

// 控制器使用依赖注入
app.controller('myController', function($scope, myService) {
    $scope.greeting = myService.sayHello();
});

总结

AngularJS 是一个功能强大的 JavaScript 框架，能够帮助开发者简化开发流程，尤其在构建单页面应用（SPA）时具有非常大的优势。它提供了很多强大的功能，如 双向数据绑定、指令、依赖注入、模块化 和 路由功能，使得开发现代 Web 应用更加高效。

尽管 AngularJS 已经被 Angular 2+ 版本替代，但它仍然在许多现有项目中广泛使用。了解 AngularJS 对于学习现代的 Angular 框架有很大帮助，因为 Angular 的很多核心概念源自 AngularJS。

AngularJS 简介