Pro AngularJS learn to harness the power of modern web browser

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	671
Dung lượng	11,69 MB

Nội dung

www.it-ebooks.info 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 www.it-ebooks.info Contents at a Glance About the Author�� xxiii About the Technical Reviewer�� xxv ■■Part 1: Getting Ready�� ■■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 www.it-ebooks.info ■ 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 www.it-ebooks.info Part Getting Ready www.it-ebooks.info Chapter 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 • 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 and 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 www.it-ebooks.info Chapter ■ Getting Ready Part 1: Getting Ready Part 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 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 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 var model = { user: "Adam", items: [{ action: "Buy Flowers", done: false }, { action: "Get Shoes", done: false }, { action: "Collect Tickets", done: true }, { action: "Call Joe", done: false }] }; var todoApp = angular.module("todoApp", []); www.it-ebooks.info Chapter ■ Getting Ready todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; }); To Do List Add Description Done This listing is taken from Chapter 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 {{todo.user}}'s To Do List {{todo.items.length}} Add www.it-ebooks.info Chapter ■ Getting Ready Description Done {{item.action}} {{item.done}} This is a subsequent listing from Chapter 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 var model = { user: "Adam", items: [{ action: "Buy Flowers", done: false }, { action: "Get Shoes", done: false }, { action: "Collect Tickets", done: true }, { action: "Call Joe", done: false }] }; var todoApp = angular.module("todoApp", []); todoApp.controller("ToDoCtrl", function ($scope) { $scope.todo = model; }); www.it-ebooks.info Chapter ■ Getting Ready elements omitted for brevity > Add 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 and 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.) www.it-ebooks.info ■ Contents ■■Chapter 4: HTML and Bootstrap CSS Primer��55 Understanding HTML��55 Understanding the Anatomy of an HTML Element�� 57 Understanding Attributes�� 58 Understanding Element Content�� 58 Understanding Void Elements�� 59 Understanding the Document Structure�� 59 Understanding Bootstrap��60 Applying Basic Bootstrap Classes�� 62 Using Bootstrap to Style Tables�� 64 Using Bootstrap to Create Forms�� 67 Using Bootstrap to Create Grids�� 70 Summary��74 ■■Chapter 5: JavaScript Primer��75 Preparing the Example Project��76 Understanding the Script Element��77 Using Statements��78 Defining and Using Functions��78 Defining Functions with Parameters�� 79 Defining Functions That Return Results�� 80 Detecting Functions�� 81 Using Variables and Types��83 Using the Primitive Types�� 83 Creating Objects�� 86 Working with Objects�� 90 Using JavaScript Operators��95 Using Conditional Statements�� 96 The Equality Operator vs the Identity Operator�� 97 Explicitly Converting Types�� 100 ix www.it-ebooks.info ■ Contents Working with Arrays��103 Using an Array Literal�� 103 Detecting an Array�� 104 Reading and Modifying the Contents of an Array�� 105 Enumerating the Contents of an Array�� 106 Using the Built-in Array Methods�� 107 Comparing undefined and null Values��107 Checking for null or undefined�� 109 Working with Promises��111 Working with JSON��116 Summary��118 ■■Chapter 6: SportsStore: A Real Application��119 Getting Started��120 Preparing the Data �� 120 Preparing the Application�� 124 Displaying the (Fake) Product Data��127 Creating the Controller�� 127 Displaying the Product Details�� 129 Displaying the Category List��132 Creating a List of Categories�� 132 Generating the Category Navigation Links�� 133 Selecting the Category�� 137 Highlighting the Selected Category�� 140 Adding Pagination �� 142 Summary��147 ■■Chapter 7: SportsStore: Navigation and Checkout��149 Preparing the Example Project ��149 Using the Real Product Data��149 Handling Ajax Errors�� 151 x www.it-ebooks.info ■ Contents Creating Partial Views��154 Creating the Cart��156 Defining the Cart Module and Service�� 156 Creating a Cart Widget�� 158 Adding Product Selection Buttons�� 161 Adding URL Navigation��163 Defining URL Routes�� 164 Using URL Routing to Navigate�� 166 Starting the Checkout Process��168 Applying the Checkout Summary�� 170 Summary��172 ■■Chapter 8: SportsStore: Orders and Administration��173 Preparing the Example Project��173 Getting Shipping Details��173 Adding Form Validation�� 175 Adding the Remaining Form Fields�� 180 Placing Orders��182 Extending the Deployd Server�� 182 Defining the Controller Behavior �� 184 Calling the Controller Behavior �� 185 Defining the View�� 185 Making Improvements��186 Administering the Product Catalog��187 Preparing Deployd�� 187 Creating the Admin Application�� 189 Implementing Authentication�� 191 Defining the Main View and Controller�� 194 Implementing the Orders Feature�� 196 Implementing the Products Feature�� 199 Summary��204 xi www.it-ebooks.info ■ Contents ■■Part 2: Working with AngularJS�� 205 ■■Chapter 9: The Anatomy of an AngularJS App��207 Preparing the Example Project��208 Working with Modules��209 Setting the Boundaries of an AngularJS Application�� 209 Using Modules to Define AngularJS Components��210 Defining Controllers�� 211 Defining Directives�� 217 Defining Filters�� 221 Defining Services�� 223 Using Modules to Organize Code��227 Working with the Module Life Cycle�� 230 Summary��231 ■■Chapter 10: Using Binding and Template Directives��233 Why and When to Use Directives��234 Preparing the Example Project��234 Using the Data Binding Directives��235 Performing One-Way Bindings (and Preventing Them)�� 237 Creating Two-Way Data Bindings�� 240 Using the Template Directives��241 Generating Elements Repeatedly�� 242 Repeating Multiple Top-Level Elements�� 249 Working with Partial Views�� 250 Using the ng-include Directive as an Attribute�� 254 Conditionally Swapping Elements�� 255 Hiding Unprocessed Inline Template Binding Expressions�� 259 Summary��261 xii www.it-ebooks.info ■ Contents ■■Chapter 11: Using Element and Event Directives��263 Preparing the Example Project��264 Using the Element Directives��265 Showing, Hiding, and Removing Elements�� 265 Managing Classes and CSS�� 271 Handling Events��275 Creating a Custom Event Directive�� 279 Managing Special Attributes��280 Managing Boolean Attributes�� 280 Managing Other Attributes�� 283 Summary��283 ■■Chapter 12: Working with Forms��285 Preparing the Example Project��286 Using Form Elements with Two-Way Data Bindings��287 Implicitly Creating Model Properties�� 289 Checking That the Data Model Object Has Been Created�� 292 Validating Forms��293 Performing Basic Form Validation�� 294 Providing Form Validation Feedback��299 Using CSS to Provide Feedback�� 299 Using the Special Variables to Provide Feedback�� 303 Deferring Validation Feedback�� 307 Using the Form Directive Attributes��309 Using Input Elements�� 309 Using Text Areas�� 312 Using Select Elements�� 313 Summary��318 xiii www.it-ebooks.info ■ Contents ■■Chapter 13: Using Controllers and Scopes��319 Why and When to Use Controllers and Scopes��319 Preparing the Example Project��320 Understanding the Basics��321 Creating and Applying Controllers�� 321 Setting Up the Scope�� 322 Modifying the Scope�� 324 Organizing Controllers��325 Using a Monolithic Controller�� 326 Reusing a Controller�� 328 Using Controller Inheritance�� 333 Using Multiple Controllers�� 341 Using Scope-less Controllers��343 Explicitly Updating the Scope��345 Setting Up jQuery UI�� 345 Controlling the Button State�� 347 Counting the Button Clicks�� 348 Summary��349 ■■Chapter 14: Using Filters��351 Why and When to Use Filters��352 Preparing the Example Project��352 Downloading the Localization File�� 354 Filtering Single Data Values��354 Formatting Currency Values�� 355 Formatting Other Numeric Values�� 357 Formatting Dates�� 358 Changing String Case�� 360 Generating JSON�� 361 Localizing Filter Output�� 362 xiv www.it-ebooks.info ■ Contents Filtering Collections��364 Limiting the Number of Items�� 365 Selecting Items�� 368 Sorting Items�� 370 Chaining Filters��374 Creating Custom Filters��375 Creating a Filter That Formats a Data Value�� 375 Creating a Collection Filter�� 377 Building on Existing Filters�� 379 Summary��380 ■■Chapter 15: Creating Custom Directives��381 Why and When to Create Custom Directives��382 Preparing the Example Project��382 Creating a Custom Directive��383 Defining the Directive�� 383 Implementing the Link Function�� 385 Breaking the Data Property Dependency�� 388 Handling Data Changes�� 391 Working with jqLite��396 Navigating the Document Object Models�� 396 Modifying Elements�� 401 Creating and Removing Elements�� 404 Handling Events�� 407 Other jqLite Methods�� 409 Accessing AngularJS Features from jqLite�� 409 Replacing jqLite with jQuery��410 Summary��412 xv www.it-ebooks.info ■ Contents ■■Chapter 16: Creating Complex Directives��413 Preparing the Example Project��413 Defining Complex Directives��414 Defining How the Directive Can Be Applied�� 415 Using Directive Templates��419 Using a Function as a Template�� 421 Using an External Template�� 422 Selecting an External Template with a Function�� 423 Replacing the Element�� 425 Managing Directive Scopes��429 Creating Multiple Controllers�� 431 Giving Each Directive Instance Its Own Scope�� 432 Creating Isolated Scopes�� 435 Summary��445 ■■Chapter 17: Advanced Directive Features��447 Preparing the Example Project��447 Using Transclusion��448 Using Compile Functions�� 451 Using Controllers in Directives��454 Adding Another Directive�� 458 Creating Custom Form Elements��460 Handling External Changes�� 463 Handling Internal Changes�� 464 Formatting Data Values�� 465 Validating Custom Form Elements�� 467 Summary��470 xvi www.it-ebooks.info ■ Contents ■■Part 3: AngularJS Services�� 471 ■■Chapter 18: Working with Modules and Services��473 Why and When to Use and Create Services and Modules��473 Preparing the Example Project��474 Using Modules to Structure an Application��476 Maintaining a Single Module�� 477 Creating a New Module�� 479 Creating and Using a Service��480 Using the Factory Method�� 480 Using the Service Method�� 483 Using the Provider Method�� 485 Using the Built-in Modules and Services��487 Summary��488 ■■Chapter 19: Services for Global Objects, Errors, and Expressions��489 Preparing the Example Project��489 Accessing the DOM API Global Objects��489 Why and When to Use the Global Object Services�� 490 Accessing the Window Object�� 490 Accessing the Document Object�� 491 Using Intervals and Timeouts�� 492 Accessing the URL�� 493 Performing Logging�� 500 Dealing with Exceptions��501 Why and When to Use the Exception Service�� 501 Working with Exceptions�� 502 Working Directly with the Exception Service�� 503 Implementing a Custom Exception Handler�� 504 xvii www.it-ebooks.info ■ Contents Working with Dangerous Data��505 Why and When to Use the Dangerous Data Services�� 505 Displaying Dangerous Data�� 505 Using an Unsafe Binding�� 507 Explicitly Trusting Data �� 510 Working with AngularJS Expressions and Directives��511 Why and When to Use the Expression and Directive Services�� 512 Converting Expressions into Functions�� 512 Interpolating Strings�� 516 Compiling Content�� 519 Summary��521 ■■Chapter 20: Services for Ajax and Promises��523 Why and When to Use the Ajax Services��524 Preparing the Example Project��524 Making Ajax Requests��524 Making the Ajax Request�� 527 Receiving Ajax Responses�� 528 Configuring Ajax Requests�� 532 Setting Ajax Defaults�� 536 Using Ajax Interceptors�� 538 Working with Promises��540 Getting and Using the Deferred Object�� 541 Consuming the Promise �� 543 Understanding Why Promises Are Not Regular Events�� 545 Chaining Outcomes Together �� 546 Grouping Promises�� 547 Summary��550 xviii www.it-ebooks.info ■ Contents ■■Chapter 21: Services for REST��551 Why and When to Use the REST Services��551 Preparing the Example Project��552 Creating the RESTful Service�� 552 Creating the AngularJS Application�� 556 Using the $http Service��561 Listing the Product Data�� 561 Deleting Products�� 564 Creating Products�� 564 Updating Products�� 565 Testing the Ajax Implementation�� 565 Hiding the Ajax Requests��565 Installing the ngResource Module�� 568 Using the $resource Service�� 569 Configuring the $resource Service Actions�� 574 Creating $resource-Ready Components�� 576 Summary��578 ■■Chapter 22: Services for Views��579 Why and When to Use the View Services��579 Preparing the Example Project��579 Understanding the Problem�� 580 Using URL Routing��582 Installing the ngRoute Module�� 582 Defining the URL Routes�� 583 Displaying the Selected View�� 585 Wiring Up the Code and Markup�� 585 Using Route Parameters��590 Accessing Routes and Routes Parameters�� 591 xix www.it-ebooks.info ■ Contents Configuring Routes��595 Using Controllers with Routes�� 596 Adding Dependencies to Routes�� 598 Summary��602 ■■Chapter 23: Services for Animation and Touch��603 Preparing the Example Project��603 Animating Elements��603 Why and When to Use the Animation Service�� 604 Installing the ngAnimation Module�� 604 Defining and Applying an Animation�� 605 Avoiding the Perils of Parallel Animation�� 607 Supporting Touch Events��609 Why and When to Use Touch Events�� 610 Installing the ngTouch Module�� 610 Handling Swipe Gestures�� 610 Using the Replacement ng-click Directive�� 611 Summary��611 ■■Chapter 24: Services for Provision and Injection��613 Why and When to Use the Provision and Injection Services��613 Preparing the Example Project��613 Registering AngularJS Components��613 Managing Injection��616 Determining Function Dependencies�� 616 Obtaining Service Instances�� 619 Simplifying the Invocation Process�� 620 Getting the $injector Service from the Root Element�� 620 Summary��621 xx www.it-ebooks.info ■ Contents ■■Chapter 25: Unit Testing��623 Why and When to Unit Testing��623 Preparing the Example Project��624 Installing the ngMocks Module�� 624 Creating the Test Configuration�� 625 Creating the Example Application�� 626 Working with Karma and Jasmine��628 Running the Tests�� 629 Understanding the Mock Objects��632 The Test Objects and APIs�� 632 Testing a Controller��633 Arranging the Test�� 634 Using the Mock Objects��635 Mocking HTTP Responses�� 636 Mocking Periods of Time�� 640 Testing Logging�� 642 Testing Other Components��645 Testing a Filter�� 645 Testing a Directive�� 646 Testing a Service�� 648 Summary��650 Index��651 xxi www.it-ebooks.info About the Author Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank Now retired, he spends his time writing and running xxiii www.it-ebooks.info About the Technical Reviewer Fabio Claudio Ferracchiati is a senior consultant and a senior analyst/developer using Microsoft technologies He works for Brain Force (www.brainforce.com) in its Italian branch (www.brainforce.it) He is a Microsoft Certified Solution Developer for NET, a Microsoft Certified Application Developer for NET, a Microsoft Certified Professional, and a prolific author and technical reviewer Over the past ten years, he’s written articles for Italian and international magazines and coauthored more than ten books on a variety of computer topics xxv www.it-ebooks.info ... skeletal mock-up of a todo application: a header at the top of the page and a table that contains the todo items To see the effect I have created, use the browser to navigate to the todo.html file,... 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... have to worry about preserving the state of the data in the application Applying AngularJS to the HTML File It is easy to add AngularJS to an HTML file Simply add a script element to import the

Ngày đăng: 19/04/2019, 15:52