AngularJS: Up and Running: [enhanced productivity with structured web apps]

If want to get started with AngularJS, either as a side project, an additional tool, or for your main work, this practical guide teaches you how to use this meta-framework step-by-step, from the basics to advanced concepts. By the end of the book, you'll understand how to develop a large, maintainable, and performant application with AngularJS. Guided by two engineers who worked on AngularJS at Google, you'll learn the components needed to build data-driven applications, using declarative programming and the Model-view-controller pattern. You'll also learn how to conduct unit tests on each part of your application. Learn how to use controllers for moving data to and from views. Understand when to use AngularJS services instead of controllers. Communicate with the server to store, fetch, and update data asynchronously. Know when to use AngularJS filters for converting data and values to different formats. Implement single-page applications, using ngRoute to select views and navigation. Dive into basic and advanced directives for creating reusable components. Write an end-to-end test on a live version of your entire application. Use best practices, guidelines, and tools throughout the development cycle Copyright 4 Table of Contents 5 Introduction 11 Who Should Read This Book 12 Why We Wrote This Book 12 A Word on Web Application Development Today 12 Navigating This Book 13 Online Resources 15 Conventions Used in This Book 15 Using Code Examples 16 Safari庐 Books Online 16 How to Contact Us 17 Acknowledgments 17 Chapter聽1.聽Introducing AngularJS 19 Introducing AngularJS 20 What Is MVC (Model-View-Controller)? 20 AngularJS Benefits 21 The AngularJS Philosophy 22 Starting Out with AngularJS 28 What Backend Do I Need? 28 Does My Entire Application Need to Be an AngularJS App? 29 A Basic AngularJS Application 29 AngularJS Hello World 30 Conclusion 31 Chapter聽2.聽Basic AngularJS Directives and Controllers 33 AngularJS Modules 33 Creating Our First Controller 35 Working with and Displaying Arrays 40 More Directives 44 Working with ng-repeat 45 ng-repeat Over an Object 46 Helper Variables in ng-repeat 47 Track by ID 48 ng-repeat Across Multiple HTML Elements 50 Conclusion 52 Chapter聽3.聽Unit Testing in AngularJS 53 Unit Testing: What and Why? 53 Introduction to Karma 55 Karma Plugins 56 Explaining the Karma Config 57 Generating the Karma Config 59 Jasmine: Spec Style of Testing 60 Jasmine Syntax 60 Useful Jasmine Matchers 61 Writing a Unit Test for Our Controller 62 Running the Unit Test 65 Conclusion 66 Chapter聽4.聽Forms, Inputs, and Services 67 Working with ng-model 67 Working with Forms 69 Leverage Data-Binding and Models 70 Form Validation and States 72 Error Handling with Forms 73 Displaying Error Messages 74 Styling Forms and States 76 Nested Forms with ng-form 78 Other Form Controls 80 Textareas 80 Checkboxes 81 Radio Buttons 82 Combo Boxes/Drop-Downs 84 Conclusion 86 Chapter聽5.聽All About AngularJS Services 87 AngularJS Services 87 Why Do We Need AngularJS Services? 88 Services Versus Controllers 90 Dependency Injection in AngularJS 91 Using Built-In AngularJS Services 92 Order of Injection 94 Common AngularJS Services 95 Creating Our Own AngularJS Service 96 Creating a Simple AngularJS Service 96 The Difference Between Factory, Service, and Provider 100 Conclusion 104 Chapter聽6.聽Server Communication Using $http 105 Fetching Data with $http Using GET 105 A Deep Dive into Promises 109 Propagating Success and Error 111 The $q Service 112 Making POST Requests with $http 112 $http API 114 Configuration 115 Advanced $http 117 Configuring $http Defaults 117 Interceptors 119 Best Practices 122 Conclusion 124 Chapter聽7.聽Unit Testing Services and XHRs 125 Dependency Injection in Our Unit Tests 125 State Across Unit Tests 127 Mocking Out Services 129 Spies 131 Unit Testing Server Calls 133 Integration-Level Unit Tests 136 Conclusion 138 Chapter聽8.聽Working with Filters 139 What Are AngularJS Filters? 139 Using AngularJS Filters 140 Common AngularJS Filters 142 Using Filters in Controllers and Services 148 Creating AngularJS Filters 149 Things to Remember About Filters 151 Conclusion 152 Chapter聽9.聽Unit Testing Filters 153 The Filter Under Test 153 Testing the timeAgo Filter 154 Conclusion 156 Chapter聽10.聽Routing Using ngRoute 157 Routing in a Single-Page Application 158 Using ngRoute 159 Routing Options 161 Using Resolves for Pre-Route Checks 164 Using the $routeParams Service 166 Things to Watch Out For 167 A Full AngularJS Routing Example 168 Additional Configuration 178 HTML5 Mode 178 SEO with AngularJS 180 Analytics with AngularJS 181 Alternatives: ui-router 183 Conclusion 184 Chapter聽11.聽Directives 187 What Are Directives? 187 Alternatives to Custom Directives 188 ng-include 188 Limitations of ng-include 191 ng-switch 191 Understanding the Basic Options 193 Creating a Directive 193 Template/Template URL 194 Restrict 197 The link Function 199 Scope 200 Replace 210 Conclusion 212 Chapter聽12.聽Unit Testing Directives 213 Steps Involved in Testing a Directive 213 The Stock Widget Directive 214 Setting Up Our Directive Unit Test 215 Other Considerations 219 Conclusion 220 Chapter聽13.聽Advanced Directives 221 Life Cycles in AngularJS 221 AngularJS Life Cycle 221 The Digest Cycle 224 Directive Life Cycle 226 Transclusions 226 Basic Transclusion 229 Advanced Transclusion 230 Directive Controllers and require 234 require Options 239 Input Directives with ng-model 240 Custom Validators 244 Compile 246 Priority and Terminal 252 Third-Party Integration 252 Best Practices 257 Scopes 258 Clean Up and Destroy 258 Watchers 259 $apply (and $digest) 260 Conclusion 260 Chapter聽14.聽End-to-End Testing 263 The Need for Protractor 263 Initial Setup 264 Protractor Configuration 265 An End-to-End Test 266 Considerations 269 Conclusion 272 Chapter聽15.聽Guidelines and Best Practices 273 Testing 273 Test-Driven Development 273 Variety of Tests 274 When to Run Tests 275 Project Structure 276 Best Practices 276 Directory Structure 277 Third-Party Libraries 281 Starting Point 282 Build 283 Grunt 283 Serve a Single JavaScript File 284 Minification 285 ng-templates 285 Best Practices 285 General 286 Services 286 Controllers 287 Directives 288 Filters 288 Tools and Libraries 289 Batarang 289 WebStorm 290 Optional Modules 291 Conclusion 292 Index 293 About the Authors 301 If you want to get started with AngularJS, either as a side project, an additional tool, or for your main work, this practical guide teaches you how to use this meta-framework step-by-step, from the basics to advanced concepts. By the end of the book, you’ll understand how to develop a large, maintainable, and performant application with AngularJS.Guided by two engineers who worked on AngularJS at Google, you’ll learn the components needed to build data-driven applications, using declarative programming and the Model–view–controller pattern. You’ll also learn how to conduct unit tests on each part of your application.Learn how to use controllers for moving data to and from viewsUnderstand when to use AngularJS services instead of controllersCommunicate with the server to store, fetch, and update data asynchronouslyKnow when to use AngularJS filters for converting data and values to different formatsImplement single-page applications, using ngRoute to select views and navigationDive into basic and advanced directives for creating reusable componentsWrite an end-to-end test on a live version of your entire applicationUse best practices, guidelines, and tools throughout the development cycle If you want to get started with AngularJS, either as a side project, an additional tool, or for your main work, this practical guide teaches you how to use this meta-framework step-by-step, from the basics to advanced concepts. By the end of the book, youll understand how to develop a large, maintainable, and performant application with AngularJS. Guided by two engineers who worked on AngularJS at Google, youll learn the components needed to build data-driven applications, using declarative programming and the Modelviewcontroller pattern. Youll also learn how to conduct unit tests on each part of your application. Annotation Develop smaller, lighter web apps that are simple to create and easy to test, extend, and maintain as they grow. This hands-on guide introduces you to AngularJS, the open source JavaScript framework that uses model-view-controller (MVC) architecture, data binding, client-side templates and dependency injection to create a much-needed structure for building web apps