深入介绍如何使用AngularJS开发前端应用,并和BootStrap同时使用,捎带介绍了如何用AngularJS开发移动应用。是学习AngularJS框架不可多得的资料。Contents at a glanceAbout the authorAbout the technical reviewerPart 1: Getting ready aChapter 1: Getting Ready mamm maman. 3Chapter 2: Your First AngularJS App amana. 15Chapter 3: Putting AngularJs in Context45Chapter 4: HTML and bootstrap cSs Primerman■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■55Chapter 5: JavaScript Primer■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■口75Chapter6: Sportsstore: A Real Application,…,…,…,…,…,,,119Chapter 7: SportsStore: Navigation and checkout■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■149Chapter8: Sports Store: Orders and administration,,,,…,,,,,,,…,…,…,173Part 2: Working with AngularJS205Chapter 9: The Anatomy of an AngularJS App■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■207Chapter10: Using Binding and Template Directives,,,,,,…,…,,,,…,…233Chapter 11: Using Element and Event Directives263Chapter 12: Working with Forms285Chapter 13: Using Controllers and Scopes■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■319Chapter14: Using Filters…,,,…,,,,,,,,…,,,,,,,351Chapter 15: Creating Custom Directives.381CONTENTS AT A GLANCIChapter 16: creating Complex Directives mm mman413Chapter 17: Advanced Directive Features BR RBRRRHRRRIRIIIIIIIIII 447Part 3: AngularJs Services mammmaammammmmmmmma. 471Chapter 18: Working with Modules and Services.473Chapter 19: Services for Global Objects, Errors and Expressions mmImaImIm 489Chapter 20: Services for Ajax and promises■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■■523Chapter 21: Services for RESTa■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■551Chapter 22: Services for Views579Chapter 23: Services for Animation and Touch m.603■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■Chapter 24: Services for Provision and Injection mm mmamaammnnm 613Chapter 25: Unit Testing mmm a II a Ia IIIIIIIERIn 623Index u 651PART 1Getting ReadyCHAPTER 1Getting ReadyAngularjS taps into some of the best aspects of server-side development and uses them to enhance html in thebrowser, creating a foundation that makes building rich applications simpler and easier. AngularJS applicationsare built around a design pattern called Model-View-Controller (MVC), which places an emphasis on creatingapplications that areExtendable: It is easy to figure out how even a complex angular]S app works once youunderstand the basics-and that means you can easily enhance applications to create newand useful features for your usersMaintainable: angular]S apps are easy to debug and fix, which means that long-termmaintenance is simplifiedTestable: Angular]s has good support for unit and end-to-end testing, meaning that you canfind and fix defects before your users doStandardized: Angular]s builds on the innate capabilities of the web browser without gettingin your way, allowing you to create standards-compliant web apps that take advantage of thelatest features(such as HTML5 APIs)and popular tools and frameworksAngular s is an open source java Script library that is sponsored and maintained by google. it has been used insome of the largest and most complex web apps around. In this book, I show you everything you need to know to getthe benefits of Angular]S in your own projectsWhat do you need to know?Before reading this book, you should be familiar with the basics of web development, have an understanding of howHTML and CSs work, and, ideally, have a working knowledge of JavaScript. If you are a little hazy on some of thesedetails, I provide refreshers for the HTML, CSS, and Java Script I use in this book in Chapters 4 and 5. You wont findcomprehensive reference for htMl elements and css properties though There just isn 't the space in a book aboutAngularJS to cover HTML in its entirety. If you want a complete reference for HTML and CSS, then I suggest another ofmy books, The Definitive Guide to HTML5, also published by ApressWhat is the structure of this book?This book is split into three parts, each of which covers a set of related topicsCHAPTER 1 GETTING READYPart 1: Getting ReadyPart 1 of this book provides the information you need to get ready for the rest of the book. It includes this chapter andprimers/refreshers for HTML, CSS, and JavaScript. I also show you how to build your first angular JS application andtake you through the process of building a more realistic application, called Sports StorePart 2: Working with AngularIsPart 2 of this book takes you through the features of the AngularJS library, starting with an overview of the differenttypes of components in an Angular]S application and then working through each type in turn. AngularjS includesa lot of built-in functionality, which I describe in depth, and provides endless customization options, all of whichi demonstratePart 3: Angular)S Modules and servicesPart 3 of this book explains the roles that two important components play in AngularJS: modules and services. I showyou the different ways you can create both components and explain the wide range of built-in services that AngularJSprovides. This includes support for simplifying Single-Page Application development, Ajax and RESTful APIs, andunit testing.Are There Lots of Examples?There are loads of examples. The best way to learn AngulariS is by example, and i have packed as many of them asI can into this book. To maximize the number of examples in this book, I have adopted a simple convention to avoidlisting the contents of files over and over again. The first time I use a file in a chapter, I'll list the complete contentsjust as I have in Listing 1-1.Listing 1-1. A Complete Example Documentto do List</titley<link href="bootstrap css" rel="stylesheet" /><link href="bootstrap-theme css"rel="stylesheet/><script src="angular. js"></script><script>var model=user: Adam",items: [ i action: "Buy Flowers", done: false jI action: Get Shoes",done: falseI action: Collect Tickets", done trueI action: Call Joe",done false 1};var todoApp angular module("todoApp", [l;CHAPTER 1 GETTING READYtodoApp. controller("ToDoctrl", function($scope)iscope. todo= model;scrip</head><body ng-controller="ToDoctrI"><div class="page-header"><h1>to do list</h1></div><div class="panel"><div class="input-group"><input class="form-controI" 7><span class="input-group-btn"><button class=btn btn-default >Add</button></span></alv><table class="table table-striped"><thead><try<th>Description</th><th>Done</th></tr></thead><tbody></tbody></table></div></body></html>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 ineach chapter there will be complete listing, similar to the one shown in Listing 1-1. For the second and subsequentexamples, I just show you the elements that change, to create a partial listing. You can spot a partial listing because itstarts and ends with ellipsis(.), as shown in Listing 1-2Listing 1-2. A Partial Listing<body ng-controller<div class="page-header">h1>Itodo users To Do List<span class="label > todoitems. length]<//h1》</div><div class="panel"><div class="input-group"><input class="form-control"/>span class="input-group-b<button class="btn btn -default >Add/button></span〉CHAPTER 1 GETTING READY<table class="table table-striped"><thead><try<th>Description</th><th>Done</th></tr></thead>tbody><tr ng-repeat=" item in todoitems"><tdffitemaction]/td><tdftitem done]/td></tr</tbody>/tabl</body>This is a subsequent listing from Chapter 2. You can see that just the body element, and its content, is shown andthat I have highlighted a number of statements. This is how i draw your attention to the part of the example that showsthe feature or technique I am describing. In a partial listing like this, only those parts shown have changed from theall listing earlier in the chapter. In some cases, I need to make changes to different parts of the same file, in whichcase I simply omit some elements or statements for brevity, as shown in Listing 1-3Listing 1-3. Omitting Elements for Brevity<! DOCTYPE html><html ng-app="todoApp"><head><title>to do list</titley<link href="bootstrap css" rel="stylesheet"/><script src="angular is " ></script><script>var model=iuser: Adamitems: [i action: Buy Flowers",done: falseI action: Get Shoes",doone: false了i action: " Collect Tickets",done: truei action: Call Joe",done: falsevar todoApp angular module ("todoApp",[1)todoApp. controller("ToDoCtrl", function ($scope)iScope. todo model;)</script></head>CHAPTER 1 GETTING READY<body ng-controller="ToDoctr1">elements omitted for brevity.<div class="panel"><div class="input-group"><input class="form-control"/><span class="input-group-btn"><button class="btn btn-default >Add</butt</span></div><table class="table table-striped"><thead》tr》<th Description</th>cth>Done/th》c/tr》/ thead》tbody》</ tbody</table></div></body></htm1>This convention lets me pack in more examples, but it does mean it can be hard to locate a specific techniqueTo this end, all of the chapters in which i describe angularis features in Parts 2 and 3 begin with a summary table thatdescribes the techniques contained in the chapter and the listings that demonstrate how they are usedWhere Can You get the Example Code?Youcandownloadalltheexamplesforallthechaptersinthisbookfromwww.apress.com.Thedownloadisavailableithout charge and includes all of the supporting resources that are required to re-create the examples without havingto type them in. You don' t have to download the code, but it is the easiest way of experimenting with the examples andcutting and pasting it into your own projectsHow 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 aspectsof working on client-side web app development is that you can pick and mix from a wide range of development toolsto create an environment that suits your working style and coding practice. In the sections that follow, I describe theenvironment i use so that you can re-create it on your own workstation. (You don ' t have use my tools but doing soensures that the examples work as expected. If you decide to use a different set of tools then skip to the"Performing aSimple Test"section later in the chapter to make sure everything works </div> <!-- 下载操作区 --> <div class="download-actions"> <button type="button" class="btn-download" id="btn-download" data-id="4195691"> <i class="fa fa-download"></i> 立即获取 </button> <div class="social-list"> <button class="social-item" id="btn-like" data-id="4195691"> <i class="fa fa-heart-o"></i> <span>点赞</span> </button> <button class="social-item" id="btn-favorite" data-id="4195691"> <i class="fa fa-star-o"></i> <span>收藏</span> </button> <div class="dropdown"> <a href="javascript:;" class="social-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-share-alt"></i> <span>分享</span> </a> <ul class="dropdown-menu"> <li> <a class="dropdown-item" href="#" data-type="qq"> <i class="iconfont icon-qq"></i> 分享到QQ </a> </li> <li> <a class="dropdown-item" href="#" data-type="weixin"> <i class="iconfont icon-weixin"></i> 分享到微信 </a> </li> <li> <a class="dropdown-item" href="#" data-type="weibo"> <i class="iconfont icon-weibo-copy"></i> 分享到微博 </a> </li> <li> <a class="dropdown-item" href="#" data-type="qzone"> <i class="iconfont icon-kongjian"></i> 分享到QQ空间 </a> </li> </ul> </div> </div> </div> </div> <!-- 评论区域 --> <div id="comments" class="comments-section"> <div class="comments-header"> <h3>用户评论</h3> </div> <div class="comment-list"> <div class="commentlist" data-aid="4195691" data-pagesize="5" data-total="3" data-page="1"> <div class="comment-item"> <div class="comment-meta"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjQsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPlc8L3RleHQ+PC9zdmc+" alt="Avatar"> <div class="user-info"> <span class="name">weixin_60864142</span> <span class="time">2019-09-23 19:09:50</span> </div> <div class="rating"></div> </div> <div class="comment-content"> 深入介绍如何使用AngularJS开发前端应用,并和BootStrap同时使用,在开 </div> </div> <div class="comment-item"> <div class="comment-meta"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigyMjksMTYwLDE2NSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPlk8L3RleHQ+PC9zdmc+" alt="Avatar"> <div class="user-info"> <span class="name">yupenglynne</span> <span class="time">2019-09-23 19:09:50</span> </div> <div class="rating"></div> </div> <div class="comment-content"> 非常好,很有帮助的! </div> </div> <div class="comment-item"> <div class="comment-meta"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigyMjksMTYwLDIyMSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPlE8L3RleHQ+PC9zdmc+" alt="Avatar"> <div class="user-info"> <span class="name">qq_71802327</span> <span class="time">2019-09-23 19:09:50</span> </div> <div class="rating"></div> </div> <div class="comment-content"> 正在学习 此东西 感谢分享 书本 </div> </div> </div> <div class="comment-pagination"> </div> </div> <div class="comment-form"> <form id="CommentForm" class="needs-validation" novalidate> <input type="hidden" name="aid" value="4195691"> <div class="form-group"> <textarea name="content" class="form-control" placeholder="说说您下载后对此资源的评价,善语结善缘,恶语伤人心" rows="3" required minlength="5" maxlength="500"></textarea> <div class="invalid-feedback" style="display: none;"> 请输入5-500字的评论内容 </div> </div> <div class="form-footer"> <div class="rating-group"> <!--<span>评分</span> <select name="rate" id="backing3b" class="invisible"> <option value="5">推荐好下载</option> <option value="4">还可以</option> <option value="3">过得去</option> <option value="2">不行</option> <option value="1">无用</option> </select> <div class="rateit" data-rateit-backingfld="#backing3b"></div>--> </div> <button type="submit" class="btn btn-submit" id="btn-comment"> 提交评论 </button> </div> </form> </div> </div> </div> <!-- 右侧推荐下载 --> <div class="col-md-4"> <div class="sidebar-section"> <div class="sidebar-header"> <h3 class="sidebar-title">推荐下载</h3> </div> <ul class="sidebar-list"> <li class="sidebar-item"> <a href="/down/6149128.html" class="sidebar-link"> angularjs页面跳转 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">angularjs页面跳转</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 19</span> <span><i class="fa fa-clock-o"></i> 2020-09-20</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6184109.html" class="sidebar-link"> AngularJS动态校验 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">NULL 博文链接:https://bijian1013.iteye.com/blog/2232029</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 19</span> <span><i class="fa fa-clock-o"></i> 2020-09-21</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6136233.html" class="sidebar-link"> AngularJS.in.Action </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">AngularJS.in.Action</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 7</span> <span><i class="fa fa-clock-o"></i> 2020-09-19</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6128782.html" class="sidebar-link"> 免费AngularJS下载 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">AngularJS pdf学习 书,最细版,刚刚从生成的,希望对学习研究angularjs 的学习者有用</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 15</span> <span><i class="fa fa-clock-o"></i> 2020-09-19</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6196073.html" class="sidebar-link"> AngularJs1.3.10 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">AngularJs-1.3.10</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 6</span> <span><i class="fa fa-clock-o"></i> 2020-09-23</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6197076.html" class="sidebar-link"> angularjs1.5.7 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">angularjs@1.5.7</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 13</span> <span><i class="fa fa-clock-o"></i> 2020-09-23</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6162117.html" class="sidebar-link"> AngularJs API教程 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">AngularJs API & 教程</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 6</span> <span><i class="fa fa-clock-o"></i> 2020-09-20</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6273876.html" class="sidebar-link"> requirejs整合angularjs </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">reuqirejs整合angularjs实现的一个用户管理的小demo,使用了springmvc + shiro + angularjs实现基本功能,requirejs负责异步加载</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 16</span> <span><i class="fa fa-clock-o"></i> 2020-10-10</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6206432.html" class="sidebar-link"> angularjs文件1 </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">angularjs文件1</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 10</span> <span><i class="fa fa-clock-o"></i> 2020-09-24</span> </div> </div> </div> </li> <li class="sidebar-item"> <a href="/down/6218087.html" class="sidebar-link"> ng flow AngularJS </a> <div class="item-desc"> <div class="desc-content"> <p class="desc-text">APP应用,android,ios,windows多端支持图片浏览、照相、上传,</p> <div class="desc-meta"> <span><i class="fa fa-eye"></i> 17</span> <span><i class="fa fa-clock-o"></i> 2020-09-27</span> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <!-- 返回顶部按钮 --> <button id="backToTop" class="back-to-top" title="返回顶部"> <i class="fa fa-arrow-up"></i> </button> <footer class="site-footer"> <div class="container"> <div class="footer-content"> <div class="footer-left"> <script>document.write(new Date().getFullYear())</script> 卡了网 - Kaledl.Com </div> <div class="footer-right"> <div class="footer-links"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002006597"> <img src="/assets/img/gonganbeian.png"> 粤公网安备44190002006597号 </a> <a href="/sitemap.xml" target="_blank">网站地图</a> <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备16081799号</a> <a href="/page/banquanyumianzeshengming.html" target="_blank" id="mianze">版权与免责声明</a> <button id="banquan">版权投诉</a> </div> </div> </div> </div> </footer> </div> <script src="/static/js/require.min.js" data-main="/static/js/require-frontend.min.js?v=2.0.4.20"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3750a2043375524ccedd21eda5995292"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>