สรุปทักษะการใช้เชิงมุม

แนวคิดหลักของ Angular คือการขับเคลื่อนทุกอย่างผ่านข้อมูลและทุกอย่างอื่นเป็นส่วนขยายของข้อมูล

ในการใช้ความคิดที่ว่าทุกอย่างเป็นวัตถุสามารถพูดได้ในเชิงมุมว่าทุกอย่างเป็นข้อมูล

เกี่ยวกับการก่อสร้างโครงการ

(1) ต้องการ Js และ Yeoman

เมื่อคุณเข้าหรือใช้ Angular เป็นครั้งแรกคุณจะงงกับคำถามที่คล้ายกันเสมอ คำตอบที่เป็นประโยชน์ของฉันคือคุณไม่จำเป็นต้องใช้ Js หรือ Yeoman อดีตไม่ได้ใช้เพราะ Angular เองมีการใช้งานโมดูล หลังเป็นเพราะโครงสร้างองค์กรเชิงมุมและการก่อสร้างโครงการไม่จำเป็นอย่างสมบูรณ์ที่จะซับซ้อน เพียงแค่เขียนหรือดึงโครงการเมล็ดพันธุ์บน GitHub

(2) วิธีการจัดระเบียบโครงสร้างโครงการ

ปัญหานี้ค่อนข้างไร้ประโยชน์เพราะมันแตกต่างกันอย่างสมบูรณ์จากบุคคลหนึ่งไปอีกบุคคลหนึ่งไปสู่โครงการ โดยส่วนตัวแล้วฉันขอแนะนำโครงสร้างองค์กรสองตัวตามฟังก์ชันรหัสนั่นคือคอนโทรลเลอร์จะถูกวางไว้ในโฟลเดอร์เดียวและบริการจะถูกวางไว้ในโฟลเดอร์เดียว อื่น ๆ ติดตามฟังก์ชั่นที่ใช้งาน ตัวอย่างเช่นผู้ใช้วางเทมเพลตบริการและตัวควบคุมที่สอดคล้องกันในโฟลเดอร์ผู้ใช้

ทั้งคู่ก็โอเคและจากมุมมองการบำรุงรักษาอันที่สองจะดีกว่า

(3) แผนกคอนโทรลเลอร์และบริการ

ที่นี่คอนโทรลเลอร์มักจะเป็นตัวควบคุมหนึ่งตัวในหน้าหนึ่ง หากหน้ามีส่วนร่วมกันส่วนสาธารณะจะใช้คอนโทรลเลอร์เสมอ บริการควรแบ่งออกเป็นสองส่วนหนึ่งคือบริการที่โต้ตอบกับข้อมูลเซิร์ฟเวอร์และอีกส่วนหนึ่งเป็นเนื้อหาทั่วไปที่ใช้งานได้

สำหรับบริการควรแบ่งเพิ่มเติมตามฟังก์ชั่นและโมดูลนั้นขึ้นอยู่กับโครงการหรือไม่

(4) การใช้ปลั๊กอินเชิงมุมและไลบรารี

แน่นอนว่ามันไม่เป็นจริงสำหรับโครงการที่จะได้รับสิ่งต่าง ๆ ออนไลน์ แต่มันก็ไม่สมจริงยิ่งขึ้นที่จะเขียนทุกอย่างด้วยตัวเอง ปลั๊กอินจำนวนมากในเชิงมุมได้รับการพัฒนาโดยทีมเชิงมุมหรือบางคนห่อหุ้มด้วยปลั๊กอิน jQuery มุมมองของฉันบนปลั๊กอินนั้นง่ายมาก หากคุณใช้พวกเขาคุณสามารถใช้งานได้โดยเร็วที่สุด หากคุณไม่สามารถตอบสนองความต้องการได้คุณสามารถเขียนด้วยตัวเองหรือปรับปรุงพวกเขาในปลั๊กอินที่มีอยู่

