没有合适的资源?快使用搜索试试~ 我知道了~
Angularjs学习文档
需积分: 9 0 下载量 193 浏览量
2019-04-01
16:22:48
上传
评论
收藏 993KB PDF 举报
温馨提示
试读
99页
前端学习必不可少的书籍,对于前端从入门到进阶,都有一定的帮助。
资源推荐
资源详情
资源评论
AngularJS 学习笔记
2014-01-22 21:48 更新
Algol
1. 关于 AngularJS
2. 关于 本文档
3. 开始 的例子
4. 依赖注入
5. 作用域
6. 数据 绑定与 模 板
o 6.1. 数据->模板
o 6.2. 模板->数据
o 6.3. 数据->模板->数据->模板
7. 模板
o 7.1. 定义模 板 内容
o 7.2. 内容渲 染 控制
o 7.3. 节点控 制
o 7.4. 事件绑 定
o 7.5. 表单控 件
8. 模板 中的过 滤 器
o 8.1. 排序 orderBy
o 8.2. 过滤列 表 filter
o 8.3. 其它
o 8.4. 例子: 表 头排 序
o 8.5. 例子: 搜 索
9. 锚点路由
o 9.1. 路由定 义
o 9.2. 参数定 义
o 9.3. 业务处 理
10. 定义模 板 变量 标 识标 签
11. AJAX
o 11.1. HTTP 请求
o 11.2. 广义 回 调 管理
12. 工具函数
o 12.1. 上下 文 绑 定
o 12.2. 对象处理
o 12.3. 类型判定
13. 其它服务
o 13.1. 日志
o 13.2. 缓存
o 13.3. 计时器
o 13.4. 表达 式 函 数化
o 13.5. 模板 单 独 使用
14. 自定义 模 块和 服 务
o 14.1. 模块 和 服 务的 概 念与 关 系
o 14.2. 定义模块
o 14.3. 定义服务
o 14.4. 引入 模 块 并使 用 服务
15. 附加模块 ngResource
o 15.1. 使用 引 入 与整 体 概念
o 15.2. 基本定义
o 15.3. 基本使用
o 15.4. 定义 和 使 用时 的 占位 量
o 15.5. 实例
16. AngularJS 与其 它 框 架的 混 用 (jQuery, Dojo)
17. 自定义 过 滤器
18. 自定义 指 令 directive
o 18.1. 指令 的 使 用
o 18.2. 指令 的 执 行过 程
o 18.3. 基本 的 自 定义 方 法
o 18.4. 属性 值 类 型的 自 定义
o 18.5. Compile 的细 节
o 18.6. transclude 的 细节
o 18.7. 把节 点 内 容作 为 变量 处 理的类 型
o 18.8. 指令 定 义 时的 参 数
o 18.9. Attributes 的 细节
o 18.10. 预 定 义的 NgModelController
o 18.11. 预 定 义的 FormController
o 18.12. 示 例 :文本 框
o 18.13. 示 例 :模板 控 制语 句 for
o 18.14. 示 例 :模板 控 制语 句 if/else
本文的 内 容是 在 1.0.x 版 本 之下 完 成的 。
1. 关于 AngularJS
AngularJS 是 Google 开源出 来 的一 套 js 工 具。 下 面简 称 其为 ng 。这
里只说 它 是“工具”, 没 说 它是 完 整的 “框架”, 是因 为 它并 不 是定位 于 去完
成一套 框 架要 做 的事 。 更重要 的 ,是 它 给 我们 揭 示了 一 种 新的 应 用组 织
与开发 方 式。
ng 最让我 称 奇 的, 是 它的 数 据双 向 绑 定。 其 实想 想 ,我 们 一 直在 提 数 据
与表现 的 分离 , 但是 这 里的 “双 向 绑定 ”从 某方面 来 说, 是 把数 据 与表现 完
全绑定 在 一起 ——数 据 变化 , 表 现也 变 化 。反 之, 表 现 变化了 , 内在 的 数
据也变 化 。有 过 开发 经 验的人 能 体会 到 这 种机 制 对于 前 端 应用 来 说, 是
很有必 要 的, 能 带来 维 护上的 巨 大优 势 。 当然 , 这里 的 绑 定与 提 倡的 分
离并不 是 矛盾 的 。
ng 可以和 jQuery 集 成 工作 , 事实 上 ,如 果 没 有 jQuery , ng 自己也
做了一 个 轻量 级 的 jQuery ,主 要 实现了 元 素操作 部 分的 API 。
关于 ng 的 几 点:
对 IE 方面,它兼容 IE8 及 以上 的版 本 。
与 jQuery 集成 工 作, 它 的一 些 对象 与 jQuery 相关 对 象表现 是
一致的。
使用 ng 时不 要冒然 去 改变 相 关 DOM 的 结 构。
2. 关于本文档
这份文 档 如其 名 ,是 我 自己学 习 ng 的 过 程记录 。 只是 过 程记 录 ,没有
刻意像 教 程那 样 去做 。 所以呢 , 从前 至 后 ,中 间 不免 有 一 些概 念 不清 不
明的地 方 。因 为 事实 上 ,在某 个 阶段 对 于 一些 概 念本 来 就 不可 能 明白 。
所以, 整 个过 程 只求 在 形式上 的 能用 即 可 ——直 到 最后 的 “自定义”那几
章,特 别 是“自 定 义指 令 ”,那 几 章 过完, 你 才能 看清 ng 本 来的 面 貌 。前
面就不 要 太纠 结 概念 , 本质, 知 道怎 么 用 就好 。
3. 开始的例子
我们从 一 个完 整 的 例子开 始认 识 ng :
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5
6 <title>试验</title>
7
8 <script type="text/javascript" src="jquery-
1.8.3.js"></script>
9 <script type="text/javascript"
src="angular.js"></script>
10
11 </head>
12 <body>
13 <div ng-controller="BoxCtrl">
14 <div style="width: 100px; height: 100px;
background-color: red;"
15 ng-click="click()"></div>
16 <p>{{ w }} x {{ h }}</p>
17 <p>W: <input type="text" ng-model="w" /></p>
18 <p>H: <input type="text" ng-model="h" /></p>
19 </div>
20
21
22 <script type="text/javascript" charset="utf-8">
23
24
25 var BoxCtrl = function($scope, $element){
26
27 //$element 就 是 一 个 jQuery 对象
28 var e = $element.children().eq(0);
29 $scope.w = e.width();
30 $scope.h = e.height();
31
32 $scope.click = function(){
33 $scope.w = parseInt($scope.w) + 10;
34 $scope.h = parseInt($scope.h) + 10;
35 }
36
37 $scope.$watch('w',
38 function(to, from){
39 e.width(to);
40 }
41 );
42
43 $scope.$watch('h',
44 function(to, from){
45 e.height(to);
46 }
47 );
48 }
49
50 angular.bootstrap(document.documentElement);
51 </script>
52 </body>
53 </html>
从上面 的 代码 中 ,我 们 看到在 通 常的 HTML 代 码 当中 , 引入 了 一些标
记,这 些 就是 ng 的模 板机制 , 它不 光 完 成数 据渲染 的 工 作, 还 实现 了
数据绑定的 功能 。
同时,在 HTML 中的本身的 DOM 层级 结 构 ,被 ng 利 用 起 来, 直接
作为它 的 内部 机 制中 , 上下文 结 构的 判 断 依据 。 比如 例 子 中 p 是 div 的
子节点 , 那么 p 中 的 那 些模 板 标记 就 是在 div 的 Ctrl 的 作用 范 围 之内 。
其它的 , 也同 样 写一 些 js 代码 , 里面 重 要的 是 作一些 数 据的 操 作, 事 件
的绑定 定 义等 。 这样 , 数据的 变 化就 会 和 页面 中 的 DOM 表现联 系 起
来。一 旦 这种 联 系建 立 起来, 也 即完 成 了 我们 所 说的 “双 向绑 定 ”。然后 ,
这里说的“事件”, 除了那 些 “点击”等 通 常 的 DOM 事件 之 外 ,我们 还更 关
注 “数 据 变化 ”这 个 事 件。
最后, 可 以使 用 :
angular.bootstrap(document.documentElement);
来把整 个 页面 驱 动起 来 了。( 你 可以 看 到 一个 可 被控 制 大 小的 红 色方
块)
更完整 的 方法 是 定义 一 个 APP :
1 <!DOCTYPE html>
2 <html ng-app="MyApp">
3 <head>
4 <meta charset="utf-8" />
剩余98页未读,继续阅读
资源评论
蓝罗人
- 粉丝: 4
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功