Angular2权威教程

给大家带来的一篇关于Angular相关的电子书资源，介绍了关于Angular2教程、Angular2方面的内容，本书是由人民邮电出版社出版，格式为PDF，资源大小23.4 MB，阿里·勒纳编写，目前豆瓣、亚马逊、当当、京东等电子书综合评分为：7.2。

内容介绍

《Angular2权威教程》堪称Angular领域的里程碑式著作，涵盖了关于Angular的几乎所有内容。对于没有经验的人，本书平实、通俗的讲解，递进、严密的组织，可以让人毫无压力地登堂入室，迅速领悟新一代Web应用开发的精髓。如果你有相关经验，那本书对Angular概念和技术细节的全面剖析，以及引人入胜、切中肯綮的讲解，将帮助你彻底掌握这个框架，在自己职业技术修炼之路上更进一步。

目录

• 第1章　编写你的，个Angular Web应用　　1
• 1．1　仿制Reddit网站　1
• 1．2　起步　3
• 1．2．1　TypeScript　3
• 1．2．2　angular-cli　3
• 1．2．3　示例项目　4
• 1．3　运行应用　7
• 1．3．1　制作Component　8
• 1．3．2　导入依赖　9
• 1．3．3　Component注解　10
• 1．3．4　用templateUrl添加模板　11
• 1．3．5　添加template　11
• 1．3．6　用styleUrls添加CSS样式　12
• 1．3．7　加载组件　12
• 1．4　把数据添加到组件中　13
• 1．5　使用数组　15
• 1．6　使用UserItemComponent组件　18
• 1．6．1　渲染UserItemComponent　18
• 1．6．2　接收输入　19
• 1．6．3　传入Input值　20
• 1．7　“启动”速成班　21
• 1．8　扩展你的应用　22
• 1．8．1　添加CSS　24
• 1．8．2　应用程序组件　24
• 1．8．3　添加互动　26
• 1．8．4　添加文章组件　29
• 1．9　渲染多行　36
• 1．9．1　创建Article类　36
• 1．9．2　存储多篇文章　40
• 1．9．3　使用inputs配置ArticleComponent　41
• 1．9．4　渲染文章列表　42
• 1．10　添加新文章　44
• 1．11　·后的修整　44
• 1．11．1　显示文章所属的域名　44
• 1．11．2　基于分数重新排序　45
• 1．12　全部代码　45
• 1．13　总结　45
• 1．14　获得帮助　46
• 第2章　TypeScript　47
• 2．1　Angular是用TypeScript构建的　47
• 2．2　TypeScript提供了哪些特性　48
• 2．3　类型　49
• 2．4　内置类型　50
• 2．4．1　字符串　50
• 2．4．2　数字　50
• 2．4．3　布尔类型　51
• 2．4．4　数组　51
• 2．4．5　枚举　51
• 2．4．6　任意类型　52
• 2．4．7　“无”类型　52
• 2．5　类　52
• 2．5．1　属性　52
• 2．5．2　方法　53
• 2．5．3　构造函数　54
• 2．5．4　继承　55
• 2．6　工具　57
• 2．6．1　胖箭头函数　57
• 2．6．2　模板字符串　58
• 2．7　总结　59
• 第3章　Angular的工作原理　60
• 3．1　应用　60
• 3．1．1　主导航组件　61
• 3．1．2　面包屑导航组件　61
• 3．1．3　产品列表组件　62
• 3．2　产品数据模型　64
• 3．3　组件　64
• 3．4　组件注解　66
• 3．4．1　组件selector　66
• 3．4．2　组件template　67
• 3．4．3　添加产品　67
• 3．4．4　用模板绑定来查看产品　68
• 3．4．5　添加更多产品　69
• 3．4．6　选择一个产品　70
• 3．4．7　用列出产品　73
• 3．5．1　设置ProductsList的@Component配置项　73
• 3．5．2　组件的输入　74
• 3．5．3　组件的输出　77
• 3．5．4　触发自定义事件　78
• 3．5．5　编写ProductsList的控制器类　79
• 3．5．6　编写ProdctsList的视图模板　81
• 3．6　产品条目组件　83
• 3．6．1　产品条目的组件配置　83
• 3．6．2　产品条目组件的定义类　84
• 3．6．3　产品条目组件的template　84
• 3．6．4　完整的ProductRow代码清单　85
• 3．8　价格展示组件　86
• 3．9　产品分类组件　87
• 3．10　创建NgModule并启动应用　88
• 3．11　完整的项目　89
• 3．12　关于数据架构的一点说明　90
• 第4章　内置指令　91
• 4．1　简介　91
• 4．2　ngIf　91
• 4．3　ngSwitch　92
• 4．4　ngStyle　93
• 4．5　ngClass　95
• 4．6　ngFor　98
• 4．7　ngNonBindable　102
• 4．8　总结　102
• 第5章　Angular中的表单　103
• 5．1　表单——既重要，又复杂　103
• 5．2　FormControl和FormGroup　103
• 5．2．1　FormControl　104
• 5．2．2　FormGroup　104
• 5．3　我们的，个表单　105
• 5．3．1　加载FormsModule　106
• 5．3．2　简易SKU表单：@Component注解　107
• 5．3．3　简易SKU表单：template　107
• 5．3．4　简易SKU表单：组件定义类　110
• 5．4　使用FormBuilder　111
• 5．5　响应式表单 FormBuilder　112
• 5．5．1　使用FormBuilder　112
• 5．5．2　在视图中使用myForm　113
• 5．5．3　试试看　114
• 5．6　添加验证　115
• 5．6．1　显式地把sku设置为实例变量　116
• 5．6．2　自定义验证器　120
• 5．7　监听变化　121
• 5．8　ngModel　122
• 5．9　总结　124
• 第6章　HTTP　125
• 6．1　简介　125
• 6．2　使用@angular/http　126
• 6．3　基本请求　127
• 6．3．1　构建SimpleHTTPComponent的@Component　127
• 6．3．2　构建SimpleHTTPComponent的template　128
• 6．3．3　构建SimpleHTTPComponent控制器　128
• 6．3．4　完整的SimpleHTTPComponent　130
• 6．4　编写YouTubeSearchComponent　130
• 6．4．1　编写SearchResult　132
• 6．4．2　编写YouTubeService　132
• 6．4．3　编写SearchBox　140
• 6．4．4　编写SearchResultComponent　145
• 6．4．5　编写YouTubeSearchComponent　147
• 6．5　@angular/http API　150
• 6．5．1　发起一个POST请求　150
• 6．5．2　PUT/PATCH/DELETE/HEAD　150
• 6．5．3　RequestOptions　151
• 6．6　总结　151
• 第7章　路由　152
• 7．1　为什么需要路由　152
• 7．2　客户端路由的工作原理　153
• 7．2．1　初级阶段：使用锚标记　153
• 7．2．2　进化：HTML5客户端路由　154
• 7．3　编写，个路由配置　155
• 7．4　Angular路由的组成部件　155
• 7．4．1　导入　155
• 7．4．2　路由配置　155
• 7．4．3　安装路由配置　156
• 7．4．4　使用调用RouterOutlet指令　157
• 7．4．5　使用[routerLink]调用routerLink指令　158
• 7．5　整合　159
• 7．5．1　创建组件　160
• 7．5．2　应用程序组件　161
• 7．5．3　配置路由　163
• 7．6　路由策略　164
• 7．7　路径定位策略　165
• 7．8　运行应用程序　165
• 7．9　路由参数　167
• 7．10　音乐搜索应用　168
• 7．10．1　首要步骤　169
• 7．10．2　SpotifyService　170
• 7．10．3　SearchComponent　171
• 7．10．4　尝试搜索　179
• 7．10．5　TrackComponent　180
• 7．10．6　音乐搜索应用小结　182
• 7．11　路由器钩子　182
• 7．11．1　AuthService　183
• 7．11．2　LoginComponent　184
• 7．11．3　ProtectedComponent组件和路由守卫　186
• 7．12　嵌套路由　190
• 7．12．1　配置路由　191
• 7．12．2　ProductsComponent组件　191
• 7．13　总结　194
• 第8章　依赖注入　195
• 8．1　注入示例：PriceService　196
• 8．2　“别打给我们……”　197
• 8．3　依赖注入的部件　199
• 8．4　尝试注入器　200
• 8．5　用NgModule提供依赖　201
• 8．6　提供者　202
• 8．6．1　使用类　202
• 8．6．2　使用工厂　203
• 8．6．3　使用值　205
• 8．6．4　使用别名　205
• 8．7　应用中的依赖注入　205
• 8．8　使用注入器　207
• 8．9　替换值　211
• 8．10　NgModule　215
• 8．10．1　NgModule与模块　215
• 8．10．2　编译器与组件　215
• 8．10．3　依赖注入与提供者　216
• 8．10．4　组件可见性　217
• 8．10．5　指定提供者　218
• 8．11　总结　219
• 第9章　Angular数据架构　220
• 第10章　使用可观察对象的数据架构，第1 部分：服务　222
• 10．1　可观察对象和RxJS　222
• 10．1．1　注意：一些必备的RxJS相关知识　222
• 10．1．2　学习响应式编程和RxJS　223
• 10．2　聊天应用概览　224
• 10．2．1　组件　225
• 10．2．2　数据模型　226
• 10．2．3　服务　226
• 10．2．4　总结　226
• 10．3　实现数据模型　227
• 10．3．1　User　227
• 10．3．2　Thread　227
• 10．3．3　Message　228
• 10．4　实现UserService　228
• 10．4．1　currentUser流　229
• 10．4．2　设置新用户　230
• 10．4．3　UserService．ts　231
• 10．5　MessagesService　231
• 10．5．1　newMessages流　231
• 10．5．2　messages流　233
• 10．5．3　操作流模式　233
• 10．5．4　共享流　234
• 10．5．5　把Message对象添加到messages流中　235
• 10．5．6　完整的MessagesService　238
• 10．5．7　试用MessagesService　241
• 10．6　ThreadsService　242
• 10．6．1　当前一组Thread 的映射（threads流）　242
• 10．6．2　按时间逆序排列的Thread列表（orderedthreads流）　246
• 10．6．3　当前已选的Thread（currentThread流）　246
• 10．6．4　当前已选Thread的Message列表（currentThreadMessages流）　248
• 10．6．5　完整的ThreadsService　250
• 10．7　总结　251
• 第11章　使用可观察对象的数据架构，第2部分：视图组件　252
• 11．1　构建视图：顶层组件ChatApp　252
• 11．2　ChatThreads组件　254
• 11．2．1　ChatThreads控制器　255
• 11．2．2　ChatThreads的template　256
• 11．3．1　ChatThread控制器和ngOnInit　257
• 11．3．2　ChatThread的template　258
• 11．3．3　ChatThread的完整代码　258
• 11．4　ChatWindow组件　259
• 11．4．1　ChatWindow组件类属性　260
• 11．4．2　ChatWindow的ngOnInit　261
• 11．4．3　ChatWindow的sendMessage　261
• 11．4．4　ChatWindow的onEnter　262
• 11．4．5　ChatWindow的scrollToBottom　262
• 11．4．6　ChatWindow 的template　263
• 11．4．7　处理键盘动作　264
• 11．4．8　使用ngModel　264
• 11．4．9　点击Send按钮　265
• 11．4．10　完整的ChatWindow组件　267
• 11．5．1　设置incoming属性　268
• 11．5．2　ChatMessage的template　270
• 11．6　ChatNavBar组件　273
• 11．6．1　ChatNavBar的@Component　273
• 11．6．3　ChatNavBar的template　274
• 11．6．4　完整的ChatNavBar组件　275
• 11．7　总结　276
• 11．8　更进一步　277
• 第12章　基于TypeScript的Redux简介　278
• 12．1　Redux　279
• 12．2　Redux核心概念　280
• 12．2．1　reducer是什么　280
• 12．2．2　定义Action和Reducer的接口　281
• 12．2．3　创建，个Reducer　281
• 12．2．4　运行，个Reducer　282
• 12．2．5　使用action调整计数器　283
• 12．2．6　reducer的switch　284
• 12．2．7　action的“参数”　285
• 12．3　保存state　286
• 12．3．1　使用store　287
• 12．3．2　使用subscribe进行通知　287
• 12．3．3　Redux核心　290
• 12．4　消息应用　291
• 12．4．1　消息应用的state　291
• 12．4．2　消息应用的action　292
• 12．4．3　消息应用的reducer　292
• 12．4．4　试用action　295
• 12．4．5　action creator　296
• 12．4．6　使用真正的Redux　297
• 12．5　在Angular中使用Redux　299
• 12．6　规划应用　299
• 12．7　组建Redux　300
• 12．7．1　定义应用的state　300
• 12．7．2　定义reducer　301
• 12．7．3　定义action creator　301
• 12．7．4　创建store　302
• 12．8　CounterApp组件　303
• 12．9　提供store　304
• 12．10　启动应用　305
• 12．11　CounterComponent　306
• 12．11．1　import　306
• 12．11．2　模板　306
• 12．11．3　constructor　307
• 12．11．4　整合　308
• 12．12　更进一步　310
• 12．13　参考资源　310
• 第13章　在Angular中引入Redux　312
• 13．1　阅读背景　312
• 13．2　聊天应用概览　313
• 13．2．1　组件　313
• 13．2．2　数据模型　314
• 13．2．3　reducer　315
• 13．2．4　总结　315
• 13．3　实现数据模型　315
• 13．3．1　User　315
• 13．3．2　Thread　316
• 13．3．3　Message　316
• 13．4　应用的state　316
• 13．4．1　关于代码布局　317
• 13．4．2　根reducer　317
• 13．4．3　UserState　318
• 13．4．4　ThreadsState　318
• 13．4．5　可视化AppState　319

