CONTENTS
Adding CSS Styles with styleUrls . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Loading Our Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Adding Data to the Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Working With Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Using the User Item Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Rendering the UserItemComponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Accepting Inputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Passing an Input value . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Bootstrapping Crash Course . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
imports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Expanding our Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
The Application Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Adding Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Adding the Article Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Rendering Multiple Rows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Creating an Article class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Storing Multiple Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Configuring the ArticleComponent with inputs . . . . . . . . . . . . . . . . . . . . . 53
Rendering a List of Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Adding New Articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Finishing Touches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Displaying the Article Domain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Re-sorting Based on Score . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Building Our App for Production . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Uploading to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Installing now . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Full Code Listing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Getting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Angular 4 is built in TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
What do we get with TypeScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Trying it out with a REPL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Built-in types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
评论2