Angular dot JS Succinctly by Frederik Dietz

Angular.js is an opensource JavaScript framework developed by Google. It gives JavaScript developers a highlystructured approach to developing rich, browserbased applications which leads to very high productivity. If you are using Angular.js or considering it, this cookbook provides easytofollow recipes for issues you are likely to face. Each recipe solves a specific problem and provides a solution and indepth discussion of it.

1 2 By Frederik Dietz Foreword by Daniel Jebaraj 3 Copyright © 2013 by Syncfusion Inc. 2501 Aerial Center Parkway Suite 200 Morrisville, NC 27560 USA All rights reserved. mportant licensing information. Please read. This book is available for free download from www.syncfusion.com upon completion of a registration form. If you obtained this book from any other source, please register and download a free copy from www.syncfusion.com. This book is licensed for reading only if obtained from www.syncfusion.com. This book is licensed strictly for personal or educational use. Redistribution in any form is prohibited. The authors and copyright holders provide absolutely no warranty for any information provided. The authors and copyright holders shall not be liable for any claim, damages, or any other liability arising from, out of, or in connection with the information in this book. Please do not use this book if the listed terms are unacceptable. Use shall constitute acceptance of the terms listed. SYNCFUSION, SUCCINCTLY, DELIVER INNOVATION WITH EASE, ESSENTIAL, and .NET ESSENTIALS are the registered trademarks of Syncfusion, Inc. Technical Reviewer: Rui Machado Copy Editor: Suzanne Kattau Acquisitions Coordinator: Hillary Bowling, marketing coordinator, Syncfusion, Inc. Proofreader: Darren West, content producer, Syncfusion, Inc. I 4 Table of Contents The Story behind the Succinctly Series of Books 13 About the Author 15 Preface 16 Introduction 16 Code Examples 16 How to Contact Me 16 Acknowledgements 16 Chapter 1 An Introduction to Angular.js 17 Including the Angular.js Library Code in an HTML Page 17 Problem 17 Solution 17 Discussion 17 Binding a Text Input to an Expression 18 Problem 18 Solution 18 Discussion 18 Responding to Click Events using Controllers 19 Problem 19 Solution 19 Discussion 20 Converting Expression Output with Filters 20 Problem 20 Solution 20 5 Discussion 21 Creating Custom HTML Elements with Directives 21 Problem 21 Solution 21 Discussion 22 Chapter 2 Controllers 23 Assigning a Default Value to a Model 23 Problem 23 Solution 23 Discussion 23 Changing a Model Value with a Controller Function 24 Problem 24 Solution 24 Discussion 24 Encapsulating a Model Value with a Controller Function 25 Problem 25 Solution 25 Discussion 25 Responding to Scope Changes 26 Problem 26 Solution 26 Discussion 26 Sharing Models between Nested Controllers 27 Problem 27 Solution 27 Discussion 28 Sharing Code between Controllers using Services 28 6 Problem 28 Solution 29 Discussion 29 Testing Controllers 30 Problem 30 Solution 30 Discussion 31 Chapter 3 Directives 32 Enabling/Disabling DOM Elements Conditionally 32 Problem 32 Solution 32 Discussion 32 Changing the DOM in Response to User Actions 33 Problem 33 Solution 33 Discussion 33 Rendering an HTML Snippet in a Directive 35 Problem 35 Solution 35 Discussion 35 Rendering a Directive's DOM Node Children 36 Problem 36 Solution 36 Discussion 37 Passing Configuration Params Using HTML Attributes 37 Problem 37 Solution 37 7 Discussion 37 Repeatedly Rendering Directive's DOM Node Children 39 Problem 39 Solution 39 Discussion 40 Directive-to-Directive Communication 41 Problem 41 Solution 41 Discussion 43 Testing Directives 43 Problem 43 Solution 45 Discussion 47 Chapter 4 Filters 48 Formatting a String with a Currency Filter 48 Problem 48 Solution 48 Discussion 48 Implementing a Custom Filter to Revert an Input String 49 Problem 49 Solution 49 Discussion 49 Passing Configuration Params to Filters 49 Problem 49 Solution 50 Discussion 50 Filtering a List of DOM Nodes 50 8 Problem 50 Solution 50 Discussion 51 Chaining Filters Together 51 Problem 51 Solution 51 Discussion 52 Testing Filters 52 Problem 52 Solution 52 Discussion 53 Chapter 5 Consuming Externals Services 54 Requesting JSON Data with AJAX 54 Problem 54 Solution 54 Discussion 55 Consuming RESTful APIs 55 Problem 55 Solution 55 Discussion 57 Consuming JSONP APIs 58 Problem 58 Solution 58 Discussion 59 Deferred and Promise 59 Problem 59 Solution 60 9 Discussion 60 Testing Services 62 Problem 62 Solution 62 Discussion 63 Chapter 6 URLs, Routing, and Partials 64 Client-Side Routing with Hashbang URLs 64 Problem 64 Solution 64 Discussion 65 Using Regular URLs with the HTML 5 History API 66 Problem 66 Solution 66 Discussion 68 Using Route Location to Implement a Navigation Menu 69 Problem 69 Solution 69 Discussion 69 Listening on Route Changes to Implement a Login Mechanism 70 Problem 70 Solution 70 Discussion 71 Chapter 7 Using Forms 72 Implementing a Basic Form 72 Problem 72 Solution 72 Discussion 73 10 Validating a Form Model Client-Side 73 Problem 73 Solution 73 Discussion 74 Displaying Form Validation Errors 75 Problem 75 Solution 75 Discussion 76 Displaying Form Validation Errors with the Twitter Bootstrap Framework 76 Problem 76 Solution 76 Discussion 78 Only Enabling the Submit Button if the Form is Valid 78 Problem 78 Solution 78 Discussion 78 Implementing Custom Validations 78 Problem 78 Solution 79 Discussion 79 Chapter 8 Common User Interface Patterns 80 Filtering and Sorting a List 80 Problem 80 Solution 80 Discussion 81 Pagination through Client-Side Data 81 Problem 81 [...]... Angular. js Library Code in an HTML Page Problem You wish to use Angular. js on a web page Solution In order to get your first Angular. js app up and running, you need to include the Angular JavaScript file via script tag and make use of the ng-app directive: This is your first angular. .. love in Hamburg Frederik has a blog at fdietz.de You can reach him on Twitter via @fdietz or by email at fdietz@gmail.com 15 Preface Introduction Angular. js is an open-source JavaScript framework developed by Google It gives JavaScript developers a highly-structured approach to developing rich, browser-based applications which leads to very high productivity If you are using Angular. js or considering... with: Frederik Dietz (fdietz@gmail.com) Acknowledgements Special thanks go to my English editor and friend Robert William Smales! Thanks go to John Lindquist for his excellent screencast project egghead.io, Lukas Ruebbelke for his awesome videos, and Matias Niemela for his great blog And, of course, the whole development team behind Angular. js! 16 Chapter 1 An Introduction to Angular. js Including the Angular. js. .. visibility status on button click: Toggle Hello World! And the controller in js/ app .js: function MyCtrl($scope) { $scope.visible = true; $scope.toggle... or feedback, please feel free to send them to us at succinctly- series@syncfusion.com We sincerely hope you enjoy reading this book and that it helps you better understand the topic of study Thank you for reading Please follow us on Twitter and “Like” us on Facebook to help us spread the word about the Succinctly series! 14 About the Author Frederik Dietz is a passionate software engineer with a focus... injection The next chapter will go into all the details of controllers in Angular For now, let us quickly discuss the Model-View-ViewModel (MVVM) pattern as used by Angular In the MVVM pattern, the model is plain JavaScript, the view is the HTML template, and the ViewModel is the glue between the template and the model The ViewModel makes Angular' s two-way binding possible where changes in the model or the... to do with Angular' s dependency injection mechanism Ordering of the parameters is important! First, we select the paragraph element, which is a child of the my-widget element using Angular' s children() function as defined by element In the second step, we use jQuery to bind to the click event and modify the css property on click This is of particular interest since we have a mixture of Angular element... ng-controller="MyCtrl"> In this case {{value}} will simply not be rendered at all due to the fact that expression evaluation in Angular. js is forgiving for undefined and null values Changing a Model Value with a Controller Function Problem You wish to increment a model value by 1 using a controller function Solution Implement an increment function that changes the scope: function MyCtrl($scope) { $scope.value... function() { scope.name = "Frederik" ; scope.$digest(); expect(scope.greeting).toBe("Greetings Frederik" ); }); }); You can find the complete example on GitHub Discussion Jasmine specs use describe and it functions to group specs and beforeEach and afterEach to set up and tear down code The actual expectation compares the greeting from the scope with our expectation Greetings Frederik The scope and controller... checked attribute value is again an Angular expression You could, for example, invert the logic and use !checked instead This is just one example of a directive shipped with Angular There are many others, for example, ng-hide, ng-checked, or ng-mouseenter I encourage you to go through the Application Programming Interface (API) Reference and explore all the directives Angular has to offer In the next . listed terms are unacceptable. Use shall constitute acceptance of the terms listed. SYNCFUSION, SUCCINCTLY, DELIVER INNOVATION WITH EASE, ESSENTIAL, and .NET ESSENTIALS are the registered trademarks. Darren West, content producer, Syncfusion, Inc. I 4 Table of Contents The Story behind the Succinctly Series of Books 13 About the Author 15 Preface 16 Introduction 16 Code Examples 16. Client-Side Routing 106 Problem 106 Solution 106 Discussion 108 13 The Story behind the Succinctly Series of Books Daniel Jebaraj, Vice President Syncfusion, Inc. taying on the cutting