Angular JS in Action

**Summary** __AngularJS in Action__ covers everything you need to know to get started with the AngularJS framework. As you read, you'll explore all the individual components of the framework and learn how to customize and extend them. You'll discover the emerging patterns for web application architecture and tackle required tasks like communicating with a web server back-end. Along the way, you'll see AngularJS in action by building real world applications with thoroughly commented code. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. **About the Technology** AngularJS is a JavaScript-based framework that extends HTML, so you can create dynamic, interactive web applications in the same way you create standard static pages. Out of the box, Angular provides most of the functionality you'll need for basic apps, but you won't want to stop there. Intuitive, easy to customize, and test-friendly, Angular practically begs you to build more interesting apps. **About the Book** __AngularJS in Action__ teaches you everything you need to get started with AngularJS. As you read, you'll learn to build interactive single-page web interfaces, apply emerging patterns like MVVM, and tackle key tasks like communicating with back-end servers. All examples are supported by clear explanations and illustrations along with fully annotated code listings. This book assumes you know at least some JavaScript. No prior exposure to AngularJS is required. **What's Inside** * Get started with AngularJS * Write your own components * Best practices for application architecture * Progressively build a full-featured application * Covers Angular JS 1.3 * Sample application updated to the latest version of Angular **About the Author** **Lukas Ruebbelke** is a full-time web developer and an active contributor to the AngularJS community. **Table of Contents** ## PART 1 GET ACQUAINTED WITH ANGULARJS 2. Hello AngularJS 3. Structuring your AngularJS application## PART 2 MAKE SOMETHING WITH ANGULARJS 4. Views and controllers 5. Models and services 6. Directives 7. Animations 8. Structuring your site with routes 9. Forms and validations ## APPENDIXES 2. Setting up Karma 3. Setting up a Node.js server 4. Setting up a Firebase server 5. Running the app AngularJS in Action 1 brief contents 8 contents 10 foreword 14 preface 16 acknowledgments 17 about this book 18 Roadmap 18 Source code conventions and downloads 19 Software requirements 20 Resources 20 Author Online 20 about the authors 21 about the cover illustration 22 Part 1: Get acquainted with AngularJS 24 Chapter 1: Hello AngularJS 26 1.1 Advantages of using AngularJS 27 1.2 The AngularJS big picture 29 1.3 Build your first AngularJS application 30 1.3.1 The module 33 1.3.2 Views and controllers 34 1.3.3 Services 38 1.3.4 Directives 40 1.4 Summary 41 Chapter 2: Structuring your AngularJS application 43 2.1 Hello Angello 43 2.2 AngularJS application structure 46 2.3 Laying the Angello foundation 48 2.4 Basic routes and navigation 49 2.5 A few best practices 53 2.6 Summary 54 Part 2: Make something with AngularJS 56 Chapter 3: Views and controllers 58 3.1 The big picture 59 3.2 What is an AngularJS view? 61 3.3 What is an AngularJS controller? 62 3.3.1 The digest cycle 63 3.3.2 Controller as syntax 64 3.3.3 AngularJS events 65 3.4 Properties and expressions 66 3.4.1 Display stories with ngRepeat 66 3.4.2 Filters 69 3.4.3 Expressions 71 3.5 Best practices and testing 77 3.6 Summary 79 Chapter 4: Models and services 80 4.1 What are models and services? 81 4.1.1 Hello services 82 4.1.2 The service lifecycle 82 4.1.3 The different types of services 83 4.2 Models with $http 86 4.2.1 What is $http? 86 4.2.2 Create your first model 87 4.2.3 $http convenience methods 88 4.3 Promises 90 4.3.1 What are promises? 91 4.3.2 Promises in action 91 4.3.3 $http.success and $http.error 92 4.3.4 Elegant sequencing with promises 93 4.4 $http interceptors 94 4.4.1 Why intercept? 94 4.4.2 Interceptors in action 95 4.5 Service decorators 96 4.5.1 Why decorate? 96 4.5.2 Enhanced logging 96 4.6 Testing consideration 98 4.6.1 Testing a service 98 4.6.2 Using $httpBackend to mock server calls 99 4.6.3 Best practices 101 4.7 Summary 101 Chapter 5: Directives 103 5.1 Introduction to directives 103 5.1.1 What are directives? 103 5.1.2 Why we need directives 104 5.1.3 Why we want directives 104 5.2 Directives 101: a quick foundation 104 5.2.1 The user story directive 105 5.3 A more advanced feature 110 5.3.1 The drag-and-drop feature 110 5.3.2 Use the drag-container directive 112 5.3.3 Build the controller 113 5.3.4 Create the drop-container directive 115 5.3.5 Use the drop-container directive 116 5.3.6 Build the controller 117 5.3.7 Create the drop-target directive 123 5.3.8 Use the drop-target directive 125 5.3.9 Build the controller 125 5.3.10 Create the $dragging service 126 5.3.11 Update the StoryboardCtrl 127 5.4 Integrating with third-party libraries again! 129 5.4.1 Install Flot 129 5.4.2 Build the directive 130 5.4.3 Use the directive 130 5.4.4 Massage our data 130 5.4.5 It’s time we had the “isolated scope talk” 132 5.4.6 Grand finale: breathe life into Flot 133 5.5 Testing a directive 135 5.6 Best practices 136 5.7 Summary 137 Chapter 6: Animations 138 6.1 Intro to animations 138 6.1.1 How AngularJS handles animations 139 6.1.2 The animation-naming convention 139 6.1.3 Animations enable! 140 6.2 CSS transitions 141 6.2.1 Define the base transition 141 6.2.2 Define the ng-enter transitions 141 6.2.3 Define the ng-leave transitions 142 6.2.4 Making it move 142 6.3 CSS animations 144 6.3.1 Define the base animation classes 144 6.3.2 Define the animation keyframes 144 6.3.3 Make it move 147 6.4 JavaScript animations 147 6.4.1 Defining the JavaScript animation 148 6.4.2 The JavaScript animation events 149 6.4.3 The JavaScript animation class 149 6.4.4 TweenMax 150 6.4.5 Making it move 150 6.5 Testing 151 6.6 Best practices 151 6.7 Summary 152 Chapter 7: Structuring your site with routes 153 7.1 The components of AngularJS routes 154 7.2 How to create routes in AngularJS 155 7.2.1 Create your first route with ngRoute and ngView 155 7.2.2 Add ngView 155 7.2.3 Set up your route with $routeProvider 155 7.2.4 Set up route navigation 157 7.2.5 Review 157 7.3 Using parameters with routes 158 7.3.1 Review 160 7.4 Using resolve with routes 160 7.4.1 Review 161 7.5 Route events 162 7.5.1 Review 162 7.6 Testing 162 7.7 Best practices 163 7.8 Summary 164 Chapter 8: Forms and validations 165 8.1 The big picture: AngularJS form validation 166 8.1.1 Extending HTML form elements 166 8.1.2 Adding validations 167 8.1.3 Form validation and CSS 171 8.1.4 Form validation, $setPristine, and $setUntouched 172 8.2 Testing 172 8.3 Best practices 175 8.4 Summary 175 appendix A: Setting up Karma 176 Setting up Karma 176 Install Node.js and Node Package Manager (npm) 176 Install packages 176 Initialize Karma 177 Use Karma 180 appendix B: Setting up a Node.js server 181 Setting up a Node.js server 181 Install Node.js (with Node Package Manager, a.k.a. npm) and MongoDB 181 Initialize the repo 181 Update EndpointConfigService.js 182 A note about Auth0 182 appendix C: Setting up a Firebase server 183 Setting up a Firebase server 183 Set up an account with Firebase 183 Create your first app 183 Bootstrap your Firebase app to Angello 183 A note about Auth0 184 appendix D: Running the app 185 Running the app 185 Get the code 185 Start the server 185 View the app 185 index 186 Symbols 186 A 186 B 186 C 187 D 187 E 187 F 188 G 188 H 188 I 188 J 188 K 188 L 188 M 188 N 189 O 189 P 189 R 189 S 189 T 190 U 190 V 190 W 190 X 190 AngularJS in Action teaches you everything you need to get started with AngularJS. As you read, you'll learn to build interactive single-page web interfaces, apply emerging patterns like MVVM, and tackle key tasks like communicating with back-end servers. All examples are supported by clear explanations and illustrations along with fully annotated code listings. Summary AngularJS in Action covers everything you need to know to get started with the AngularJS framework. As you read, you'll explore all the individual components of the framework and learn how to customize and extend them. You'll discover the emerging patterns for web application architecture and tackle required tasks like communicating with a web server back-end. Along the way, you'll see AngularJS in action by building real world applications with thoroughly commented code. About the Technology AngularJS is a JavaScript-based framework that extends HTML, so you can create dynamic, interactive web applications in the same way you create standard static pages. Out of the box, Angular provides most of the functionality you'll need for basic apps, but you won't want to stop there. Intuitive, easy to customize, and test-friendly, Angular practically begs you to build more interesting apps. About the Book This book assumes you know at least some JavaScript. No prior exposure to AngularJS is required. What's Inside Get started with AngularJS Write your own components Best practices for application architecture Progressively build a full-featured application Covers Angular JS 1.3 Sample application updated to the latest version of Angular About the Author Lukas Ruebbelke is a full-time web developer and an active contributor to the AngularJS community. Brian Ford worked on the AngularJS team and created the Batarang extension AngularJS is an innovative web framework from Google that extends the HTML vocabulary so you can create dynamic, interactive web applications in the same way you create standard static HTML pages. Out of the box, Angular provides most of the functionality you'll need for basic apps, but you won't want to stop there. Because it's smart and intuitive, Angular practically begs you to build more interesting apps. It's easy to customize and extend, and it's designed to be readable and testable. AngularJS in Action covers everything you need to know to get started with the AngularJS framework. As you read, you'll explore all the individual components of the framework and learn how to customize and extend them. You'll discover the emerging patterns for web application architecture and tackle required tasks like communicating with a web server back-end. Along the way, you'll see AngularJS in action by building real world applications with thoroughly-commented code.