1. เริ่มต้น
Angular JS เป็นชุดของเฟรมเวิร์กเทมเพลตการเชื่อมโยงข้อมูลและส่วนประกอบ UI ที่หลากหลายที่ใช้ในการพัฒนาเว็บเพจ มันให้สถาปัตยกรรมของเว็บแอปพลิเคชันโดยไม่ต้องดำเนินการ DOM ด้วยตนเอง AngularJS มีขนาดเล็กมากเพียง 60K ที่เข้ากันได้กับเบราว์เซอร์กระแสหลักและทำงานได้ดีกับ jQuery
2. การทำความเข้าใจหลักการพื้นฐาน
①การแนะนำบางอย่างเกี่ยวกับ Angular
1. ความรู้พื้นฐาน
1. อึกทึกให้ขึ้น IE8
2. จุดหลักสี่จุดคือ MVC, modularity, ระบบการเรียนการสอนและการเชื่อมข้อมูลสองทาง
2. หลักการบางอย่าง
1. อย่านำคอนโทรลเลอร์กลับมาใช้ใหม่ โดยทั่วไปแล้วคอนโทรลเลอร์จะรับผิดชอบเฉพาะมุมมองเล็ก ๆ
2. อย่าใช้งาน DOM ในคอนโทรลเลอร์
3. อย่าจัดรูปแบบข้อมูลใน Controllerller, NG มีการควบคุมแบบฟอร์มที่ดี
4. อย่าทำการดำเนินการกรองข้อมูลในคอนโทรลเลอร์มีบริการตัวกรอง $
5. การพูดโดยทั่วไปคอนโทรลเลอร์จะไม่โทรหากันและการมีปฏิสัมพันธ์ระหว่างคอนโทรลเลอร์จะดำเนินการผ่านเหตุการณ์
6.Angular ใช้คำแนะนำเพื่อนำมุมมองกลับมาใช้ใหม่
7. $ SCOPE เป็นโครงสร้างต้นไม้ที่ขนานกับแท็ก DOM
8. วัตถุขอบเขตเด็ก $ จะสืบทอดคุณสมบัติและวิธีการในขอบเขตของผู้ปกครอง $
9. แต่ละแอปพลิเคชันเชิงมุมมีวัตถุ $ rootscope เพียงหนึ่งชิ้น (โดยทั่วไปอยู่ที่ NG-APP)
10. คุณสามารถใช้ Angular.Element ($ 0) .Scope () เพื่อแก้ไขข้อบกพร่อง
11. ใช้ ngroute สำหรับการกำหนดเส้นทางระหว่างมุมมอง
3. คำแนะนำในตัวเชิงมุมที่ใช้กันมากที่สุดและใช้งานได้จริงสำหรับหน้า HTML
①.ng-class (เหมาะสำหรับสถานการณ์ที่มีสไตล์บางอย่างเช่นไลค์และความสนใจจะเปลี่ยนไปเนื่องจากการดำเนินการบางอย่าง)
คำสั่ง NG-Class ใช้เพื่อผูกคลาส CSS หนึ่งคลาสขึ้นไปกับองค์ประกอบ HTML ค่าของคำสั่ง NG-Class สามารถเป็นสตริงวัตถุหรืออาร์เรย์
หากเป็นสตริงชื่อคลาสหลายคลาสจะถูกคั่นด้วยช่องว่าง
หากเป็นวัตถุคุณต้องใช้คู่คีย์-ค่าซึ่งเป็นค่าบูลีนและค่าคือชื่อคลาสที่คุณต้องการเพิ่ม คลาสจะถูกเพิ่มเฉพาะในกรณีที่คีย์เป็นจริง
หากเป็นอาร์เรย์ก็สามารถประกอบด้วยสตริงหรือการรวมกันของวัตถุและองค์ประกอบของอาร์เรย์อาจเป็นสตริงหรือวัตถุ
สองวิธีที่แนะนำในการใช้:
1. ในรูปแบบของสตริงรหัสมีดังนี้:
<i ng-class = "{true: 'ion-ose-heart', false: 'ion-ios-heart-outline'} [accountinfo.isfocus]" ng-click = 'wetherfocus ()'> </i>ซึ่งหมายความว่าแท็ก I มีไอคอนคลาสพื้นฐาน NG-Class ซึ่งผูกกับคลาสไดนามิก ค่าของคลาสนี้ถูกกำหนดโดยว่า accountInfo.isfocus เป็นจริงหรือเท็จ หากค่าของมันเป็นจริงแท็ก I จะเพิ่มคลาส ion-ios-heart หากค่าของมันเป็นเท็จแท็ก I จะเพิ่ม ion-ios-heartline-outline หากค่าของมันเป็นเท็จแท็ก I จะเพิ่ม ion-ios-heartline-outline
หมวดหมู่นี้ แท็ก I ยังผูกเหตุการณ์ NG-click นอกเหนือจากการจัดการตรรกะที่สอดคล้องกันแล้วค่าของ accountinfo.isfocus ยังถูกกำหนด ด้วยวิธีนี้เมื่อการดำเนินการคลิกเกิดขึ้นคลาสที่สอดคล้องกันของแท็ก I จะมีการเปลี่ยนแปลงตามธรรมชาติและจากนั้นรูปแบบที่แตกต่างจะปรากฏขึ้น
2. รูปแบบของคีย์-ค่ารหัสมีดังนี้:
<i ng-class = "{'ion-ios-heart': isios, 'ion-android-heart': isandroid}"> </i>เห็นได้ชัดว่าจากรหัสเราจะเห็นว่าความหมายนี้คือเมื่อ ISIOS เป็นจริงคลาส ION-IOS-Heart จะถูกนำมาใช้และเมื่อค่า ISANDROID เป็นจริงคลาส ION-Android-Heart จะถูกนำมาใช้
②.ng-show และ ng-hide (เหมาะสำหรับเมื่อแสดงเนื้อหาสองรายการที่แตกต่างกันสำหรับสถานการณ์ที่แตกต่างกัน)
คำสั่ง NG-Show แสดงองค์ประกอบ HTML ที่ระบุเมื่อนิพจน์เป็นจริงมิฉะนั้นซ่อนองค์ประกอบ HTML ที่ระบุไว้
คำสั่ง NG-hide ซ่อนองค์ประกอบ HTML ที่ระบุเมื่อนิพจน์เป็นจริงมิฉะนั้นองค์ประกอบ HTML ที่ระบุจะปรากฏขึ้น
ฮ่าฮ่าดูเหมือนพี่ชายที่ไม่เข้ากันกับน้ำและไฟ - - -
ตัวอย่างมีดังนี้:
<div> <span ng-click = "togglemenu ()"> </span> </div> <div> <ul ng-show = "menustate"> ... </ul> <div ng-hide = "menustate"> ...
ตั้งค่าตัวแปรบูลีน menustate (ในการพัฒนาจริงคุณสามารถใช้นิพจน์สมการไตรภาค ฯลฯ ) เมื่อเป็นจริงเนื้อหาของ NG-show จะปรากฏขึ้นและเนื้อหาของ NG-hide จะถูกซ่อนไว้ มิฉะนั้นสิ่งที่ตรงกันข้ามก็เป็นจริง - -
③.ng-switch (เหมาะสำหรับการแสดงเนื้อหาที่แตกต่างกันในหลาย ๆ สถานการณ์)
คำสั่ง NG-switch จะแสดงหรือซ่อนส่วนที่สอดคล้องกันตามนิพจน์
องค์ประกอบเด็กที่เกี่ยวข้องใช้ NG-switch-when when directive หากเลือกการจับคู่ให้เลือกจอแสดงผลและอีกรายการหนึ่งจะถูกลบออก
โดยการตั้งค่าตัวเลือกเริ่มต้นโดยใช้คำสั่ง NG-switch-default ตัวเลือกเริ่มต้นจะปรากฏขึ้นหากไม่มีการจับคู่
ตัวอย่าง:
<div ng-switch = "EssayType"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ...
④.ng-model (ฉันจะพูดคุยเกี่ยวกับหลุมเล็ก ๆ ที่มีมนต์ขลังของ NG-Model เป็นหลัก)
NG-Model Directive ผูกองค์ประกอบ HTML แบบฟอร์มลงในตัวแปรขอบเขต
หากไม่มีตัวแปรในขอบเขตมันจะถูกสร้างขึ้น NG-model มักใช้ใน <put>, <elect>, <Textarea> และองค์ประกอบอื่น ๆ
รหัสต่อไปนี้:
<div> <textarea name = "my-massage-detail" ng-model = "content" placeholder = "โปรดป้อนข้อความ"> </textarea> <ang-click = "submentmes ()"> ส่ง </a> <br> </div>
ตามคำนิยามการพูดในทางทฤษฎีเมื่อเราส่งมันก็โอเคที่จะได้รับค่าโดยตรงของโมเดล NG ที่กำหนดไว้ในหน้าในคอนโทรลเลอร์โดยตรง แต่ในความเป็นจริงนี่เป็นไปไม่ได้ การทดสอบส่วนบุคคลพบว่าเอาต์พุตที่ไม่ได้กำหนดเป็นเอาต์พุตและหากค่าเริ่มต้นของโมเดล NG ถูกกำหนดในคอนโทรลเลอร์ค่าเริ่มต้นจะได้รับแทนค่าล่าสุดหลังจากเปลี่ยน
ฉันค้นหาข้อมูลบางอย่างซึ่งหมายถึงมัน เชิงมุม จำกัด คำจำกัดความบางอย่างของเรา เราสามารถใช้วัตถุที่ไม่ได้ใช้งานเพื่อผ่านพารามิเตอร์เท่านั้น
หมายความว่าอย่างไร? การเปลี่ยนแปลงเล็กน้อยเป็นตัวอย่างด้านบนดังนี้:
รหัส HTML:
<div> <textarea name = "my-massage-detail" ng-model = "model.content" placeholder = "โปรดป้อนข้อความ"> </textarea> <ang-click = "submentmes ()"> ส่ง </a> </div>
รหัสคอนโทรลเลอร์:
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function () {console.log ($ scope.model.content);}นั่นคือเรากำหนดวัตถุแล้วกำหนด NG-model เป็นคุณสมบัติในวัตถุนี้เพื่อจัดการกับมัน ด้วยวิธีนี้เราได้รับค่าล่าสุดของ NG-Model
อีกวิธีที่ง่ายคือการผ่าน NG-Model เป็นพารามิเตอร์ในนั้น
ตัวอย่างมีดังนี้:
// html code <input type = "text" ng-model = "code"> <button ng-click = "setCode (รหัส)"> เข้าสู่ระบบ </ปุ่ม> <br> // รหัสคอนโทรลเลอร์ $ spope.setCode = function (รหัส) {แจ้งเตือน (รหัส);};};4. ทักษะการปฏิบัติสำหรับการโต้ตอบข้อมูล
①ใช้คำสัญญา
ES6 กำหนดวัตถุสัญญา วัตถุนี้มีประโยชน์มากโดยเฉพาะอย่างยิ่งเมื่อมีปฏิสัมพันธ์กับพื้นหลัง ไม่เพียง แต่ป้องกันการเรียกกลับจากที่ลึกเกินไป แต่ยังสามารถจัดการได้อย่างสม่ำเสมอสำหรับบางสถานการณ์และยังช่วยปรับปรุงความสามารถในการอ่านของรหัส บริการดังกล่าวยังถูกห่อหุ้มใน AngularJs ซึ่งคือ $ q
$ q มีอยู่ในฐานะบริการของ AngularJs และเป็นเพียงการใช้งานที่ง่ายขึ้นของโหมดการเขียนโปรแกรมแบบอะซิงโครนัสสัญญา วัตถุที่เลื่อนออกไป (วัตถุล่าช้า) สามารถรับได้ผ่าน $ q.defer () วัตถุนี้มีสามวิธี:
แก้ไข (ค่า): ส่งข้อความไปยังร่างการดำเนินการแบบอะซิงโครนัสของวัตถุสัญญาและบอกเขาว่าฉันทำภารกิจให้สำเร็จและค่าคือข้อความที่ส่ง
ปฏิเสธ (ค่า): ส่งข้อความไปยังวัตถุดำเนินการแบบอะซิงโครนัสของวัตถุสัญญาและบอกเขาว่ามันเป็นไปไม่ได้ที่ฉันจะทำภารกิจนี้ให้เสร็จ ค่าคือข้อความที่ส่ง
แจ้ง (ค่า): ส่งข้อความไปยังร่างการดำเนินการแบบอะซิงโครนัสของวัตถุสัญญาเพื่อบอกเขาว่างานปัจจุบันเสร็จสมบูรณ์ ค่าคือข้อความที่ส่ง
หลังจากส่งข้อความเหล่านี้ฟังก์ชั่นการโทรกลับที่มีอยู่จะถูกเรียก
สัญญาคือวัตถุสัญญากับวัตถุที่เลื่อนออกไปนี้ วัตถุสัญญาสามารถรับได้ผ่านการเลื่อนเวลาออกไป, วิธีการบางอย่างของวัตถุสัญญา:
จากนั้น (SuccessCallback, ErrorCallback, NotifyCallback): พารามิเตอร์เป็นฟังก์ชั่นการโทรกลับที่แตกต่างกันภายใต้ข้อความที่แตกต่างกัน เลื่อนเวลาส่งข้อความที่แตกต่างกันเพื่อเรียกใช้ฟังก์ชันการโทรกลับที่แตกต่างกัน ข้อความจะถูกส่งผ่านเป็นพารามิเตอร์ของฟังก์ชั่นการโทรกลับเหล่านี้ ค่าส่งคืนกลับไปที่วัตถุสัญญาที่มีอยู่ในการสนับสนุนการโทรในห่วงโซ่ เมื่อวัตถุที่เลื่อนออกครั้งแรกส่งข้อความวัตถุเลื่อนเวลาที่สอดคล้องกันของสัญญาที่ตามมาจะส่งข้อความ แต่ข้อความที่ส่งแตกต่างกัน ไม่ว่าวัตถุที่เลื่อนออกไปแรกจะส่งการปฏิเสธหรือแก้ไขหรือไม่ที่สองและใหม่จะได้รับการแก้ไขและข้อความนั้นสามารถผ่านได้
catch (errorcallback): จากนั้น (NULL, ERRORCALLBACK)
ในที่สุด (การโทรกลับ): เทียบเท่ากับตัวย่อของตอนนั้น (โทรกลับการโทรกลับ) วิธีการในที่สุดไม่ยอมรับพารามิเตอร์ แต่สามารถส่งข้อความและประเภทข้อความที่ส่งโดยเลื่อนไปยังอีกแล้ว
Defer (): ใช้เพื่อสร้างวัตถุล่าช้า var defer = $ q.defer ();
ปฏิเสธ (): พารามิเตอร์ได้รับข้อความแสดงข้อผิดพลาดซึ่งเทียบเท่ากับการโยนข้อยกเว้นในฟังก์ชันการเรียกกลับแล้วเรียกใช้ฟังก์ชันการโทรกลับผิดในถัดไป
ทั้งหมด (): พารามิเตอร์ได้รับเป็นอาร์เรย์สัญญาและวัตถุสัญญาเดียวจะถูกส่งคืน เมื่อวัตถุที่เลื่อนออกไปทั้งหมดของวัตถุสัญญาเหล่านี้ได้รับการแก้ไขวัตถุสัญญาเดียวนี้จะได้รับการแก้ไข เมื่อหนึ่งในวัตถุสัญญาเหล่านี้ถูกปฏิเสธสัญญาเดียวนี้จะถูกปฏิเสธเช่นกัน
เมื่อ (): ได้รับพารามิเตอร์แรกเป็นค่าโดยพลการหรือวัตถุสัญญาและอีก 3 วิธีจากนั้นวิธีการของสัญญาเดียวกันและค่าส่งคืนเป็นวัตถุสัญญา หากพารามิเตอร์แรกไม่ใช่วัตถุสัญญาการโทรกลับที่ประสบความสำเร็จจะถูกเรียกใช้โดยตรงและข้อความคือวัตถุนี้ หากเป็นสัญญาสัญญาที่ส่งคืนนั้นเป็นสิ่งที่ห่อหุ้มสำหรับการโต้แย้งของประเภทสัญญานี้ ข้อความที่ส่งโดยการเลื่อนเวลาที่สอดคล้องกับสัญญาที่เข้ามาจะได้รับจากวัตถุสัญญาที่ส่งคืนโดยเราเมื่อฟังก์ชั่น
การใช้งานเฉพาะมีดังนี้:
ในเชิงมุมกำหนดบริการโดยเฉพาะสำหรับการโต้ตอบ
รับ: ฟังก์ชั่น (url, ตัวเลือก) {<br> var deferred = $ q.defer (); <br> showtip (); $ http.get (url, ตัวเลือก) .success (ฟังก์ชั่น (ข้อมูล) {hidetip (); ถ้า (data.success) {deferred.resolve (data);} else {deferred.reject (data.message);}}) {hidetip (); deferred.reject (data);}); return deverred.promise;} // การโทรในคอนโทรลเลอร์รับ ('url', params). จากนั้น (data) {// นี่คือความสำเร็จด้วยวิธีนี้เราสามารถกำหนดพรอมต์บางอย่างได้อย่างสม่ำเสมอเมื่อมีการออกคำขอแต่ละครั้งแล้วซ่อนการแจ้งเตือนเหล่านี้หลังจากคำขอเสร็จสิ้น ในรหัสนี้ความหมายทั่วไปคือเมื่อคำขอประสบความสำเร็จรอการตัดบัญชีการแก้ไข (ข้อมูล) จะถูกเรียกให้ตั้งค่าสถานะให้ประสบความสำเร็จเพื่อให้ฟังก์ชั่นแรกในนั้นจะถูกดำเนินการโดยอัตโนมัติ
ข้างต้นเป็นทักษะการพัฒนาเชิงปฏิบัติของ AngularJs ที่บรรณาธิการแนะนำให้คุณรู้จัก หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!