来自Google,潜力的JavaScript框架的著作
我们都希望开发更小型、更轻量的Web应用,让创建应用更加容易,并且当项目变大时仍然易于测试、扩展和维护。这本手册将为你介绍AngularJS,它是一个开源的JavaScript框架,它使用MVC架构、数据绑定、客户端模板以及依赖注入等技术,从而为构建Web应用创建急需的结构。
《用AngularJS开发下一代Web应用》的作者是两位在Google负责AngularJS框架的工程师,他们将引领读者概览整个框架的核心特性,并构建一款可运行的AngularJS应用,内容涵盖布局、测试、编译及调试整个过程。通过这个过程,你将会学到AngularJS是怎样降低Web应用复杂性的。
★深入理解Angular的构件,学习它们是如何协同工作的。
★使用MVC模式分离控制逻辑、数据以及渲染职责,从而获得最大程度的灵活性。
★利用客户端模板在浏览器中装配你的完整应用。
★利用AngularJS的指令,用声明式语法来扩展HTML。
★使用$http服务与服务器交互并实现简单的缓存。
★利用依赖注入改进重构、测试以及多种环境下的设计。
★获得Web应用中常见问题的代码示例。
AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习。
《用AngularJS开发下一代Web应用》对AngularJS框架的核心特性做了全面的介绍,包括常用的开发工具和开发环境。《用AngularJS开发下一代Web应用》是学习AngularJS的必备入门工具。
2.在表单输入项上使用ng -model。与表达式类似,ng-model上指定的模型参数同样工作在外层控制器内。唯一的不同点在于,这样会在表单项和指定的模型之间建立双向绑定关系。
使用$watch监控数据模型的变化
在scope内置的所有函数中,用得最多的可能就是$watch函数了,当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以当作一个JavaScript函数被计算出来,就可以被$watch函数监控。它的函数签名为$watch(watchFn, watchAction, deepWatch)其中每个参数的详细含义如下。
watchFn
该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular表达式,那么它将会针对调用它的那个作用域中的对象而执行。
watchAction
这是一个函数或者表达式,当watchFn发生变化时会被调用。如果是函数的形式,它将会接收到watchFn的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。
deepWatch
如果设置为true,这个可选的布尔型参数将会命令Angblar去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。
$watch函数会返回一个函数,当你不再需要接收变更通知时,可以用这个返回的函数注销监控器。
……
前言
第1章 AngularJS 简介
一些概念
客户端模板
Model View Controller(MVC)
数据绑定
依赖注入
指令
实例:购物车
接下来
第2章 AngularJS 应用骨架
调用Angular
加载脚本
使用ng-app 声明Angular 的边界
Model View Controller
模板和数据绑定
显示文本
表单输入
浅谈非入侵式JavaScript
列表、表格以及其他迭代型元素
隐藏和显示
CSS 类和样式
反思src 和href 属性
表达式
区分UI 和控制器的职责
利用$scope 暴露模型数据
使用$watch 监控数据模型的变化
watch() 中的性能注意事项
使用Module(模块)组织依赖关系
我需要多少个模块呢
使用过滤器格式化数据
使用路由和$location 切换视图
index
list
detail
controllers
与服务器交互
使用指令修改DOM
index
controllers
校验用户输入
继续前进
第3章 使用AngularJS 进行开发
项目结构
工具
各种IDE
运行你的应用
使用Yeoman
不使用Yeoman
AngularJS 下的测试
Karma
单元测试
端到端/ 集成测试
编译
其他好用的工具
调试
Batarang
Yeoman :优化你的工作流程
安装Yeoman
运行服务器
添加新的路由、视图和控制器
关于测试
构建项目
与RequireJS 集成
第4章 一款AngularJS 应用剖析
应用
模型、控制器和模板之间的关系
模型
控制器、指令及服务
服务
指令
控制器
模板
测试
单元测试
场景测试
第5章 与服务器交互
利用$http 进行通信
进一步配置请求
设置HTTP 头
缓存响应
转换请求和响应
单元测试
使用RESTful 资源
声明
自定义方法
别用回调!(除非你真的需要它们)
简化服务端操作
ngResource 单元测试
$q 和Promise
拦截响应
安全性措施
JSON 漏洞
XSRF
第6章 指令
指令和HTML 校验
API 概览
为你的指令命名
用来定义指令的对象
内嵌
compile 和link 函数
作用域
操作DOM 元素
控制器
继续前进
第7章 其他注意点
$location
HTML5 模式和Hashbang 模式
AngularJS Module 类的方法
Main 方法在哪里
加载和依赖
快捷方法
使用$on、$emit 和$broadcast 在作用域之间进行交互
Cookies
国际化和本地化
在AngularJS 里面应该怎么做
怎样才能让一切运行起来呢
常见问题
HTML 无害化和Sanitize 模块
Linky
第8章 速查和技巧
封装jQuery Datepicker
ng-model
绑定select
调用select
例子中的其他内容
Teams List 应用:过滤器和控制器的交互
搜索框
下拉框
复选框
迭代器
AngularJS 中的文件上传
使用Socket
简单的分页服务
与服务端协作及登录
结论
索引
★“本书是对AngularJS框架的一个很好的介绍。它展示了组织AngularJS应用的正确思路,并且可以帮助你理解Angular API的所有主题。”
——Mi ko Hevery Google 高级计算机科学家,AngularJS之父
★“如果把我头脑中关于AngularJS的理解dump出来的话,那么肯定和本书非常类似,只是没有本书这样组织良好罢了。同时,在封面上放一条鱼的方式我也没有想到。”
——Lgor Minar AngularJS 项目技术经理