AngularJS API 核心教程

目录

  1. 什么是 AngularJS？
  2. 核心思想：MVC (Model-View-Controller)
  3. 第一个 AngularJS 应用：ng-app 和 ng-model
  4. 核心 API 深入解析
    • 1 模块
      • angular.module()
    • 2 指令
      • ng-app
      • ng-model
      • ng-bind
      • ng-init
      • ng-repeat
      • ng-click
      • ng-show / ng-hide
      • ng-if
    • 3 控制器
      • angular.controller()
      • $scope 对象
    • 4 表单与验证
      • ng-submit
      • $valid, $invalid, $dirty, $pristine
    • 5 服务
      • $http 服务 (AJAX)
      • $log 服务
      • $filter 服务

什么是 AngularJS？

AngularJS 是一个由 Google 维护的开源前端 JavaScript 框架，它通过数据绑定和依赖注入等特性，极大地简化了单页面应用的开发，它的核心目标是让开发者和设计师能够更轻松地构建和维护复杂的、动态的 Web 应用。

angularjs api 教程
（图片来源网络，侵删）

核心思想：MVC (Model-View-Controller)

理解 MVC 是掌握 AngularJS 的关键。

  • Model (模型): 应用程序的数据，它只是普通 JavaScript 对象或变量，不关心如何展示。
  • View (视图): 用户看到并与之交互的 HTML 部分，在 AngularJS 中，HTML 被扩展了，包含了一些特殊的属性，这些属性是指令。
  • Controller (控制器): Model 和 View 之间的桥梁，它包含业务逻辑，通过 $scope 对象将 Model 数据传递给 View，并处理用户在 View 上的操作。

数据绑定是 AngularJS 的灵魂，当 Model 数据变化时，View 会自动更新；反之，当用户在 View 中修改数据（如在输入框中输入）时，Model 也会自动更新，这个过程是双向的。

第一个 AngularJS 应用：ng-app 和 ng-model

让我们从一个最简单的例子开始,感受一下数据绑定。

HTML (index.html)

angularjs api 教程
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">My First AngularJS App</title>
    <!-- 引入 AngularJS 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- 1. ng-app: 告诉 AngularJS 这个元素是应用的根元素 -->
    <div ng-app="myFirstApp">
        <!-- 2. ng-model: 将输入框的值绑定到名为 'name' 的变量上 -->
        <input type="text" ng-model="name" placeholder="请输入你的名字">
        <!-- 3. 双大括号 {{ }}: 表达式，用于显示绑定变量的值 -->
        <h1>你好, {{ name }}!</h1>
    </div>
</body>
</html>

代码解释:

  1. <script src="...">: 从 Google CDN 引入 AngularJS 库。
  2. ng-app="myFirstApp": 这是一个指令，它告诉 AngularJS：“嘿，请管理这个 <div> 及其内部的所有内容”。myFirstApp 是我们给这个应用起的模块名。
  3. ng-model="name": 这也是一个指令，它将输入框的 value 绑定到 AngularJS 内部的一个名为 name 的变量上，这个变量属于当前作用域。
  4. {{ name }}: 这是 AngularJS 的表达式，它会将其中的内容替换为 name 变量的当前值，因为 ng-model 的双向绑定，你在输入框里输入任何内容，<h1> 标签里的文字都会实时更新。

核心 API 深入解析

现在我们来系统地学习 AngularJS 的核心 API。

1 模块

模块是 AngularJS 应用程序的容器，它用来组织代码（控制器、服务、指令等），并声明应用的依赖项。

angular.module()

angularjs api 教程
（图片来源网络，侵删）

这是创建或获取模块的 API。

// 语法: angular.module(name, [requires]);
// name: 模块名
// requires: 一个包含依赖模块名称的数组（可选）
// 创建一个名为 'myApp' 的新模块，并依赖于 'ng' 核心模块
var myApp = angular.module('myApp', ['ng']);

最佳实践: 将你的 JavaScript 代码放在一个单独的文件中，app.js。

app.js

