TO DO List

BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Freeman Pro AngularJS RELATED AngularJS is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices. AngularJS, which is maintained by Google, brings the power of the Model-View-Controller (MVC) pattern to the client, providing the foundation for complex and rich web apps. It allows you to build applications that are smaller, faster, and with a lighter resource footprint than ever before. Best-selling author Adam Freeman explains how to get the most from AngularJS. He begins by describing the MVC pattern and the many benefits that can be gained from separating your logic and presentation code. He then shows how you can use AngularJS’s features within in your projects to produce professional-quality results. Starting from the nuts-and-bolts and building up to the most advanced and sophis- ticated features AngularJS is carefully unwrapped, going in-depth to give you the knowledge you need. Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them. With this book you’ll: • Gain a solid architectural understanding of the MVC pattern to separate logic, data and presentation code • Learn how to create rich and dynamic web apps using AngularJS • Understand how each feature works and why it is important • Understand how to extend HTML with declarative syntax • Learn how to extend and customize AngularJS • Learn how to test, refine, and deploy your AngularJS projects Shelve in ISBN 978-1-4302-6448-4 Web Development/JavaScript 54499 User level: Intermediate SOURCE CODE ONLINE 9 781430 264484 www.apress.com For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. Contents at a Glance About the Author ��xxiii About the Technical Reviewer ��xxv ■ Part 1: Getting Ready ��1 ■ Chapter 1: Getting Ready ��3 ■ Chapter 2: Your First AngularJS App ��15 ■ Chapter 3: Putting AngularJS in Context ��45 ■ Chapter 4: HTML and Bootstrap CSS Primer ��55 ■ Chapter 5: JavaScript Primer ��75 ■ Chapter 6: SportsStore: A Real Application ��119 ■ Chapter 7: SportsStore: Navigation and Checkout ��149 ■ Chapter 8: SportsStore: Orders and Administration ��173 ■ Part 2: Working with AngularJS ��205 ■ Chapter 9: The Anatomy of an AngularJS App ��207 ■ Chapter 10: Using Binding and Template Directives ��233 ■ Chapter 11: Using Element and Event Directives ��263 ■ Chapter 12: Working with Forms ��285 ■ Chapter 13: Using Controllers and Scopes ��319 ■ Chapter 14: Using Filters ��351 ■ Chapter 15: Creating Custom Directives ��381 v ■ Contents at a GlanCe ■ Chapter 16: Creating Complex Directives ��413 ■ Chapter 17: Advanced Directive Features ��447 ■ Part 3: AngularJS Services ��471 ■ Chapter 18: Working with Modules and Services ��473 ■ Chapter 19: Services for Global Objects, Errors, and Expressions ��489 ■ Chapter 20: Services for Ajax and Promises ��523 ■ Chapter 21: Services for REST ��551 ■ Chapter 22: Services for Views ��579 ■ Chapter 23: Services for Animation and Touch ��603 ■ Chapter 24: Services for Provision and Injection ��613 ■ Chapter 25: Unit Testing ��623 Index ��651 vi Part 1 Getting Ready Chapter 1 Getting Ready AngularJS taps into some of the best aspects of server-side development and uses them to enhance HTML in the browser, creating a foundation that makes building rich applications simpler and easier. AngularJS applications are built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creating applications that are • Extendable: It is easy to figure out how even a complex AngularJS app works once you understand the basics—and that means you can easily enhance applications to create new and useful features for your users. • Maintainable: AngularJS apps are easy to debug and fix, which means that long-term maintenance is simplified. • Testable: AngularJS has good support for unit and end-to-end testing, meaning that you can find and fix defects before your users do. • Standardized: AngularJS builds on the innate capabilities of the web browser without getting in your way, allowing you to create standards-compliant web apps that take advantage of the latest features (such as HTML5 APIs) and popular tools and frameworks. AngularJS is an open source JavaScript library that is sponsored and maintained by Google. It has been used in some of the largest and most complex web apps around. In this book, I show you everything you need to know to get the benefits of AngularJS in your own projects. What Do You Need to Know? Before reading this book, you should be familiar with the basics of web development, have an understanding of how HTML and CSS work, and, ideally, have a working knowledge of JavaScript. If you are a little hazy on some of these details, I provide refreshers for the HTML, CSS, and JavaScript I use in this book in Chapters 4 and 5. You won’t find a comprehensive reference for HTML elements and CSS properties, though. There just isn’t the space in a book about AngularJS to cover HTML in its entirety. If you want a complete reference for HTML and CSS, then I suggest another of my books, The Definitive Guide to HTML5, also published by Apress. What Is the Structure of This Book? This book is split into three parts, each of which covers a set of related topics. 3 Chapter 1 ■ GettinG ready Part 1: Getting Ready Part 1 of this book provides the information you need to get ready for the rest of the book. It includes this chapter and primers/refreshers for HTML, CSS, and JavaScript. I also show you how to build your first AngularJS application and take you through the process of building a more realistic application, called SportsStore. Part 2: Working with AngularJS Part 2 of this book takes you through the features of the AngularJS library, starting with an overview of the different types of components in an AngularJS application and then working through each type in turn. AngularJS includes a lot of built-in functionality, which I describe in depth, and provides endless customization options, all of which I demonstrate. Part 3: AngularJS Modules and Services Part 3 of this book explains the roles that two important components play in AngularJS: modules and services. I show you the different ways you can create both components and explain the wide range of built-in services that AngularJS provides. This includes support for simplifying Single-Page Application development, Ajax and RESTful APIs, and unit testing. Are There Lots of Examples? There are loads of examples. The best way to learn AngularJS is by example, and I have packed as many of them as I can into this book. To maximize the number of examples in this book, I have adopted a simple convention to avoid listing the contents of files over and over again. The first time I use a file in a chapter, I’ll list the complete contents, just as I have in Listing 1-1. Listing 1-1. A Complete Example Document TO DO List