สำหรับปลั๊กอินที่คุณไม่สามารถจัดการได้สองสามชั่วโมงของการดีบักโปรดฟังคำแนะนำของฉันและยอมแพ้ ปลั๊กอินส่วนใหญ่เป็นปลั๊กอิน UI ดังนั้นคุณไม่จำเป็นต้องมีความซับซ้อน บางครั้งการควบคุม HTML ที่เรียบง่ายก็มีความงามที่เรียบง่ายของตัวเอง

หากคุณพบกับความขัดแย้งของปลั๊กอินเชิงมุมโดยเฉพาะปลั๊กอิน UI คุณควรยอมแพ้อย่างใดอย่างหนึ่งในกรณีส่วนใหญ่เช่น Angular-UI และ angular-strap

เคล็ดลับการใช้งาน

การป้อนข้อความหลักด้านล่างฉันจะแสดงรายการเทคนิคบางอย่างที่ฉันใช้ในกระบวนการใช้ Angular และจะแสดงรายการทีละรายการในรูปแบบของฉาก ฉันจะไม่อธิบายแนวคิดพื้นฐานของ Angular ที่นี่ บทความนี้เป็นสิ่งที่มีทักษะไม่ใช่การสอนพื้นฐาน

(1) ความขัดแย้งของขวดระหว่าง "{{}}" ใน Angular และ Python

ในเทมเพลตที่ใช้โดยขวดของ Python การเชื่อมข้อมูลจะผ่านการจัดฟัน "{" สองตัวซึ่งขัดแย้งกับการเชื่อมโยงข้อมูลของ Angular มีสองวิธีแก้ไขปัญหานี้ หนึ่งคือการปรับเปลี่ยนเครื่องหมายที่มีผลผูกพันของ Angular และอีกอันคือการปรับเปลี่ยนเครื่องหมายที่มีผลผูกพันของขวด โซลูชั่นทั้งสองได้รับที่นี่

ปรับเปลี่ยนเชิงมุม:

$ InterpolateProvider.startsymbol ('{[{') endsymbol ('}]}');

// เพียงเพิ่มประโยคนี้เพื่อกำหนดค่าและใส่ไว้ในโมดูลเส้นทาง ที่นี่คุณเปลี่ยน Angular ดั้งเดิม {{}} การเชื่อมโยงเป็น {[{}]} การเชื่อมโยงกับ {[{}]} การเชื่อมโยง

