AngularJS学习笔记.pdf

AngularJS

需积分: 9 4 下载量 120 浏览量 2017-01-23 09:54:22 上传评论收藏 588KB PDF 举报

温馨提示

试读

98页

### AngularJS 学习笔记知识点总结 #### 一、AngularJS 概述 AngularJS 是由 Google 开发的一款开源 JavaScript 库，它提供了一种全新的应用程序组织与开发方式。AngularJS 的核心特性之一就是**数据双向绑定**，即数据模型与视图之间的自动同步更新。当数据模型发生变化时，视图会自动更新；反之亦然。 - **数据双向绑定**：通过数据双向绑定技术，AngularJS 能够显著减少手动同步数据的工作量，使得开发者能够更加专注于业务逻辑的实现。 - **兼容性**：AngularJS 支持 IE8 及以上版本的浏览器，这意味着它能够在大多数现代浏览器上运行良好。 - **与 jQuery 的集成**：AngularJS 可以与 jQuery 集成使用。如果环境中没有 jQuery，AngularJS 也会提供一组轻量级的 DOM 操作 API 来替代 jQuery 的功能。 #### 二、关于本文档本文档是作者邹业盛个人学习 AngularJS 过程中的记录。文档按照作者的学习进程逐步展开，因此在某些阶段可能会出现概念模糊或理解不透彻的情况。文档的主要目的是为了记录作者自己的学习过程，并非一份系统化的教程。然而，随着学习的深入，尤其是到了“自定义指令”等章节时，读者将能够更全面地了解 AngularJS 的工作原理和使用方法。 #### 三、AngularJS 核心特性详解 1. **数据双向绑定** - **原理**：AngularJS 使用了脏检查（Dirty Checking）机制来实现数据双向绑定。每当应用状态发生改变时，AngularJS 会遍历所有绑定的表达式并检查它们是否已更改。如果发现有变更，则会更新视图。 - **应用场景**：在表单验证、实时数据展示等方面非常有用。 2. **指令 (Directives)** - **简介**：AngularJS 提供了自定义指令的能力，允许开发者定义自己的 HTML 标签，从而扩展 HTML 的功能。例如，`ng-repeat` 用于遍历数组中的元素并动态渲染列表。 - **自定义指令**：开发者可以通过 `$compile` 服务创建自定义指令，这些指令可以拥有自己的模板、作用域和行为。 3. **控制器 (Controllers)** - **作用**：控制器负责管理视图的逻辑。在 AngularJS 中，每个控制器都有一个对应的 `$scope` 对象，该对象作为模型和视图之间的桥梁。 - **示例代码**： ```javascript var BoxCtrl = function ($scope, $element) { var e = $element.children().eq(0); $scope.w = e.width(); $scope.h = e.height(); $scope.click = function () { $scope.w = parseInt($scope.w) + 10; $scope.h = parseInt($scope.h) + 10; } $scope.$watch('w', function (to, from) { e.width(to); }); $scope.$watch('h', function (to, from) { e.height(to); }); } ``` - **解释**：这个示例中，`BoxCtrl` 控制器监听 `ng-click` 事件来改变宽度和高度，同时通过 `$watch` 方法监视 `$scope` 上的 `w` 和 `h` 属性的变化，并自动更新 DOM 元素的尺寸。 4. **服务 (Services)** - **简介**：AngularJS 提供了一系列内置服务，如 `$http` 用于发起 HTTP 请求获取数据。开发者还可以创建自己的服务来封装可重用的功能。 - **示例**：使用 `$http` 服务发起 AJAX 请求： ```javascript $http.get('/api/data').then(function(response) { // 处理响应数据 }); ``` #### 四、AngularJS 实践案例分析以下是一个简单的 AngularJS 示例，用于演示数据双向绑定和控制器的基本用法： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>试验</title> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript" src="angular.js"></script> </head> <body> <div ng-app ng-controller="BoxCtrl"> <div style="width:100px;height:100px;background-color:red;" ng-click="click()">  </div> <p>{{ w }}x{{ h }}</p>  <p>W: <input type="text" ng-model="w" /></p> <p>H: <input type="text" ng-model="h" /></p>  </div> <script type="text/javascript" charset="utf-8"> var app = angular.module('myApp', []); app.controller('BoxCtrl', function ($scope, $element) { var e = $element.children().eq(0); $scope.w = e.width(); $scope.h = e.height(); $scope.click = function () { $scope.w = parseInt($scope.w) + 10; $scope.h = parseInt($scope.h) + 10; } $scope.$watch('w', function (to, from) { e.width(to); }); $scope.$watch('h', function (to, from) { e.height(to); }); }); angular.bootstrap(document.documentElement, ['myApp']); </script> </body> </html> ``` #### 五、结语 AngularJS 是一款强大的前端开发库，它不仅提供了数据双向绑定这样的创新特性，还通过丰富的指令和服务体系支持开发者构建复杂的应用程序。尽管本文档着重于基础知识和个人学习经历的分享，但对于初学者来说，它依然是一份宝贵的资源，可以帮助他们快速入门 AngularJS 并掌握其核心概念。随着实践的深入和技术的发展，AngularJS 的使用场景也在不断扩展，值得每一个前端开发者深入了解和探索。

资源推荐

资源详情

资源评论