AngularJS 参考手册学习笔记

1. AngularJS 简介

AngularJS 是一个用于构建动态 Web 应用的 JavaScript 框架。与传统的基于 HTML 的 Web 应用相比，AngularJS 更加强大和灵活。它采用数据绑定、依赖注入、模块化等技术，可以方便地实现前端 MVC 架构。

2. 基本概念

2.1 模块（Module）

AngularJS 的模块是一个容器，它包含了各种组件（指令、服务、过滤器等），用于实现应用程序的不同功能。通过定义不同的模块，我们可以让应用程序更加清晰和易于维护。

javascriptCopy Code
// 定义一个模块
var app = angular.module('myApp', []);

2.2 指令（Directive）

指令是 AngularJS 最核心的概念之一，它允许我们扩展 HTML 标签和属性，实现自定义的行为和样式。

htmlCopy Code
<!-- 自定义指令 -->
<my-directive></my-directive>

2.3 控制器（Controller）

控制器是 AngularJS 中用于处理业务逻辑的组件，它与 HTML 视图相关联，通过作用域（Scope）对象来共享数据和方法。

javascriptCopy Code
// 定义一个控制器
app.controller('myCtrl', function($scope) {
  $scope.name = 'John';
});

2.4 服务（Service）

服务是 AngularJS 中用于封装数据和方法的组件，它可以被多个控制器所共享，以达到代码复用的效果。

javascriptCopy Code
// 定义一个服务
app.service('myService', function() {
  this.sayHello = function() {
    return "Hello, World!";
  };
});

2.5 过滤器（Filter）

过滤器是 AngularJS 中用于格式化数据的组件，它可以在视图中对数据进行转换和筛选。

htmlCopy Code
<!-- 使用过滤器 -->
<p>{{ price | currency }}</p>

3. 常用指令

3.1 ng-app 指令

ng-app 指令用于定义 AngularJS 应用程序的根元素。它告诉 AngularJS 在哪里启动应用程序，并获取初始化数据。

htmlCopy Code
<!-- 定义根元素 -->
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <p>Hello, {{ name }}!</p>
  </div>
</body>

3.2 ng-model 指令

ng-model 指令用于将数据绑定到表单元素上，当表单元素的值发生改变时，自动更新作用域中的数据。

htmlCopy Code
<!-- 使用 ng-model -->
<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>

3.3 ng-repeat 指令

ng-repeat 指令用于通过循环语句遍历数组或对象，并在页面上动态生成多个元素。

htmlCopy Code
<!-- 循环生成列表 -->
<ul>
  <li ng-repeat="item in items">{{ item }}</li>
</ul>

4. 实例

4.1 Todo List 应用程序

下面是一个简单的 Todo List 应用程序，用于添加和删除任务。

HTML 代码：

htmlCopy Code
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="newTask">
  <button ng-click="addTask()">Add</button>
  <ul>
    <li ng-repeat="task in tasks">{{ task }} <button ng-click="removeTask($index)">X</button></li>
  </ul>
</div>

JavaScript 代码：

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

app.controller('myCtrl', function($scope) {
  $scope.tasks = ['Learn AngularJS', 'Build a Todo List'];

  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push($scope.newTask);
      $scope.newTask = '';
    }
  };

  $scope.removeTask = function(index) {
    $scope.tasks.splice(index, 1);
  };
});

运行效果：

AngularJS Todo List