.....................

学习笔记

使用jQuery,Angular实现登录界面验证码详解

写在前面： 前段事件，做了一个用ajax后台异步交互的登录功能，自己在上面加了一个验证码的功能，这个功能背后的原理挺好理解的，实现起来也十分简单，特此写波分享，，自己写的过程中踩了不少坑，这里还是照例写的详细点，大家可以做个参考，喜欢的朋友可以点个赞，或者关注一波。 最终实现的效果： 当点击登录之前，会先判断验证码是否正确（验证码可以不区分大小写，也可以区分大小写），验证码错误会刷新验证码，验证码验证之前，不会进行跨域登录操作。 整体思路。 1.取四位随机数 2.赋值到验证码的input框里。 3.在点击登录之前先用if判断验证码input框的值和输入框的值是否相等，……

AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录

一、闲扯 有一天班长说了，同学们希望我开发一个可以共享位置的通讯录，于是自己简单设计了下功能。包括用户角色、发表微博、共享位置等等。这次也是有点私心的，为了锻炼最近看的angularjs，于是果断选择Node.js + MongoDB + angular.js的方案。当然，开发Node.js的体会越来越深刻。记得，去年leader告诉我说尽量让node的每一个服务只支撑一个业务功能，这样才能更方便的维护。当时特别想把一个Node服务做的特别强大。现在看来leader的做法是对的，我更加倾向于把node服务功能单一化... 二、直接上干货 数据库服务部署在阿里云；静态文件服务器采用的是Github page。 Github项目地址：https://github.com/vczero/OurTi……