แก้ไขขวด:

 คลาส customflask (Flask): jinja_options = flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', block_end_string = '%}', variable_start_string = '{#' comment_end_string = '#>',)) แอป = customflask (__ name__, instance_path = '/web')

ที่นี่ฉันขอแนะนำการปรับเปลี่ยนขวดเพราะหลังจากใช้ Angular ด้านหน้าและด้านหลังจะถูกแยกออกจากกัน ไม่จำเป็นต้องใช้เทมเพลต Jinjia ของ Flask อีกต่อไป ในเวลาเดียวกันหากคุณปรับเปลี่ยนแท็กการผูกเชิงมุมการควบคุมและไลบรารีอื่น ๆ จะมีปัญหา

(2) ลบ URL ค่าเริ่มต้นเป็น "#" เสมอ

เมื่อตั้งค่าเส้นทางเปิดใช้งานโหมด HTML5

 Angular.module ('เราเตอร์', ['ngroute']) config (['$ routeProvider', '$ locationProvider', ฟังก์ชั่น ($ routeProvider, $ locationProvider) {$ locationProvider.html5mode (จริง); // ตั้งค่าประโยคนี้}]);

(3) ng-click = "นิพจน์" และคำแนะนำที่คล้ายกันวิธีการเขียนหลายนิพจน์ในนิพจน์?

ตัวอย่างเช่นหากฉันต้องการกำหนดค่าให้กับตัวแปร 2 ตัวในการคลิก NG ฉันสามารถแยกผ่าน ";" อัฒภาค:

<a ng-click = "obja = 1; objb = 2"> </a>

(4) $ นาฬิกาไม่มีผลหรือมีผลเพียงครั้งเดียว

โดยทั่วไปแล้วสถานการณ์นี้จะปรากฏขึ้นเมื่อฟังสตริงหรือหมายเลข, $ scope. $ watch ("ชื่อ", function () {}) มันไม่มีผลหรือมีผลเพียงครั้งเดียว วิธีแก้ปัญหาคือ $ watch ฟังวัตถุให้มากที่สุดและแนบค่าที่คุณต้องการฟังในวัตถุ

เมื่อคุณใช้ Modal ใน Angular-Ui สิ่งนี้จะชัดเจนยิ่งขึ้น เหตุผลที่เฉพาะเจาะจงเป็นเพราะมรดกของ $ ขอบเขต เนื่องจาก Modal เทียบเท่ากับการสร้างขอบเขตอื่นในคอนโทรลเลอร์ของหน้าปัจจุบันจึงเป็นไปไม่ได้ที่จะดึงและติดตามห่วงโซ่ต้นแบบสำหรับตัวอักษร หากคุณต้องการแก้ปัญหาคุณต้องมีวัตถุเพื่อให้ได้การรีเฟรชข้อมูลที่มีผลผูกพันในขอบเขตของลูกแม่-ลูกผ่านห่วงโซ่ต้นแบบ

(5) ฉันหวังว่าเนื้อหาของ NG-view จะปรากฏขึ้นทั้งหน้า

โดยปกติแล้วหน้าอาจมีการแก้ไขเมนูหรือแถบด้านข้างชิ้นส่วนที่คงที่ดังกล่าวจากนั้นแต่ละเส้นทางจะเปลี่ยนเทมเพลตของ NG-View หากหน้าต้องการให้ทั้งหน้าแสดงตัวเองอย่างสมบูรณ์จะไม่รวมชิ้นส่วนที่คงที่เช่นเมนูด้านบน

ที่นี่มักจะเป็น template.html ที่แสดงโดย index.html และ ng-view เมนูและแถบด้านข้างตั้งอยู่ใน index.html จอแสดงผลของพวกเขาถูกซ่อนไว้โดยการผูกตัวแปรกับ ng-if

หากต้องแสดงหน้าเว็บด้วยตัวเองอย่างเต็มที่และไม่แสดงแถบด้านข้างข้อความจะถูกส่งขึ้นในคอนโทรลเลอร์ผ่าน $ SCOPE. $ emit และคอนโทรลเลอร์ของหน้าดัชนีจะฟังข้อความผ่าน $ SCOPE $ ON เมื่อได้ยินข้อความตัวแปรที่ควบคุมแถบด้านข้างที่มองเห็นและซ่อนอยู่จะเปลี่ยนไป

นอกจากนี้คุณยังสามารถใช้บริการเพื่อควบคุมตัวแปรทั่วโลกและคำแนะนำส่วนบุคคลยังคงผ่านการออกอากาศข้อความ

(6) อย่าลืมใช้ ng-if แทน ng-show

นี่เป็นหลุมเล็ก ๆ ของเชิงมุมหรืออาจกล่าวได้ว่าเป็นหลุมที่ไม่ใหญ่หรือเล็ก ข้อมูลรายการยาวบางรายการอาจปรากฏขึ้นโดยค่าเริ่มต้นที่ซ่อนอยู่และคลิกเพื่อแสดง ส่วนหนึ่งของเนื้อหาที่สามารถควบคุมการมองเห็นและซ่อนเร้นจะมาพร้อมกับการเชื่อมโยงข้อมูลจำนวนมาก สิ่งนี้ส่งผลกระทบอย่างมากต่อประสิทธิภาพเมื่อแสดงหน้า

รับรายการ ตัวอย่างเช่น Angular มักจะแนะนำว่าหน้ามีการเชื่อมข้อมูลไม่เกิน 2,000 หากมีหน้าเว็บที่ผูกกับรุ่น 2,000 โดยตรงจากนั้นคุณจะโหลดคุณจะพบว่ามันติดอยู่มาก หากคุณตั้งค่าทุกรุ่นให้เป็น NG-Show มันจะไม่แสดงตามค่าเริ่มต้นคุณจะพบว่ามันยังคงติดอยู่มาก

จากนั้นคุณแทนที่ NG-show ทั้งหมดด้วย NG-IF และคุณจะพบว่าประสิทธิภาพนั้นเร็วเหมือนแอปพลิเคชันสองแอปพลิเคชันทันที เหตุผลก็คือ NG-show จะยังคงดำเนินการการผูกทั้งหมดและ NG-if จะดำเนินการการผูกเมื่อมันเท่ากับจริงนั่นคือมันจะดำเนินการการผูกเมื่อมีการแสดง สิ่งนี้จะปรับปรุงประสิทธิภาพอย่างมาก ฉันใช้การดัดแปลงอย่างง่ายนี้มาก่อนและหน้าโหลดเร็วขึ้นประมาณ 10 เท่า

ดังนั้นเมื่อคุณสามารถใช้ NG-IF ให้ใช้แทน NG-Show และ NG ทั้งหมด

(7) เกี่ยวกับ ng-bind-html

โดยปกติแล้วข้อมูลจะถูกผูกไว้กับองค์ประกอบ HTML และ NG-bind ก็เพียงพอแล้ว แต่ในบางสถานการณ์สิ่งที่จำเป็นต้องถูกผูกไว้ไม่ใช่ข้อมูลธรรมดา แต่ HTML จากนั้น NG-bind ก็ไม่เพียงพอ คุณต้องใช้ NG-BIND-HTML ซึ่งจะส่งออกเนื้อหาเป็นรูปแบบ HTML ตัวอย่างเช่นหากคุณต้องการส่งออก HTML ด้วยคลาสให้ใช้ NG-BIND-HTML และจำเป็นต้องมีความร่วมมือของ NGSANITIZE และต้องมีการแนะนำไฟล์ที่เกี่ยวข้อง

(8) รับผลลัพธ์หลังจากตัวกรองข้อมูล NG-repeat

โดยทั่วไปจะใช้เมื่อค้นหาเช่นข้อมูล NG-repeat หลายรายการที่สร้างรายการ จากนั้นกรองฟิลด์และตอนนี้คุณต้องได้รับผลลัพธ์หลังจากตัวกรองมี 2 วิธี

หนึ่งเขียนใน html ng-repeat เช่นนี้:

ng-repeat = "อาหารใน FoodCategory._displayfoods = (FoodCategory.Foods | Filter: {'Name': Searchobj.foodfilter} | orderby: food.sort_order)"

ด้วยวิธีนี้ _displayfoods เป็นผลการแสดงผลสุดท้ายหลังจากตัวกรอง อีกวิธีหนึ่งคือการใช้ข้อมูลสองชุดชุดหนึ่งถูกเขียนในคอนโทรลเลอร์จากนั้นกรองและสั่งซื้อ BY จะทำงานในคอนโทรลเลอร์ ผลลัพธ์สุดท้ายใช้ในการทำซ้ำ NG

วิธีแรกนั้นสะดวกกว่าในขณะที่วิธีที่สองดีกว่าและประสิทธิภาพก็ดี

(9) NG-Class และ NG-style กำหนดค่าโดยการตัดสิน

ตรวจสอบว่าจะใช้คลาสที่แน่นอนและสไตล์ที่แตกต่างกันตามค่าของตัวแปรหรือไม่

ng-class = "{'state-error':! foodform.foodstock. $ ust}"

ng-style = "{color: i.color == '' || i.name == 'live'? 'default': '#ffff'}"

(10) การตรวจสอบแบบฟอร์มใช้อินพุตเป็นตัวอย่าง

สามารถตรวจสอบรูปแบบเชิงมุมผ่านแอตทริบิวต์ HTML5 ของอินพุต ที่นี่มันถูกล็อคเป็นหลักผ่านฟอร์มและแอตทริบิวต์ชื่ออินพุต formName.InputName. $ ถูกต้องระบุว่าพื้นที่ที่ชื่อเป็นชื่ออินพุตผ่านการตรวจสอบแอตทริบิวต์ของตัวเองหรือไม่

(11) $ สัญญาสำหรับ $ Resource และ $ http

 $ Q.All ([Resource.Query (). $ สัญญา, Resource2.Query (). $ สัญญา]) จากนั้น (functon (ความสำเร็จ) {console.log (ความสำเร็จ);}, functon (ข้อผิดพลาด) {console.log (ข้อผิดพลาด);}); foodfactory.food.save (f) FoodFactory.food.get ({id: result.id}). $ promise. แล้ว (ฟังก์ชั่น (ข้อมูล) {});});

สิ่งนี้ไม่ได้อธิบายเพียงแค่อ่านโดยตรง โปรดทราบว่าสัญญาของ $ http จะต้องส่งคืนด้วยตนเองดังนั้นโดยทั่วไปแล้วมันผ่านทรัพยากร $

(12) มีเพียงหนึ่งคุณสมบัติใน $ Watch Listens สำหรับ

ตั้งค่าพารามิเตอร์ที่สามของ $ watch เป็น TRUE to Deep Watch อย่างไรก็ตามบางครั้งคุณไม่ต้องการหรือต้องการฟังคุณสมบัติทั้งหมดของคอลเลกชัน เพียงตรวจสอบหนึ่งหรือหลายคนแม้ว่าคุณจะสามารถวนรอบ $ ดูได้ผ่านการวนรอบ แต่ก็น่าหงุดหงิดมากเกินไป

ด้วยวิธีการเขียนต่อไปนี้คุณสามารถตรวจสอบคุณสมบัติวัตถุเดียวของคอลเลกชัน

 $ scope.people = [{"GroupName": "G1", "Persions": [{"id": 1, "name": "Bill"}, {"id": 2, "Name": "Bill2"}}, {"ชื่อ": "" "": "bill4"}]}] $ scope. $ watch (ฟังก์ชั่น ($ scope) {return $ scope.people.map (ฟังก์ชั่น (obj) {return obj.persions.map (ฟังก์ชั่น (g) {return g.name});}); จริง);

(13) ทรีทเม้นต์ต่อต้านการสั่นสะเทือน debounce

สิ่งนี้มีประโยชน์มากสำหรับการประมวลผลการออกเดินทางบ่อยครั้งและเหมาะสำหรับบางสถานการณ์เช่น NG-Change และ $ Watch ตัวอย่างเช่นเมื่อการค้นหาคำหลักถูกกำจัด $ debounce จะถูกห่อหุ้มเป็นบริการและอินเทอร์เฟซจะเรียกโดยตรง รหัส: http://jsfiddle.net/warspawn/6k7kd/

(14) ค้นหาตำแหน่งอย่างรวดเร็ว

โดยทั่วไปแล้วหน้าสามารถรวมกับรหัส JS เพื่อให้ได้ตำแหน่งอย่างรวดเร็วผ่านแบบฟอร์ม <a id = "ด้านล่าง"> </a> ในเชิงมุมมันยังถูกนำไปใช้ผ่านหลักการที่คล้ายกันและรหัสมีดังนี้:

 var เก่า = $ location.hash (); $ location.hash ('batchmenu-bottom'); $ anchorscroll (); $ location.hash (เก่า);

นี่เป็นเพราะตำแหน่งตรง HASH จะทำให้เกิดการเปลี่ยนแปลง URL และการกระโดดหน้าดังนั้นรหัสเพื่อป้องกันการกระโดดจะถูกเพิ่ม

ฉันได้สรุปมากในขณะนี้ มีหลายสิ่งหลายอย่างที่ค้นหาข้อมูลและฝึกฝนด้วยตัวเอง ฉันหวังว่าพวกเขาจะเป็นประโยชน์กับ TX ที่คุณต้องการ หากมีสิ่งใหม่ในอนาคตฉันจะเขียนต่อไป

ข้างต้นเป็นบทสรุปของทักษะการใช้งานเชิงมุม เราจะยังคงเพิ่มและจัดระเบียบบทความที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!