// 创建应用模块
var myApp = angular.module('myApp', ['ng']);
// 在模块中创建控制器（见下文）
myApp.controller('MainController', function($scope) {
    $scope.message = "Hello from Controller!";
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">AngularJS Module Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script> <!-- 引入我们的应用逻辑 -->
</head>
<body>
    <div ng-app="myApp" ng-controller="MainController">
        {{ message }}
    </div>
</body>
</html>

2 指令

指令是 AngularJS 的核心，它们是 HTML 上的特殊标记（属性、元素、类名或注释），用来教 HTML 新的行为。

指令 描述 示例
ng-app 定义 AngularJS 应用的根元素。 <div ng-app="myApp">
ng-model 将 HTML 元素（如输入框、下拉框）绑定到应用程序数据。 <input ng-model="name">
ng-bind 将应用程序数据绑定到 HTML 元素的 innerText，效果类似 ，但更安全，可以防止页面加载时出现未渲染的表达式。 <p ng-bind="name"></p>
ng-init 初始化 AngularJS 应用程序变量。不推荐在真实项目中使用，因为它混合了数据和视图，应该用控制器来初始化数据。 <div ng-init="name='World'">
ng-repeat 遍历一个集合（数组或对象），为每个项克隆一次 HTML 元素。 <li ng-repeat="item in items">{{ item.name }}</li>
ng-click 为 HTML 元素（如按钮）绑定点击事件。 <button ng-click="sayHello()">点击我</button>
ng-show / ng-hide 根据表达式的值显示或隐藏 HTML 元素，它们通过 display: none; CSS 实现。 <p ng-show="isVisible">可见</p>
ng-if 类似 ng-show，但它是通过真正地添加或移除 DOM 元素来实现的，如果条件为假，元素会被从 DOM 中移除。 <p ng-if="isValid">有效</p>

ng-repeat 实例:

<div ng-app="myApp" ng-controller="MainController">
    <ul>
        <li ng-repeat="fruit in fruits">
            {{ fruit.name }}
        </li>
    </ul>
</div>

app.js

var myApp = angular.module('myApp', ['ng']);
myApp.controller('MainController', function($scope) {
    $scope.fruits = [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Orange' }
    ];
});

3 控制器

控制器是 JavaScript 的构造函数（或函数），用来增强 AngularJS 作用域的功能。

angular.controller()

在模块上定义控制器。

// 语法: myApp.controller('ControllerName', ['$scope', function($scope) { ... }]);
// 推荐使用这种“数组注入”的写法，可以防止代码压缩后变量名改变导致的问题。
myApp.controller('MainController', ['$scope', function($scope) {
    // 在这里定义视图需要的数据和行为
    $scope.user = {
        firstName: 'John',
        lastName: 'Doe'
    };
    $scope.getFullName = function() {
        return $scope.user.firstName + ' ' + $scope.user.lastName;
    };
}]);

$scope 对象

  • 是什么: $scope 是控制器和视图之间的“胶水”，它是连接两者的对象。
  • 作用:
    1. 共享数据: 在控制器中给 $scope 添加一个属性（如 $scope.message），这个属性就可以在视图中通过 {{ message }} 或指令访问到。
    2. 共享方法: 在控制器中给 $scope 添加一个函数（如 $scope.sayHello），这个函数就可以在视图中通过 ng-click="sayHello()" 等指令调用。

index.html

<div ng-app="myApp" ng-controller="MainController">
    <p>First Name: <input type="text" ng-model="user.firstName"></p>
    <p>Last Name: <input type="text" ng-model="user.lastName"></p>
    <p>Full Name: {{ getFullName() }}</p>
</div>

4 表单与验证

AngularJS 提供了强大的表单处理能力。

ng-submit

用于在表单提交时执行指定的表达式,可以阻止默认的表单提交行为。

内置验证状态

AngularJS 会为表单和输入字段添加一些 CSS 类，帮助我们轻松进行样式验证。

  • $valid: 表单/字段有效时为 true。
  • $invalid: 表单/字段无效时为 true。
  • $dirty: 用户已修改过表单/字段时为 true。
  • $pristine: 用户从未修改过表单/字段时为 true。

HTML (部分)

<form ng-submit="submitForm()" name="myForm" novalidate> <!-- novalidate 禁用浏览器默认验证 -->
    <label>Email:</label>
    <input type="email" name="emailInput" ng-model="user.email" required>
    <!-- 如果输入无效且已被触碰，显示错误信息 -->
    <div ng-show="myForm.emailInput.$invalid && myForm.emailInput.$dirty">
        <p style="color: red;">请输入有效的邮箱地址。</p>
    </div>
    <button type="submit" ng-disabled="myForm.$invalid">提交</button>
</form>

app.js (部分)

myApp.controller('FormController', ['$scope', function($scope) {
    $scope.user = {
        email: 'test@example.com'
    };
    $scope.submitForm = function() {
        if ($scope.myForm.$valid) {
            alert('表单提交成功!');
            // 在这里执行 AJAX 请求等操作
        }
    };
}]);

5 服务

服务是 AngularJS 中用于执行特定任务的、可复用的对象，它们是单例的，意味着在整个应用生命周期内，每个服务只有一个实例。

$http 服务

这是 AngularJS 中最核心的服务之一，用于向服务器发起 HTTP 请求（AJAX）。

示例：从 API 获取数据

<div ng-app="myApp" ng-controller="UserController">
    <ul>
        <li ng-repeat="user in users">
            {{ user.name }} - {{ user.email }}
        </li>
    </ul>
    <p ng-show="loading">加载中...</p>
    <p ng-show="error">{{ error }}</p>
</div>

app.js

myApp.controller('UserController', ['$scope', '$http', function($scope, $http) {
    $scope.users = [];
    $scope.loading = true;
    $scope.error = null;
    // GET 请求
    $http.get('https://jsonplaceholder.typicode.com/users')
        .then(function(response) {
            // 成功回调
            $scope.users = response.data;
            $scope.loading = false;
        }, function(error) {
            // 失败回调
            $scope.error = "无法加载数据: " + error.statusText;
            $scope.loading = false;
        });
}]);

其他常用服务:

  • $log: 用于在控制台打印日志。

    $log.log("这是一条普通日志");
$log.info("这是一条信息");
$log.error("这是一条错误日志");

  • $filter: 用于在 JavaScript 代码中对数据进行格式化。

    // 在控制器中注入 $filter
myApp.controller('FilterController', ['$scope', '$filter', function($scope, $filter) {
    $scope.price = 1234.567;
    // 使用 currency 过滤器
    var formattedPrice = $filter('currency')($scope.price, '¥ ');
    console.log(formattedPrice); // 输出: ¥ 1,234.57
}]);

本教程涵盖了 AngularJS 最核心的 API 和概念：

  • 模块 (angular.module): 应用的容器和配置中心。
  • *指令 (`ng-`)**: 扩展 HTML 的功能，实现数据绑定和事件处理。
  • 控制器 (angular.controller): 业务逻辑的载体，通过 $scope 与视图交互。
  • $scope: 连接控制器和视图的核心对象。
  • 服务 ($http, $log 等): 提供可复用的功能，如网络请求、日志记录。

AngularJS 虽然现在已被 Angular (通常称为 Angular 2+) 所取代，但理解其核心思想（如数据绑定、依赖注入、指令）对于学习现代前端框架非常有帮助，许多现代框架（如 Vue.js, React）中的概念都能在 AngularJS 中找到影子。

希望这份教程能帮助你顺利入门 AngularJS！