Pro AngularJS

Gao_xiansheng 23 0 PDF 2019-09-23 19:09:50

深入介绍如何使用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 </p> </div> <div class="clearfix border-top border-light pt-2" id="download"> <div class="float-start d-inline-block"> <button type="button" class="btn btn-dark rounded-pill btn-sm mt-1" id="btn-download" data-id="4195691"><i class="mdi mdi-arrow-collapse-down text-white"></i> 立即下载 </button> </div> <div class="float-end" id="tooltip-container"> <!-- S 分享 --> <div class="social-list list-inline mb-0"> <div class="list-inline-item"> <a rel="nofollow" target="_blank" href="//connect.qq.com/widget/shareqq/index.html?url=https://kaledl.com/down/4195691.html&title=Pro AngularJS&source=https://kaledl.com&desc=Pro AngularJS&pics=https://dcdnimg.kaledl.com/assets/addons/cms/img/noimage.jpg&summary=Pro AngularJS" class="text-nowrap ms-2 d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" title="分享到QQ"> <i class="iconfont icon-qq text-primary fs-2"></i> </a> </div> <div class="list-inline-item"> <a rel="nofollow" class="text-nowrap ms-2 d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" title="分享到微信"> <i class="iconfont icon-weixin text-success fs-2" data-bs-toggle="modal" data-bs-target="#standard-modal"></i> </a> </div> <div id="standard-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="standard-modalLabel">微信扫一扫:分享</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button> </div> <div class="modal-body text-center"> <div id="weixinqrcode" data-url="https://kaledl.com/down/4195691.html"></div> <p>微信里点“发现”,扫一下</p> <p>二维码便可将本文分享至朋友圈。</p> </div> </div> </div> </div> <div class="list-inline-item"> <a rel="nofollow" target="_blank" href="//service.weibo.com/share/share.php?url=https://kaledl.com/down/4195691.html&title=Pro AngularJS&pic=https://dcdnimg.kaledl.com/assets/addons/cms/img/noimage.jpg&appkey=" class="text-nowrap ms-2 d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" title="分享到微博"> <i class="iconfont icon-weibo-copy text-danger fs-2"></i> </a> </div> <div class="list-inline-item"> <a rel="nofollow" target="_blank" href="//sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://kaledl.com/down/4195691.html&title=Pro AngularJS&desc=Pro AngularJS&summary=Pro AngularJS&site=qzone&pics=https://dcdnimg.kaledl.com/assets/addons/cms/img/noimage.jpg" class="text-nowrap ms-2 d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" title="分享到QQ空间"> <i class="iconfont icon-kongjian text-warning fs-2"></i> </a> </div> </div> <!-- E 分享 --> </div> </div> </article> </div> <aside class="card" id="asidelist"> <div class="card-header"> <span class="fs-5 fw-bold m-0">推荐下载</span> </div> <div class="card-body pt-2 pb-2"> <h4 class="mt-0 title text-truncate"> <a href="/down/6196073.html" title="AngularJs1.3.10" class="font-16"><em class='text-danger fst-normal'>AngularJs</em>1.3.10</a> </h4> <p class="text-muted"> AngularJs-1.3.10 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/6197076.html" title="angularjs1.5.7" class="font-16"><em class='text-danger fst-normal'>angularjs</em>1.5.7</a> </h4> <p class="text-muted"> angularjs@1.5.7 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/6162117.html" title="AngularJs API教程" class="font-16"><em class='text-danger fst-normal'>AngularJs</em> API教程</a> </h4> <p class="text-muted"> AngularJs API & 教程 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/6273876.html" title="requirejs整合angularjs" class="font-16">requirejs整合<em class='text-danger fst-normal'>angularjs</em></a> </h4> <p class="text-muted"> reuqirejs整合angularjs实现的一个用户管理的小demo,使用了springmvc + shiro + angularjs实现基本功能,requirejs负责异步加载 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/6206432.html" title="angularjs文件1" class="font-16"><em class='text-danger fst-normal'>angularjs</em>文件1</a> </h4> <p class="text-muted"> angularjs文件1 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/6218087.html" title="ng flow AngularJS" class="font-16">ng flow <em class='text-danger fst-normal'>AngularJS</em></a> </h4> <p class="text-muted"> APP应用,android,ios,windows多端支持图片浏览、照相、上传, </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/5749688.html" title="AngularJS级联操作" class="font-16"><em class='text-danger fst-normal'>AngularJS</em>级联操作</a> </h4> <p class="text-muted"> AngularJS的级联操作,两级 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/4388826.html" title="angularjs1.6.4" class="font-16"><em class='text-danger fst-normal'>angularjs</em>1.6.4</a> </h4> <p class="text-muted"> angularjs框架,常用的1.6.4版本 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/4924321.html" title="angularjs库文件" class="font-16"><em class='text-danger fst-normal'>angularjs</em>库文件</a> </h4> <p class="text-muted"> angularJS的库文件,包括压缩文件及基本样式 </p> <div class="border-bottom border-light mb-2"></div> <h4 class="mt-0 title text-truncate"> <a href="/down/4949311.html" title="AngularJS封装jQueryFileUpload" class="font-16"><em class='text-danger fst-normal'>AngularJS</em>封装jQueryFileUpload</a> </h4> <p class="text-muted"> NULL博文链接:https://bijian1013.iteye.com/blog/2111087 </p> </div> </aside> <div class="card" id="comments"> <div class="card-header"> <span class="fs-5 fw-bold m-0">用户评论</span> </div> <form class="card-body pt-2 pb-2 needs-validation" id="CommentForm" novalidate> <input name="aid" class="form-control" value="4195691" type = "hidden"> <textarea class="form-control form-control-light mb-2 " name="content" placeholder="说说您下载后对此资源的评价" id="Comment-textarea" rows="3" required></textarea> <div class="invalid-feedback"> 请输入评论内容 </div> <div class="text-end"> <div class="btn-group mb-2"> <span>评分:</span> <select name="rate" id="backing3b" class="invisible"> <option value="0">无用</option> <option value="1">无用</option> <option value="2">不行</option> <option value="3">过得去</option> <option value="4">还可以</option> <option value="5">推荐好下载</option> </select> <div class="rateit" data-rateit-mode="font" data-rateit-backingfld="#backing3b" data-rateit-resetable="false"></div> </div> <div class="btn-group mb-2 ms-2"> <button class="btn btn-primary btn-sm" type="submit" id="btn-comments"> <span id="commentloading" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" style="display:none;"></span> 提交评论 </button> </div> </div> <div class="mt-3"> <div class="d-flex justify-content-between align-items-center mb-2"> <div> <img class="me-2 rounded rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTcsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPks8L3RleHQ+PC9zdmc+" alt="Generic placeholder image" height="16"> <span class="m-0 h6">卡了网匿名网友 <small class="text-muted fw-normal"> 2019-09-23 19:09:50 </small></span> <p class="my-2 ms-4">深入介绍如何使用AngularJS开发前端应用,并和BootStrap同时使用,在开 </p> </div> <div class="dropdown"> </div> </div> </div> <div class="border-bottom border-light mb-2 mt-2"></div> <div class="mt-3"> <div class="d-flex justify-content-between align-items-center mb-2"> <div> <img class="me-2 rounded rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTcsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPks8L3RleHQ+PC9zdmc+" alt="Generic placeholder image" height="16"> <span class="m-0 h6">卡了网匿名网友 <small class="text-muted fw-normal"> 2019-09-23 19:09:50 </small></span> <p class="my-2 ms-4">非常好,很有帮助的! </p> </div> <div class="dropdown"> </div> </div> </div> <div class="border-bottom border-light mb-2 mt-2"></div> <div class="mt-3"> <div class="d-flex justify-content-between align-items-center mb-2"> <div> <img class="me-2 rounded rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxOTcsMTYwLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPks8L3RleHQ+PC9zdmc+" alt="Generic placeholder image" height="16"> <span class="m-0 h6">卡了网匿名网友 <small class="text-muted fw-normal"> 2019-09-23 19:09:50 </small></span> <p class="my-2 ms-4">正在学习 此东西 感谢分享 书本 </p> </div> <div class="dropdown"> </div> </div> </div> <div class="border-bottom border-light mb-2 mt-2"></div> </form> </div> </div> </div> </div> <div id="Comment-Payid-Modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header border-bottom border-light m-0 pt-2 pb-2"> <strong class="font-14">请填写您下载此资源的订单号</strong> </div> <div class="modal-body"> <form id="CommentPayidForm" action="#" class="ps-3 pe-3 needs-validation" novalidate> <div class="mb-3"> <label for="CommentPayid" class="form-label">订单号:</label> <input name="payid" class="form-control" type="text" id="CommentPayid" required placeholder="填写订单号"> </div> <div class="mb-3 text-center"> <div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show" id="commentpayidalert" role="alert" style="display:none;"></div> <button class="btn btn-primary" id="btn-comments1" type="submit"> <span id="commentPayidloading" class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" style="display:none;"></span> 提交评论 </button> </div> </form> </div> </div> </div> </div> </div> </div> <footer class="footer bg-white"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <script>document.write(new Date().getFullYear())</script> 卡了网 - Kaledl.Com </div> <div class="col-md-6"> <div class="text-md-end footer-links d-none d-md-block"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002006597" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="/assets/img/gonganbeian.png" style="float:left;"> 粤公网安备44190002006597号 </a> <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备16081799号</a> <a href="javascript: void(0);" id="mianze">免责声明</a> <a href="javascript: void(0);" id="banquan">版权投诉</a> </div> </div> </div> </div> </footer> </div> <script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> <script src="https://dcdnimg.kaledl.com/assets/js/app.min.js"></script> <script src="https://dcdnimg.kaledl.com/assets/js/jquery.rateit.min.js"></script><script src="https://dcdnimg.kaledl.com/assets/js/jquery.fancybox.min.js"></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> <script>window.onload = function() {$.ajax({type:"GET", url:"/api/Frontend/navu", datatype: "html", success:function(data){document.getElementById("navu").innerHTML= data}, error: function(ret){}})};</script> </body> </html>