AngularJS高级程序设计读书笔记 -- 大纲篇
零. 初衷
现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑.
学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用到大量的表单, Flask-wtf 的功能不能满足要求, 并且不够灵活, 所以在某老猿的建议下开始尝试使用 AngularJS 来写表单. 第一感觉是惊艳, 原来可以这么 easy, 所以想深入的学习一下, 并买了若干本书.
是去年买的, 网上的评价不是太高, 但是楼主觉得讲的比较轻松和易懂, 所以拿来做些笔记和总结. 下面是具体的大纲和链接.
这几篇文章只做总结和梳理, 方便个人查找. ~~ 原谅楼主是小白 ~~
一. 模块
1. 模块基础
2. 使用模块组织代码
二. 控制器
控制器是一个 AngularJS 程序中最大的构件之一, 它扮演了模型和视图之间的渠道的角色. 大多数 AngularJS 项目拥有多个控制器, 每一个向应用程序的一部分提供所需的数据和逻辑.
三. 指令
指令是最强大的 AngularJS 特性, 通过他们能扩展并增强 HTML, 从而创建丰富的 Web 应用程序.
AngularJS 通过包含和增强 HTML 来创建 AngularJS 为web应用程序, 讲 HTML 当做构建应用程序特性的基础而不是要解决的问题来处理.
1. 内置指令
数据绑定指令
指令 用作 描述 ng-bind 属性, 类 绑定一个 HTML 元素的 innerText 属性 ng-bind-html 属性, 类 使用一个HTML 元素的 innerHTML 属性创建数据绑定, 这是有潜在风险的, 因为这意味着浏览器把内容解析为 HTML, 而不是内容本身. ng-bind-template 属性, 类 与 ng-bind 类似, 但允许在属性值中制定多个模板表达式 ng-model 属性, 类 创建一个双向数据绑定 ng-non-bindable 属性, 类 声明一块不会被执行数据绑定的区域 模板指令
指令 用作 描述 ng-cloak 属性, 类 使用一个 css 样式隐藏内联绑定表达式 {{}}
, 在文档第一个加载时会短暂的可见ng-include 元素, 属性, 类 向 DOM 中加载,处理和插入一段 HTML ng-repeat 属性, 类 对数组中或对象某个属性中的每一个对象生成一个元素及其内容的若干新拷贝 ng-repeat-start 属性, 类 表示含有多个顶层元素的重复区域的开始部分 ng-repeat-end 属性, 类 表示含有多个顶层元素的重复区域的结束部分 ng-switch 属性, 类 根据数据绑定的值修改 DOM 中的元素. 元素指令
元素指令, 用于在 DOM 中对元素进行配置和渲染样式的.指令 用作 描述 ng-if 属性 从 DOM 中添加和移除元素 ng-class 属性, 类 为某个元素设置 class 属性 ng-class-even 属性, 类 对 ng-repeat 指令生成的偶数元素设置 class 属性 ng-class-odd 属性, 类 对 ng-repeat 指令生成的奇数元素设置 class 属性 ng-hide 属性, 类 在 DOM 中显示和隐藏元素 ng-show 属性, 类 在 DOM 中显示和隐藏元素 ng-style 属性, 类 设置一个或多个 CSS 属性 事件处理
指令 用作 描述 ng-blur 属性,类 为 blur 事件制定自定义行为, 在元素失去焦点时被触发 ng-change 属性,类 为 change 事件制定自定义行为, 在表单元素的内容状态发生变化时被触发(例如复选框被选中,输入框元素中的文本被修改等) ng-click 属性,类 为 click 事件指定自定义行为, 在用户点击鼠标/光标时被触发 ng-copy, ng-cut, ng-paste 属性,类 为 copy,cut,paste 事件指定自定义行为 ng-dbclick 属性,类 为 dbclick 事件指定自定义行为, 在用户双击鼠标/光标时被触发 ng-focus 属性,类 为 focus 事件指定自定义行为, 在元素获得焦点时被触发 ng-keydown, ng-keypress, ng-keyup 属性,类 为 keydown,keypress,keyup 事件指定自定义行为, 在用户按下,释放某个键时被触发 ng-mousedown, ng-mouseenter,ng-mouseleave, ng-mousemove,ng-mouseover,ng-mouseup 属性,类 为 6个标准鼠标事件事件指定自定义行为, 在用户使用鼠标/光标与元素发生交互时被触发 ng-submit 属性,类 为 submit 事件指定自定义行为, 在表单被提交时被触发 布尔属性指令, 映射指令
映射指令, 用于在 AngularJS 所依赖的数据绑定的方式和那些被称为布尔属性的 HTML 特性之间进行映射.
指令 用作 描述 ng-checked 属性 管理 checked 属性(在 input 元素上使用) ng-disabled 属性 管理 disabled 属性(在 input 和 button 上使用) ng-open 属性 管理 open 属性 (在 details 元素上使用) ng-readonly 属性 管理 readonly 属性(在 input 元素上使用) ng-selected 属性 管理 select 属性(在 option 元素上使用) ng-href 属性 在 a 元素上设置 href 属性 ng-src 属性 在 img 元素上设置 src 属性 ng-srcset 属性 在 img 元素上设置 srcset 属性. srcset 属性时扩展到 html5 的起草标准之一, 允许为显示不同的大小和像素密度而指定多张图片 表单验证
2. 自定义指令
四. 过滤器
过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性.
1. 过滤器的不同使用方式
2. 内置过滤器
3. 自定义过滤器
五. 服务
服务是提供在整个应用程序中所使用的任何功能的单例对象.
单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享.
1. 内置服务
一些关键方法也被 AngularJS 成为服务. 如 $scope, $http.
2. 自定义服务
- Module.service(name, constructor)
- Module.factory(name, provider)
- Module.provider(name, type)
- Module.value(name, value)
六. AngularJS 扩展
1. Angular-xeditable
2. angular-flash
3. Angular Advanced Searchbox
4. AngularUI
七. 参考链接:
AngularJS高级程序设计读书笔记 -- 大纲篇的更多相关文章
- AngularJS高级程序设计读书笔记 -- 服务篇
服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...
- AngularJS高级程序设计读书笔记 -- 过滤器篇
一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- AngularJS高级程序设计读书笔记 -- 控制器篇
作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...
- AngularJS高级程序设计读书笔记 -- 模块篇
一. 模块基础 1. 创建模块 <!DOCTYPE html> <html ng-app="exampleApp"> <head> <ti ...
- javascript高级程序设计读书笔记-事件(一)
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
- Javascript高级程序设计读书笔记(第六章)
第6章 面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...
随机推荐
- VS2017使用 SQL Localdb问题两则
VS2017使用 SQL Localdb问题两则 来博客园不算短了,总是索取者.最近使用VS2017,遇到一些问题,在解决时总是找不到拿来就能用的解决方案,在多方寻找,自行探索下,总算圆满解决,在这 ...
- nginx源码分析——configure脚本
源码:nginx 1.13.0-release 一.前言 在分析源码时,经常可以看到类似 #if (NGX_PCRE) .... #endif 这样的代码段,这样的设计可以在不改动源码的 ...
- kafka java使用
首先添加maven依赖 Kafka <dependency> <groupId>org.apache.kafka</groupId> <artifactId& ...
- 思考一个关于Lambda表达式做为linq条件的问题
有一个集合如下 List<User> users = new List<User> { new User{Name = "1",Aget = 12}, ne ...
- Android GreenDAO3.0——介绍
引言 最近,学东西比较零散,各种知识混杂,于是记下学习记录,免得又忘了. 官方网址:http://greenrobot.org/greendao/documentation/introduction/ ...
- smarty中的修饰函数
smarty中的修饰函数: 对在模板文件中显示的数据变量进行二次修饰. 格式: {ts:变量|函数名:参数1:参数2:参数3...|函数名:参数1:参数2...} 常见的修饰函数: capitaliz ...
- 大数的加法运算,杭电oj-1002
原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=1002 [Problem Description] I have a very simple pro ...
- c# mvc如何生成excel
我们知道mvc可以通过js生成excel文件,同样在后台c#中一样可以生成excel文件. 首先我们要在后台中写如下方法: [HttpGet]public FileResult excel_gener ...
- 数组去重,call、apply、bind之间的区别,this用法总结
一.数组去重,直接写到Array原型链上. //该方法只能去除相同的数字 不会去判断24和'24'是不同的 所有数字和字符串数字是相同是重复的 Array.prototype.redup=functi ...
- bzoj 4765 普通计算姬(树状数组 + 分块)
http://www.lydsy.com/JudgeOnline/problem.php?id=4765 很nice的一道题啊(可能是因为卡了n久终于做出来了 题意就是给你一棵带点权的有根树,sum( ...