AngularJS中的JSONP实例解析

概念 首先呢，Json和JSONP是不一样的哦。Json呢，是众多数据存储的其中一种格式，是数据书写方式的其中一种。好比是大中华众多诗体的一种(比如说是七言诗吧)。这种诗体规定了: 这种诗体要包含题目，每行诗句的字数(7个字) 等等的文本格式。而Json所规定的文本格式是这样子的 (Json格式示意图) 而JSONP呢，它是一种特殊的通讯方式，使用它能够轻松绕过浏览器的同源安全限制，达到加载来自不同源的资源(脚本, 图片, 其他)的效果。比如说，您是一个王国的王子，你意外地喜欢上了附近一个小城镇里面的一位漂亮年轻的姑娘(资源)，你想和她见面并进一步往下发展(获取资源)。但是呢，您的父亲国王先生……

angular bootstrap timepicker TypeError提示怎么办

angular bootstrap timepicker TypeError: Cannot set property '$render' of undefined，如何解决？ !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" rel="external nofollow" link rel="stylesheet" href="node_modules/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" rel="external nofollow" //headbody ng-app="MyApp"p{{mode}}/p datetimepicker data-ng-model="mode"/datetimepicker/body script type="text/javascript" src="node_modules/moment/moment.js"/script script type="text/javascript" src="node_modules/angular/angular.js"/script script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"/script script type="text/javascript" src="node_module……

Node.js使用AngularJS的方法总结

做一个Web应用，一般都有前台和后台，Node.js可以实现后台，利用jade模板引擎也可以生成一些简单的前台页面，但要想开发出具有实际意义的现代Web应用，还得搭配一个Web前端框架。 AngularJS是一个JavaScript前端框架，对于Node.js来说是一个完美的客户端库。AngularJS强制使用MVC（模型-视图-控制器，Model-View-Controller）框架，而它又使用JavaScript对象作为它的模型，和Node.js特别般配，用AngularJS的某些服务（比如$http）和Node.js通信，交互的对象不需要被转换为其它结构就能同时在前端和后端使用，堪称完美。 还有一点，AngularJS背靠Google，值得信赖。不过，天朝网络也真特么绝了，难道仅仅因为这一点，https://an……

以上就是本次介绍的Angular电子书的全部相关内容，希望我们整理的资源能够帮助到大家，感谢大家对码农之家的支持。

上一篇：MySQL开发与实践

下一篇：深入剖析Android系统