没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
ng-book 2
Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda
© 2015 - 2016 Felipe Coury, Ari Lerner, Nate Murray, & Carlos Taborda
Contents
Book Revision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Bug Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chat With The Community! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Be notified of updates via Twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
We’d love to hear from you! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Writing your First Angular 2 Web Application . . . . . . . . . . . . . . . . . . . . . . . . 1
Simple Reddit Clone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Getting started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
angular-cli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Example Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Writing Application Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Running the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Making a Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Importing Dependencies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Component Annotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Adding a template with templateUrl . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Adding a template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Adding CSS Styles with styleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Loading Our Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Adding Data to the Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Working With Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Using the User Item Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Rendering the UserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Accepting Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Passing an Input value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Bootstrapping Crash Course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Expanding our Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
The Application Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Adding Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Adding the Article Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Rendering Multiple Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
CONTENTS
Creating an Article class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Storing Multiple Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Configuring the ArticleComponent with inputs . . . . . . . . . . . . . . . . . . . . . 51
Rendering a List of Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Adding New Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Finishing Touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Displaying the Article Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Re-sorting Based on Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Full Code Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Angular 2 is built in TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
What do we get with TypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Trying it out with a REPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Built-in types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Constructors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Fat Arrow Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Template Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
How Angular Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The Navigation Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
The Breadcrumbs Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
The Product List Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Product Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Component Decorator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Component selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Component template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Adding A Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Viewing the Product with Template Binding . . . . . . . . . . . . . . . . . . . . . . . 84
Adding More Products . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Selecting a Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Listing products using <products-list> . . . . . . . . . . . . . . . . . . . . . . . . . 86
CONTENTS
The ProductsList Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Configuring the ProductsList @Component Options . . . . . . . . . . . . . . . . . . . 90
Component inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Component outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Emitting Custom Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Writing the ProductsList Controller Class . . . . . . . . . . . . . . . . . . . . . . . . 96
Writing the ProductsList View Template . . . . . . . . . . . . . . . . . . . . . . . . 97
The Full ProductsList Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
The ProductRow Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
ProductRow Component Configuration . . . . . . . . . . . . . . . . . . . . . . . . . . 101
ProductRow Component Definition Class . . . . . . . . . . . . . . . . . . . . . . . . . 102
ProductRow template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
ProductRow Full Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
The ProductImage Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
The PriceDisplay Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
The ProductDepartment Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
NgModule and Booting the App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Booting the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
The Completed Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
A Word on Data Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Built-in Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
NgIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
NgSwitch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
NgStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
NgClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
NgFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Getting an index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
NgNonBindable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Forms in Angular 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Forms are Crucial, Forms are Complex . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
FormControls and FormGroups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
FormControl . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
FormGroup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Our First Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Loading the FormsModule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Simple SKU Form: @Component Annotation . . . . . . . . . . . . . . . . . . . . . . . 128
Simple SKU Form: template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Simple SKU Form: Component Definition Class . . . . . . . . . . . . . . . . . . . . . 132
Try it out! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
剩余644页未读,继续阅读
资源评论
- kikakika2017-01-08angular2 还新, 这个资源对初学者很有帮助
forxinly
- 粉丝: 3
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功