AngularJs 2 权威教程

所需积分/C币:38 2017-05-10 11:02:57 13.15MB PDF
收藏 收藏

AngularJs 2 权威教程
Contents Book revision Prerelease Bug Reports ........ Chat With The community Writing your First Angular 2 Web Application Simple reddit Clone Getting started 1111148 Our First Typescript Running The app 13 Adding Data to the Component 16 Working with arrays 18 Expanding our Application 21 Rendering multiple rows 37 Adding New Articles 47 Finishing Touches 48 Full Code listing Wrapping u Getting Help 53 TypeScript 54 Angular 2 is built in TypeScript 54 What do we get with TypeScript? ypes 56 Built-in types 58 Clas 60 Utilit 66 ng ll How Angular Works 70 Appl pp cation 70 Product model 74 Compone p ents Component Decorator The ProductsList Component 85 CONTENTS The ProductRow Component 97 The Product Image component 100 The PriceDisplay Component 101 The Product Department Component 102 The Completed Project 103 A Word on data architecture ,,104 Built-in Components 106 Introduction ,106 NgI 106 NgSwitch 106 Ngstyle 109 Ngclass ···· 111 NgOr.,,,,,,,,, 114 NgNonBindable.... 120 Conclusion 120 F orms in A ngular 2 121 Forms are Crucial, Forms are Complex 121 Controls and Control groups 121 Our first form 123 Using FormBuilder ,130 Adding Validations 134 Watching For Changes 145 ng model 147 Wrapping Up 149 Data Architecture in Angular 2 150 An Overview of data architecture 150 Data architecture with observables-part 1: Services 152 Observables and rXJs 152 Chat App overview 154 Implementing the models 157 Implementing userService 159 The MessagesService 162 The Threads Service 175 Data Model summary 186 Data Architecture with Observables-Part 2: View Components 187 Building Our Views: The ChatApp Top-Level Component 187 The ChatThreads Component ,,,,189 The Single ChatThread Component ,193 The ChatWindow Component .,.,,,.197 CONTENTS The ChatMessage Component 207 The ChatNavBar Component 212 Summar 216 Next steps 218 Http ,219 Introductie 219 ngangular2/http 220 A Basic request ,221 Writing a YouTubeSearchComponent 226 angular/httpapl 244 routing 248 Why routing? ,,248 How client-side routing works 249 Writing our first routes 251 Components of angular 2 routing ) Putting it all together ,254 Routing strategies 260 Path location strate 262 Running the application 262 Route parameters 264 Music Search app 266 Router Lifecycle Hooks Nested routes 294 Summary Changelog 300 CONTENTS Book Revision Revision 14-Covers up to Angular 2(2.0.0-beta.0, 2015-12-23) Prerelease This book is a prerelease version and a work-in-progress Bug Reports If you'd like to report any bugs, typos, or suggestions just email us at: us@fullstackio Chat With The Community We're experimenting with a community chat room for this book using Gitter. If youd like to hang out with other people learning Angular 2, come join us on Gitter2 mailto:us@fullstack io? Subject-ng-book %20feedback Writing your First Angular 2 Web Application Simple reddit Clone In this chapter we re going to build an application that allows the user to post an article(with a title and a URL and then vote on the posts You can think of this app as the beginnings of a site like Reddit or Product Hunt In this simple app we're going to cover most of the essentials of Angular 2 including Building custom components Accepting user input from forms Rendering lists of objects into views Intercepting user clicks and acting on them By the time you' re finished with this chapter you'll have a good grasp on how to build basic Angular 2 applications Here's a screenshot of what our app will look like when it's done Writing your First Angular 2 Web Application ●/ S mple Reddit x ng-buuk book 2 Angular 2 Simple Reddit A Titl iPad Game for Cats tp: //ipad meforcats coml Submit link Angular 2 3 POINTS 个 upvote v downvote Fullstack 2 ft POINTS 个 upvote◆ downvote Angular homepage 1 (angular iol POINTS 个 upvote v downvote Completed application First, a user will submit a new link and after submitting the users will be able to upvote or downvote each article. each link will have a score and we can vote on which links we find useful Writing your First Angular 2 Web Application 0o●/h S mple Reddit x bunk hest: 8080 ng-booK2 Angular 2 Simple Reddit Add a link Tit Submit lInk Angular 2 POINTS 个 upvote v downvote iPad Game for Cats (ipadgameforcats. com) POINTS 个 upvote v downvote Angular Homepage 3 POINTS 个 upvoteψ downvote new article In this project, and throughout the book, we're going to use Type Script. TypeScript is a superset of JavaScript ES6 that adds types. We're not going to talk about Type Script in depth in this chapter, but if you re familiar with ES5 (normal javascript)/ES6(ES2015)you should be able to follow along without any problems We'll go over Type Script more in depth in the next chapter So dont worry if you're having trouble with some of the new syntax Writing your First Angular 2 Web Application 4 Getting started TypeScript To get started with Type Script, you'l need to have Node. js installed. There are a couple of different ways you can install Node. js, so please refer to the Node. js website for detailed information https:/ Do I have to use TypeScript? No, you don t have to use Type Script to use Angular 2, but you probably should ng2 does have an ES5 APl, but Angular 2 is written in Type Script and generally thats what everyone is using. Were going to use Type Script in this book because it,s great and it makes working with Angular 2 easier. That said, it isnt strictly required Once you have node js setup, the next step is to install Type Script. Make sure you install at least version 1. 7 or greater. To install it, run the following npm command 1 S npm install -g 'typescript@1.7.3 npm is installed as part of Node. js. If you don' t have npm on your system, make sure you used a Node. js installer that includes it Windows Users: We'll be using Linux/ Mac-style commands on the commandline through out this book. We'd highly recommend you install Cygwin as it will let you run commands just as we have them written out in this book Example Project Now that you have your environment ready, let's start writing our first Angular2 application Open up the code download that came with this book and unzip it. In your terminal, cd into the first_app/angular2-reddit-base directory 1 cd first_app/angular2-reddit-base S,!

试读 127P AngularJs 2 权威教程
立即下载 低至0.43元/次 身份认证VIP会员低至7折
screens 很好用,谢谢分享!
  • 分享精英

关注 私信 TA的资源
AngularJs 2 权威教程 38积分/C币 立即下载
AngularJs 2 权威教程第1页
AngularJs 2 权威教程第2页
AngularJs 2 权威教程第3页
AngularJs 2 权威教程第4页
AngularJs 2 权威教程第5页
AngularJs 2 权威教程第6页
AngularJs 2 权威教程第7页
AngularJs 2 权威教程第8页
AngularJs 2 权威教程第9页
AngularJs 2 权威教程第10页
AngularJs 2 权威教程第11页
AngularJs 2 权威教程第12页
AngularJs 2 权威教程第13页
AngularJs 2 权威教程第14页
AngularJs 2 权威教程第15页
AngularJs 2 权威教程第16页
AngularJs 2 权威教程第17页
AngularJs 2 权威教程第18页
AngularJs 2 权威教程第19页
AngularJs 2 权威教程第20页

试读结束, 可继续阅读

38积分/C币 立即下载 >