Description	Done

This listing is taken from Chapter 2. Don’t worry about what it does; just be aware that the first time I use a file in each chapter there will be complete listing, similar to the one shown in Listing 1-1. For the second and subsequent examples, I just show you the elements that change, to create a partial listing. You can spot a partial listing because it starts and ends with ellipsis (...), as shown in Listing 1-2. Listing 1-2. A Partial Listing ...

5 Chapter 1 ■ GettinG ready

Description	Done
{{item.action}}	{{item.done}}

... This is a subsequent listing from Chapter 2. You can see that just the body element, and its content, is shown and that I have highlighted a number of statements. This is how I draw your attention to the part of the example that shows the feature or technique I am describing. In a partial listing like this, only those parts shown have changed from the full listing earlier in the chapter. In some cases, I need to make changes to different parts of the same file, in which case I simply omit some elements or statements for brevity, as shown in Listing 1-3. Listing 1-3. Omitting Elements for Brevity TO DO List 6 Chapter 1 ■ GettinG ready

Description	Done

This convention lets me pack in more examples, but it does mean it can be hard to locate a specific technique. To this end, all of the chapters in which I describe AngularJS features in Parts 2 and 3 begin with a summary table that describes the techniques contained in the chapter and the listings that demonstrate how they are used. Where Can You Get the Example Code? You can download all the examples for all the chapters in this book from www.apress.com. The download is available without charge and includes all of the supporting resources that are required to re-create the examples without having to type them in. You don’t have to download the code, but it is the easiest way of experimenting with the examples and cutting and pasting it into your own projects. How Do You Set Up Your Development Environment? You can get started with AngularJS development with a browser, a text editor, and a web server. One of the nice aspects of working on client-side web app development is that you can pick and mix from a wide range of development tools to create an environment that suits your working style and coding practice. In the sections that follow, I describe the environment I use so that you can re-create it on your own workstation. (You don’t have use my tools, but doing so ensures that the examples work as expected. If you decide to use a different set of tools, then skip to the “Performing a Simple Test” section later in the chapter to make sure everything works.) 7

To Do List

{{todo.user}}'s To Do List {{todo.items.length}}

Pro AngularJS

Similar Pro AngularJS