1、Brad Green and Shyam Seshadri AngularJSAngularJS by Brad Green and Shyam Seshadri Copyright 2013 Brad Green and Shyam Seshadri. All rights reserved. Printed in the United States of America. Published by OReilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. OReilly books may be p
2、urchased for educational, business, or sales promotional use. Online editions are also available for most titles (http:/). For more information, contact our corporate/ institutional sales department: 800-998-9938 or . Editors: Simon St. Laurent and Meghan Blanchette Production Editor: Melanie Y arbr
3、ough Copyeditor: Rachel Leach Proofreader: Jilly Gagnon Indexer: Judith McConville Cover Designer: Randy Comer Interior Designer: David Futato Illustrator: Rebecca Demarest April 2013: First Edition Revision History for the First Edition: 2013-04-05: First release See http:/ for release details. Nut
4、shell Handbook, the Nutshell Handbook logo, and the OReilly logo are registered trademarks of OReilly Media, Inc. AngularJS, the image of a thornback cowfish, and related trade dress are trademarks of OReilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their
5、 products are claimed as trademarks. Where those designations appear in this book, and OReilly Media, Inc., was aware of a trade mark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors as
6、sume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-34485-6 LSITable of Contents Preface. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7、 . . . . . . . . vii 1. Introduction to AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Concepts 1 Client-Side Templates 2 Model View Controller (MVC) 3 Data Binding 3 Dependency Injection 5 Directives 5 An Example: Shopping Cart 6 U
8、p Next 9 2. Anatomy of an AngularJS Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Invoking Angular 11 Loading the Script 11 Declaring Angulars Boundaries with ng-app 12 Model View Controller 12 Templates and Data Binding 14 Displaying Text 15 Form In
9、puts 16 A Few Words on Unobtrusive JavaScript 19 Lists, Tables, and Other Repeated Elements 21 Hiding and Showing 23 CSS Classes and Styles 24 Considerations for src and href Attributes 26 Expressions 26 Separating UI Responsibilities with Controllers 27 Publishing Model Data with Scopes 28 Observin
10、g Model Changes with $watch 29 iiiPerformance Considerations in watch() 31 Organizing Dependencies with Modules 33 How Many Modules Do I Need? 36 Formatting Data with Filters 37 Changing Views with Routes and $location 38 index.html 39 list.html 39 detail.html 40 controllers.js 40 Talking to Servers
11、 41 Changing the DOM with Directives 43 index.html 44 controllers.js 44 Validating User Input 45 Moving On 46 3. Developing in AngularJS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Project Organization 47 Tools 50 IDEs 50 Running Y our
12、Application 51 With Y eoman 51 Without Y eoman 51 Testing with AngularJS 52 Karma 52 Unit Tests 54 End-to-End/Integration Tests 55 Compilation 57 Other Awesome Tools 59 Debugging 59 Batarang 60 Y eoman: Optimizing Y our Workflow 64 Installing Y eoman 65 Starting a Fresh AngularJS project 65 Running
13、Y our Server 65 Adding New Routes, Views, and Controllers 65 The Testing Story 66 Building Y our Project 66 Integrating AngularJS with RequireJS 67 4. Analyzing an AngularJS App. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 The Application 77 iv
14、| Table of ContentsRelationship Between Model, Controller, and Template 78 The Model 79 Controllers, Directives, and Services, Oh My! 80 Services 80 Directives 84 Controllers 85 The Templates 89 The Tests 95 Unit Tests 96 Scenario Tests 99 5. Communicating with Servers. . . . . . . . . . . . . . . .
15、 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Communicating Over $http 101 Configuring Y our Request Further 103 Setting HTTP Headers 104 Caching Responses 105 Transformations on Requests and Responses 106 Unit Testing 107 Working with RESTful Resources 108 The Declaration 111 C
16、ustom Methods 111 No Callbacks! (Unless Y ou Really Want Them) 112 Simplified Server-Side Operations 112 Unit Test the ngResource 112 The $q and the Promise 113 Response Interception 115 Security Considerations 115 JSON Vulnerability 116 XSRF 116 6. Directives. . . . . . . . . . . . . . . . . . . .
17、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Directives and HTML Validation 119 API Overview 120 Naming Y our Directive 121 The Directive Definition Object 122 Transclusion 126 Compile and Link Functions 126 Scopes 128 Manipulating DOM Elements 132 Cont
18、rollers 133 Table of Contents | vMoving On 136 7. Other Concerns. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 $location 137 HTML5 Mode and Hashbang Mode 140 AngularJS Module Methods 142 Wheres the Main Method? 142 Loading
19、and Dependencies 143 Convenience Methods 144 Communicating Between Scopes with $on, $emit, and $broadcast 146 Cookies 148 Internationalization and Localization 148 What Can I Do in AngularJS? 149 How Do I Get It All Working? 149 Common Gotchas 150 Sanitizing HTML & the Sanitize Module 150 Linky 152
20、8. Cheatsheet and Recipes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Wrapping a jQuery Datepicker 153 ng-model 155 Binding select 155 Calling select 155 The Rest of the Example 156 The Teams List App: Filtering and Controller Communicat
21、ion 157 The Search Box 161 The Combo Boxes 161 The Check Box 161 The Repeater 161 File Upload in AngularJS 162 Using Socket.IO 164 A Simple Pagination Service 167 Working with Servers and Login 171 Conclusion 174 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22、. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 vi | Table of ContentsPreface I can trace Angulars beginnings to 2009, on a project called Google Feedback. Wed gone through months of frustration with our development speed and ability to write testable code. At around the six month ma
23、rk, we had around 17,000 lines of front-end code. At that point, one of the team members, Misko Hevery, made a bold statement that hed be able to rewrite the whole thing in two weeks using an open source library that hed created as a hobby. I figured that a two week delay couldn t hurt us that much
24、and wed at least be entertained by Misko scrambling to build something. Misko missed his time estimate. It took three weeks. We were all astounded, but even more astounding was that the line count for this new app had dropped from 17,000 to a mere 1,500. It seemed that Misko was onto something worth
25、 pursuing. Misko and I decided wed built a team around the concepts he started with a simple charter: to simplify the web developers experience. Shyam Seshadri, this books co- author, went on to lead the Google Feedback team in developing Angular s first shipping application. Since then, weve develo
26、ped Angular with guidance both from teams at Google and from hundreds of open source contributors around the world. Thousands of developers rely on Angular in their daily work and contribute to an amazing support network. Were excited to learn what youll teach us. Conventions Used in This Book The f
27、ollowing typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. viiConstant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data type
28、s, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter mined by context. This icon signifies a tip, suggesti
29、on, or general note. This icon indicates a warning or caution. Using Code Examples This book is here to help you get your job done. In general, if this book includes code examples, you may use the code in this book in your programs and documentation. Y ou do not need to contact us for permission unl
30、ess youre reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from OReilly books does require permission. Answering a question by citing this book and q
31、uoting example code does not require permission. Incorporating a significant amount of example code from this book into your products documentation does require per mission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “AngularJS by Brad Green and Shyam Se shadri (OReilly). Copyright 2013 Brad Green and Shyam Seshadri, 978-1-449-34485-6. ” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at . viii | Preface
