อะไรคือความแตกต่างระหว่าง NG-IF และ NG-Show/Hide?
ความแตกต่างแรกคือ NG-IF ถูกสร้างขึ้นเฉพาะเมื่อนิพจน์หลังจากโหนด DOM เป็นจริง NG-Show ถูกสร้างขึ้นที่จุดเริ่มต้นและการแสดงผล: บล็อกและจอแสดงผล: ไม่มีการใช้ควบคุมการแสดงผลและไม่แสดง
ความแตกต่างที่สองคือ NG-IF Will (โดยปริยาย) สร้างขอบเขตใหม่และสิ่งเดียวกันนั้นเป็นจริงสำหรับ NG-switch, NG-include ฯลฯ เพื่อสร้างอินเทอร์เฟซแบบไดนามิก
สิ่งนี้จะทำให้ NG-Model ผูกพันกับตัวแปรพื้นฐานใน NG-IF และผูกโมเดลนี้กับพื้นที่แสดงผลอื่นใน DIV ด้านนอก เมื่อเลเยอร์ด้านในเปลี่ยนแปลงเลเยอร์ด้านนอกจะไม่เปลี่ยนแบบซิงโครนัสเนื่องจากมีตัวแปรสองตัวอยู่แล้ว
<p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </div>NG-Show ไม่มีปัญหานี้เพราะมันไม่ได้มาพร้อมกับขอบเขตระดับแรกของตัวเอง
วิธีที่จะหลีกเลี่ยงปัญหาประเภทนี้คือการผูกองค์ประกอบในหน้าเข้ากับคุณสมบัติของวัตถุ (data.x) เสมอแทนที่จะเชื่อมโยงโดยตรงกับตัวแปรพื้นฐาน (X)
ดูขอบเขตใน AngularJs สำหรับรายละเอียด
เมื่อ NG-repeat วนซ้ำอาร์เรย์หากมีค่าเดียวกันในอาร์เรย์ปัญหาอะไรจะเกิดขึ้นและวิธีการแก้ปัญหา
ไม่อนุญาตให้ทำซ้ำใน repeater การเพิ่มแทร็กด้วยดัชนี $ สามารถแก้ปัญหาได้ แน่นอนคุณสามารถติดตามด้วยค่าปกติใด ๆ ตราบใดที่คุณสามารถระบุแต่ละรายการในอาร์เรย์ได้โดยเฉพาะ (สร้างความสัมพันธ์ระหว่าง DOM และข้อมูล)
นิพจน์ที่เขียนใน NG-click สามารถใช้วิธีการกับวัตถุดั้งเดิมของ JS ได้หรือไม่?
ไม่เพียง แต่นิพจน์ใน NG-click แต่วิธี JS ดั้งเดิมเท่านั้นที่ไม่สามารถเรียกได้โดยตรงตราบเท่าที่อยู่ในหน้าเนื่องจากสิ่งเหล่านี้ไม่มีอยู่ในขอบเขต $ ของคอนโทรลเลอร์ที่สอดคล้องกับหน้า
ใช้เกาลัด:
<p> {{parseint (55.66)}} <p>
คุณจะพบว่าไม่มีอะไรปรากฏขึ้น
แต่ถ้าคุณเพิ่มฟังก์ชั่นนี้ในขอบเขต $:
$ scope.parseint = function (x) {return parseint (x);}แน่นอนว่าไม่มีปัญหาเช่นนี้
สำหรับความต้องการประเภทนี้การใช้ตัวกรองอาจเป็นตัวเลือกที่ดี:
<p> {{13.14 | parseintfilter}} </p> app.filter ('parseintfilter', function () {return function (รายการ) {return parseint (รายการ);}}){{ตอนนี้ | 'yyyy-mm-dd'}} ในนิพจน์นี้เส้นแนวตั้งและพารามิเตอร์ที่ตามมาจะถูกปรับแต่งได้อย่างไร
ตัวกรองรูปแบบข้อมูลรับอินพุตประมวลผลตามกฎบางอย่างและส่งคืนผลการประมวลผล
ตัวกรองในตัว
มีตัวกรองในตัวเก้าประเภท:
วันที่ (วันที่)
สกุลเงิน
Limitto (จำกัด อาร์เรย์หรือความยาวสตริง)
orderby (เรียงลำดับ)
ตัวพิมพ์เล็ก (ตัวพิมพ์เล็ก)
ตัวพิมพ์ใหญ่ (หมวก)
หมายเลข (จัดรูปแบบหมายเลขเพิ่มตัวคั่นหนึ่งพันตัวและรับพารามิเตอร์เพื่อ จำกัด จำนวนตำแหน่งทศนิยม)
ตัวกรอง (ประมวลผลอาร์เรย์และตัวกรององค์ประกอบที่มีพื้นผิว)
JSON (การจัดรูปแบบวัตถุ JSON)
มีสองวิธีในการใช้ตัวกรองหนึ่งคือการแสดงโดยตรงบนหน้า:
<p> {{ตอนนี้ | วันที่: 'yyyy-mm-dd'}} </p>
อีกอย่างหนึ่งคือการใช้มันใน JS:
// $ filter ('ชื่อตัวกรอง') (วัตถุที่ต้องกรอง, พารามิเตอร์ 1, พารามิเตอร์ 2, ... )
$ filter ('วันที่') (ตอนนี้, 'yyyy-mm-dd hh: mm: ss');
ตัวกรองที่กำหนดเอง
// form app.filter ('ชื่อตัวกรอง', function () {return function (วัตถุที่ต้องกรอง, พารามิเตอร์ตัวกรอง 1, พารามิเตอร์ตัวกรอง 2, ... ) {// ... ทำบางสิ่งบางอย่างเพื่อส่งคืนวัตถุหลังจากการประมวลผล;}}); // Chestnut App.filter ('TimesFilter', function () {return function (item, times) {var result = ''; สำหรับ (var i = 0; i <times; i ++) {result+= item;} ผลตอบแทน;}})ความสัมพันธ์ระหว่างโรงงานบริการและผู้ให้บริการคืออะไร?
โรงงาน
ใส่วิธีการบริการและข้อมูลในวัตถุและส่งคืนวัตถุนี้
app.factory ('fooservice', function () {return {target: 'Factory', sayhello: function () {return 'hello' + this.target;}}});บริการ
สร้างบริการผ่านวิธีตัวสร้างและส่งคืนวัตถุอินสแตนซ์
app.service ('fooservice', function () {var self = this; this.target = 'service'; this.sayhello = function () {return 'hello' + self.target;}});ผู้ให้บริการ
สร้างบริการที่สามารถกำหนดค่าผ่านการกำหนดค่า การส่งคืนใน $ get คือการใช้โรงงานเพื่อสร้างเนื้อหาของบริการ
app.provider ('fooservice', function () {this.configdata = 'init data'; this.setConfigData = ฟังก์ชั่น (ข้อมูล) {ถ้า (ข้อมูล) {this.configdata = data;}} this. $ get = function (var self = this; this.target;}}}}}); // สิ่งที่ถูกฉีดที่นี่คือ fooservice providerapp.config (ฟังก์ชั่น (fooserviceprovider) {fooserviceprovider.setconfigdata ('config data');});จากมุมมองการใช้งานพื้นฐานบริการเรียกโรงงานและส่งคืนอินสแตนซ์ ผู้ให้บริการการโทรจากโรงงานส่งคืนเนื้อหาที่กำหนดไว้ใน $ GET ฟังก์ชั่นโรงงานและบริการมีความคล้ายคลึงกันยกเว้นว่าโรงงานเป็นฟังก์ชั่นปกติที่สามารถส่งคืนสิ่งใดได้ (สามารถเข้าถึงได้ดังนั้นวิธีการเขียนตัวแปรส่วนตัวเหล่านั้นคุณรู้); บริการนี้เป็นตัวสร้างซึ่งไม่สามารถส่งคืนได้ (ที่ผูกพันกับสิ่งนี้สามารถเข้าถึงได้); ผู้ให้บริการเป็นโรงงานที่ได้รับการปรับปรุงซึ่งส่งคืนโรงงานที่สามารถกำหนดค่าได้
ดู AngularJS Factory vs Service vs Provider
กลไกใดที่ใช้สำหรับการเชื่อมโยงข้อมูลของ Angular? คำอธิบายโดยละเอียดเกี่ยวกับหลักการ
กลไกการตรวจสอบสกปรก
การเชื่อมข้อมูลแบบสองทิศทางเป็นหนึ่งในกลไกหลักของ AngularJs เมื่อมีการเปลี่ยนแปลงข้อมูลใด ๆ ในมุมมองจะมีการอัปเดตเป็นโมเดล เมื่อมีการเปลี่ยนแปลงข้อมูลใด ๆ ในโมเดลมุมมองจะได้รับการอัปเดตพร้อมกัน เห็นได้ชัดว่าสิ่งนี้ต้องมีการตรวจสอบ
หลักการคือ Angular ตั้งค่าคิวการฟังบนโมเดลขอบเขตเพื่อฟังการเปลี่ยนแปลงข้อมูลและอัปเดตมุมมอง ทุกครั้งที่วัตถุถูกผูกไว้กับมุมมอง AngularJS จะแทรกนาฬิกา $ ลงในคิวดู $ เพื่อตรวจสอบว่ามีการเปลี่ยนแปลงใด ๆ ในโมเดลที่ตรวจสอบหรือไม่ เมื่อเบราว์เซอร์ได้รับเหตุการณ์ที่สามารถประมวลผลได้โดยบริบทเชิงมุม, $ digest loop จะถูกเรียกใช้การสำรวจนาฬิกา $ ทั้งหมดและในที่สุดก็อัปเดต DOM
ให้เกาลัด
<button ng-click = "val = val+1"> เพิ่ม 1 </button>
เมื่อคลิกการดำเนินการอัปเดตจะถูกสร้างขึ้น (อย่างน้อยสอง $ digest loops จะถูกเรียกใช้)
กดปุ่ม
เบราว์เซอร์ได้รับเหตุการณ์และเข้าสู่บริบทเชิงมุม
$ digest loop เริ่มดำเนินการสอบถามว่าแต่ละ $ ดูมีการเปลี่ยนแปลงหรือไม่
เนื่องจาก $ ดูการตรวจสอบ $ scope .val รายงานการเปลี่ยนแปลงจึงมีการบังคับใช้ $ digest loop
ไม่พบการเปลี่ยนแปลงในห่วง $ Digest ใหม่
เบราว์เซอร์จะนำคอนโทรลเลอร์กลับมาและอัปเดต DOM ที่สอดคล้องกับค่าใหม่ของ $ scope.val
ขีด จำกัด บนของ $ digest loop คือ 10 ครั้ง (ข้อยกเว้นถูกโยนลงหลังจากมากกว่า 10 ครั้งเพื่อป้องกันไม่ให้ลูปไม่มีที่สิ้นสุด)
ดูข้อมูลที่มีผลผูกพันสำหรับ AngularJs
อินเทอร์เฟซแนวนอนสองบล็อก A และ B หากเหตุการณ์ถูกทริกเกอร์ใน A วิธีใดที่สามารถรู้ได้ คำอธิบายโดยละเอียดเกี่ยวกับหลักการ
กล่าวอีกนัยหนึ่งปัญหานี้คือวิธีการสื่อสารระหว่างโมดูลอินเตอร์เฟสแนวนอน มีสองวิธีหนึ่งคือการแบ่งปันบริการและอีกวิธีหนึ่งจะขึ้นอยู่กับเหตุการณ์
บริการที่ใช้ร่วมกัน
ใน Angular วัตถุซิงเกิลสามารถสร้างผ่านโรงงานและวัตถุนี้สามารถฉีดเข้าไปในโมดูล A และ B ที่ต้องการการสื่อสาร
ขึ้นอยู่กับเหตุการณ์
มีสองวิธีในการทำเช่นนี้
อย่างแรกคือการใช้คอนโทรลเลอร์หลัก ในตัวควบคุมเด็กเรียกเหตุการณ์ ($ emit) ไปยังตัวควบคุมหลักจากนั้นฟังเหตุการณ์ ($ on) ในคอนโทรลเลอร์หลักแล้วออกอากาศ ($ ออกอากาศ) ไปยังตัวควบคุมเด็ก ด้วยวิธีนี้ผ่านพารามิเตอร์ที่ดำเนินการโดยเหตุการณ์ข้อมูลจะถูกเผยแพร่ระหว่างคอนโทรลเลอร์ระดับเดียวกันผ่านตัวควบคุมหลัก
ประเภทที่สองคือการใช้ $ rootscope แต่ละแอปพลิเคชันเชิงมุมมีขอบเขตรูท $ rootscope โดยค่าเริ่มต้น ขอบเขตรากอยู่ที่ระดับสูงสุดและมีขอบเขตในทุกระดับห้อยอยู่ ดังนั้นหากเครื่องย่อยใช้เงินโดยตรงใช้ $ rootscope เพื่อออกอากาศและรับกิจกรรมการสื่อสารระหว่างเพื่อนสามารถทำได้
ดูการสื่อสารระหว่างคอนโทรลเลอร์ใน AngularJs
แอปพลิเคชั่นเชิงมุมควรมีชั้นดีได้อย่างไร?
การแบ่งโครงสร้างไดเรกทอรี
สำหรับโครงการขนาดเล็กคุณสามารถจัดระเบียบตามประเภทไฟล์เช่น:
CSSJS คอนโทรลเลอร์โมเดลตัวกรองบริการตัวกรอง
อย่างไรก็ตามสำหรับโครงการขนาดใหญ่ควรแบ่งพวกเขาตามโมดูลธุรกิจเช่น:
CSSMODULES บัญชีคอนโทรลเลอร์รุ่นบริการตัวกรองเทมเพลตตัวควบคุมดิสก์ตัวควบคุมแบบจำลองบริการตัวกรองเทมเพลต
เป็นการดีที่สุดที่จะมีไดเรกทอรีทั่วไปภายใต้โมดูลเพื่อจัดเก็บสิ่งของสาธารณะ
การแยกรหัสตรรกะ
ในฐานะที่เป็นเฟรมเวิร์ก MVVM ควรแบ่งแอปพลิเคชันเชิงมุมตามแบบจำลองโมเดลมุมมอง (คอนโทรลเลอร์) และมุมมอง
การแยกรหัสตรรกะที่นี่ส่วนใหญ่หมายถึงการพยายามทำให้เลเยอร์คอนโทรลเลอร์บางมากที่สุดเท่าที่จะทำได้ แยกตรรกะที่ใช้ร่วมกันลงในบริการ (เช่นคำขอข้อมูลพื้นหลังการแชร์ข้อมูลและแคชการสื่อสารระหว่างโมดูลระหว่างเหตุการณ์ ฯลฯ ) แยกการดำเนินการอินเทอร์เฟซที่ใช้ร่วมกันออกเป็นคำสั่ง (เช่นการเลือกวันที่ห่อหุ้ม, เพจ ฯลฯ ลงในส่วนประกอบ ฯลฯ )
ในแอปพลิเคชันที่ซับซ้อนสามารถสร้างตัวสร้างที่สอดคล้องกันได้สำหรับเอนทิตีเช่นโมดูลฮาร์ดดิสก์ (ดิสก์) ซึ่งอาจมีหลายมุมมองเช่นรายการการสร้างใหม่และรายละเอียดและตัวควบคุมที่สอดคล้องกันตามลำดับ จากนั้นตัวสร้างดิสก์สามารถสร้างขึ้นเพื่อให้การเพิ่มข้อมูลการลบการปรับเปลี่ยนและการตรวจสอบการดำเนินการ หากมีคอนโทรลเลอร์ที่เกี่ยวข้องกับดิสก์ตัวสร้างดิสก์จะถูกฉีดเข้าไปในตัวสร้างดิสก์และสร้างอินสแตนซ์ อินสแตนซ์นี้มีวิธีการเพิ่มการลบการดัดแปลงและการตรวจสอบ สิ่งนี้ไม่เพียง แต่มีเลเยอร์ที่ชัดเจน แต่ยังตระหนักถึงการใช้ซ้ำ (ทำให้ชั้นคอนโทรลเลอร์บางลง)
อ้างถึงการปฏิบัติเชิงลึกของ AngularJs ใน Sunning Cloud Center
ไลบรารีการกำหนดเส้นทางใดที่ใช้กันทั่วไปสำหรับแอปพลิเคชันเชิงมุมและความแตกต่างของพวกเขาคืออะไร?
ngroute และ ui.router มักใช้ใน Angular1.x และยังมีเราเตอร์ใหม่ (มุ่งเน้นส่วนประกอบ) ที่ออกแบบมาสำหรับ Angular2 สิ่งที่อยู่เบื้องหลังไม่ได้ถูกใช้ในโครงการจริงดังนั้นฉันจะไม่พูดถึงมัน
ไม่ว่าจะเป็น ngroute หรือ ui.router เป็นคุณสมบัติเพิ่มเติมเพิ่มเติมของเฟรมเวิร์กจะต้องได้รับการแนะนำในรูปแบบของการพึ่งพาโมดูล
ความแตกต่าง
โมดูล ngroute เป็นโมดูลการกำหนดเส้นทางเชิงมุมในขณะที่โมดูล ui.router เป็นโมดูลบุคคลที่สามที่พัฒนาขึ้นตามโมดูล ngroute
ui.router ขึ้นอยู่กับสถานะ (สถานะ), ngroute ขึ้นอยู่กับ URL และโมดูล ui.router มีฟังก์ชั่นที่ทรงพลังกว่าซึ่งส่วนใหญ่สะท้อนให้เห็นในแง่มุมการทำรังของมุมมอง
ใช้ ui.router เพื่อกำหนดเส้นทางที่มีความสัมพันธ์ที่ชัดเจนของพ่อแม่และลูกและแทรกเทมเพลตการกำหนดเส้นทางเด็กลงใน <div ui-view> </div> ของเทมเพลตการกำหนดเส้นทางพาเรนต์ผ่านคำสั่ง UI-View สิ่งนี้ไม่สามารถกำหนดได้ใน ngroute หาก <div ng-view> </div> ถูกใช้ในมุมมองพาเรนต์-ลูกในเวลาเดียวกันมันจะตกอยู่ในวงที่ตายแล้ว
ตัวอย่าง
ngroute
var app = angular.module ('ngrouteapp', ['ngroute']); app.config (ฟังก์ชั่น ($ routeprovider) {$ routeProvider. เมื่อ ('/main', {templateurl: "main.html", คอนโทรลเลอร์: 'mainctrl'}.ui.router
var app = angular.module ("uiRouteapp", ["ui.router"]); app.config (ฟังก์ชั่น ($ urlrouterprovider, $ stateprovider) {$ urlrouterprovider.otherwise ("/index"); $ stateprovider. 'mainctrl'})หากคุณวางแผนระบบองค์ประกอบอย่างสมบูรณ์ผ่าน Directive เชิงมุมคุณอาจพบกับความท้าทายอะไร
ฉันไม่เคยสร้างชุดส่วนประกอบที่สมบูรณ์ด้วย Directive ด้วยตัวเองดังนั้นฉันจึงไม่สามารถอธิบายได้
สิ่งหนึ่งที่สามารถคิดได้คือส่วนประกอบโต้ตอบกับโลกภายนอกและวิธีการใช้งานผ่านการกำหนดค่าอย่างง่าย
แอพพลิเคชั่นเชิงมุมพัฒนาโดยทีมต่าง ๆ หากคุณต้องการรวมเข้าด้วยกันอาจมีปัญหาอะไรบ้างและจะแก้ปัญหาได้อย่างไร?
อาจพบความขัดแย้งระหว่างโมดูลที่แตกต่างกัน
ตัวอย่างเช่นการพัฒนาทั้งหมดของทีมหนึ่งจะดำเนินการภายใต้ modulea ในขณะที่รหัสที่พัฒนาโดยทีมอื่นจะดำเนินการภายใต้ moduleb
Angular.module ('myapp.modulea', []) .factory ('servicea', function () {... }) angular.module ('myapp.moduleb', []) .factory ('servicea', function () {...สิ่งนี้จะทำให้ ServiceA ภายใต้สองโมดูลถูกเขียนทับ
ดูเหมือนว่าไม่มีทางออกที่ดีใน Angular1.x ดังนั้นจึงเป็นการดีที่สุดที่จะทำการวางแผนแบบครบวงจรในระยะแรกทำข้อตกลงและพัฒนาอย่างเคร่งครัดตามข้อตกลง นักพัฒนาแต่ละคนเขียนรหัสบล็อกเฉพาะเท่านั้น
ข้อเสียของ Angular คืออะไร?
ข้อ จำกัด ที่แข็งแกร่ง
สิ่งนี้นำไปสู่ค่าใช้จ่ายในการเรียนรู้สูงและไม่เป็นมิตรกับส่วนหน้า
แต่เมื่อทำตามการประชุม AngularJS การผลิตจะสูงและเป็นมิตรกับโปรแกรมเมอร์ Java
ไม่เอื้อต่อ SEO
เนื่องจากเนื้อหาทั้งหมดได้มาและแสดงผลแบบไดนามิกเครื่องมือค้นหาจึงไม่สามารถรวบรวมข้อมูลได้
ทางออกหนึ่งคือสำหรับการเข้าถึงผู้ใช้ปกติเซิร์ฟเวอร์จะตอบสนองต่อเนื้อหาของแอปพลิเคชัน AngularJS สำหรับการเข้าถึงเครื่องมือค้นหาจะตอบสนองต่อหน้า HTML โดยเฉพาะสำหรับ SEO
ปัญหาด้านประสิทธิภาพ
ในฐานะที่เป็นเฟรมเวิร์ก MVVM เนื่องจากการเชื่อมโยงข้อมูลสองทางถูกนำไปใช้จะมีปัญหาด้านประสิทธิภาพสำหรับอาร์เรย์ขนาดใหญ่และวัตถุที่ซับซ้อน
วิธีการที่สามารถใช้เพื่อเพิ่มประสิทธิภาพประสิทธิภาพของแอปพลิเคชันเชิงมุม:
ลดรายการการตรวจสอบ (เช่นการเชื่อมโยงทางเดียวสำหรับข้อมูลที่ไม่เปลี่ยนแปลง)
ตั้งค่าดัชนีอย่างแข็งขัน (ระบุแทร็กโดยประเภทง่าย ๆ ใช้ตัวเองเป็นดัชนีโดยค่าเริ่มต้นและวัตถุใช้ $$ แฮชคีย์โดยค่าเริ่มต้นตัวอย่างเช่นเปลี่ยนเป็นแทร็กโดย item.id)
ลดจำนวนข้อมูลที่แสดงผล (เช่นการเพจหรือการดึงข้อมูลส่วนเล็ก ๆ ในแต่ละครั้งและดึงข้อมูลตามต้องการ)
การแบนข้อมูล (ตัวอย่างเช่นสำหรับโครงสร้างต้นไม้ใช้โครงสร้างการแบนเพื่อสร้างแผนที่และข้อมูลต้นไม้เมื่อทำงานบนต้นไม้เนื่องจากการอ้างอิงเช่นเดียวกับข้อมูลแบนการเปลี่ยนแปลงข้อมูลต้นไม้จะถูกซิงโครไนซ์กับข้อมูลแบนดั้งเดิม)
นอกจากนี้สำหรับ Angular1.x มีปัญหาเกี่ยวกับการตรวจสอบสกปรกและกลไกโมดูล
มือถือ
Ionic สามารถลองได้ แต่มันไม่สมบูรณ์แบบ
จะดูมุมมองของ Peter-Paul Koch เกี่ยวกับ Angular ในเดือนมกราคม 2558 ได้อย่างไร?
คุณดูคอนโทรลเลอร์เป็นไวยากรณ์ที่แนะนำใน Angular 1.2 ได้อย่างไร?
ประโยชน์พื้นฐานที่สุด
ก่อน Angular 1.2 การผูกมัดใด ๆ ในมุมมองจะถูกผูกไว้โดยตรงกับขอบเขต $
ฟังก์ชั่น myctrl ($ scope) {$ scope.a = 'aaa'; $ scope.foo = function () {... }}การใช้คอนโทรลเลอร์ไม่จำเป็นต้องฉีด $ อีกครั้งคอนโทรลเลอร์จะกลายเป็นวัตถุจาวาสคริปต์ที่ง่ายมาก (POJO) ซึ่งเป็น ViewModel ที่บริสุทธิ์มากขึ้น
ฟังก์ชั่น myctrl () {// ใช้ VM เพื่อจับภาพสิ่งนี้เพื่อหลีกเลี่ยงฟังก์ชั่นภายในที่ทำให้บริบทเปลี่ยนเมื่อใช้ var vm นี้ = สิ่งนี้; vm.a = 'aaa';}หลักการ
จากมุมมองการใช้งานซอร์สโค้ดไวยากรณ์คอนโทรลเลอร์เพียงแค่สร้างแอตทริบิวต์บนขอบเขต $ ด้วย AS นามแฝงเช่นตัวอย่างของวัตถุคอนโทรลเลอร์
if (directive.controlleras) {locals. $ scope [directive.controlleras] = controllerInstance;}อย่างไรก็ตามนอกเหนือจากการทำให้คอนโทรลเลอร์ Pojo กล่าวถึงข้างต้นมากขึ้นคุณยังสามารถหลีกเลี่ยงการเผชิญหน้ากับหลุมที่เกี่ยวข้องกับขอบเขต AngularJS (นั่นคือหลุมที่ NG-ถ้าสร้างขอบเขตระดับแรกซึ่งจริง ๆ แล้วเป็นหลุมในการสืบทอดของ VINT
<div ng-controller = "testctrl เป็น vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <อินพุต type = "text" ng-model = "vm.name"> </div> </div>คำถาม
ปัญหาหนึ่งที่คุณจะพบกับคอนโทรลเลอร์คือเพราะไม่มีการฉีด $ $ วิธีการภายใต้ $ emit, $ broadcast, $ on, $ watch ฯลฯ ไม่สามารถใช้งานได้ การดำเนินงานที่เกี่ยวข้องกับเหตุการณ์เหล่านี้สามารถห่อหุ้มและจัดการได้อย่างสม่ำเสมอหรือ $ $ จะถูกนำไปใช้ในคอนโทรลเลอร์เดียวสำหรับการรักษาพิเศษ
ตัวควบคุมเชิงมุมอ้างอิงเป็นขอบเขตไวยากรณ์และขอบเขต
รายละเอียดของ "การฉีดพึ่งพา" ของ Angular ของ Angular
เกาลัด
การฉีดพึ่งพาเป็นรูปแบบการออกแบบซอฟต์แวร์ที่มีจุดมุ่งหมายเพื่อจัดการกับการพึ่งพาระหว่างรหัสและลดการมีเพศสัมพันธ์ระหว่างส่วนประกอบ
ตัวอย่างเช่นหากคุณไม่ได้ใช้ AngularJS คุณอาจต้องทำเช่นนี้หากคุณต้องการสอบถามข้อมูลจากพื้นหลังและแสดงในส่วนหน้า:
var imentbox = document.QuerySelector ('. Animal-Box'); var httpRequest = {get: function (url, callback) {console.log (url + 'ร้องขอ'); var iments = ['cat', 'dog', 'Rabbit']; การโทรกลับ (สัตว์); }} var render = function (el, http) {http.get ('/api/iments', ฟังก์ชั่น (สัตว์) {el.innerhtml = สัตว์;})} render (httprequest, Animalbox);อย่างไรก็ตามหากพารามิเตอร์ไม่ผ่านเมื่อเรียกว่าการเรนเดอร์ดังต่อไปนี้ข้อผิดพลาดจะถูกรายงานเนื่องจากไม่พบ EL และ HTTP (กำหนดการพึ่งพาและการพึ่งพาจะไม่พบโดยอัตโนมัติเมื่อทำงาน)
render ();
// typeError: ไม่สามารถอ่านคุณสมบัติ 'รับ' ของ undefined
และการใช้ AngularJS คุณสามารถทำได้โดยตรง
ฟังก์ชั่น myctrl = ($ scope, $ http) {$ http.get ('/api/iments'). ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {$ scope.animals = data;})}กล่าวอีกนัยหนึ่งเมื่อแอปเชิงมุมกำลังทำงาน MyCTRL จะถูกเรียกและการอ้างอิงสองครั้งคือ $ ขอบเขตและ $ http จะถูกฉีดโดยอัตโนมัติ
หลักการ
AngularJS infers ชื่อบริการการพึ่งพาผ่านชื่อพารามิเตอร์ของตัวสร้างและใช้ toString () เพื่อค้นหาสตริงที่สอดคล้องกับฟังก์ชั่นที่กำหนดนี้จากนั้นแยกวิเคราะห์พารามิเตอร์ (การพึ่งพา) ในความสม่ำเสมอจากนั้นได้รับการพึ่งพาที่สอดคล้องกันในแผนที่การพึ่งพา
เพื่อให้ง่ายขึ้นมันอาจเป็นเช่นนี้:
var inject = {// การจัดเก็บข้อมูลการแมปที่จัดเก็บข้อมูลความสัมพันธ์: {}, // ลงทะเบียนการลงทะเบียนการพึ่งพา: ฟังก์ชั่น (ชื่อ, ทรัพยากร) {this.storage [ชื่อ] = ทรัพยากร; }, // แยกวิเคราะห์การพึ่งพาและการแก้ไขการเรียก: ฟังก์ชั่น (เป้าหมาย) {var self = this; var fn_args =/^function/s*[^/(]*/(/s*([^/)]*)/)/m; var stript_comments = /(( /////.*$)|(////* [/s/s- เหมือนกัน*?/*// /))/mg; fntext = target.toString (). แทนที่ (strip_comments, ''); argdecl = fntext.match (fn_args) [1] .split (/,?/g); var args = []; argdecl.foreach (ฟังก์ชั่น (arg) {ถ้า (self.storage [arg]) {args.push (self.storage [arg]);}}) ฟังก์ชันการส่งคืน () {target.apply ({}, args); -การใช้หัวฉีดนี้เกาลัดก่อนหน้านี้ไม่ได้ใช้ AngularJs สามารถเรียกได้หลังจากแก้ไข
Inject.register ('el', Animalbox); inject.register ('ajax', httprequest); reender = inject.resolve (render); reender ();คำถาม
เนื่องจากหัวฉีด AngularJS สันนิษฐานว่าชื่อพารามิเตอร์ของฟังก์ชั่นคือชื่อของการพึ่งพาและจากนั้นค้นหาการพึ่งพาหากการพึ่งพาถูกฉีดขึ้นอยู่กับในเกาลัดก่อนหน้าหลังจากรหัสถูกบีบอัด (พารามิเตอร์ถูกเปลี่ยนชื่อ)
// function myctrl = ($ scope, $ http) {... } // function myctrl = (a, b) {... }ดังนั้นสองวิธีต่อไปนี้มักจะใช้ในการฉีดพึ่งพา (มีข้อกำหนดสำหรับลำดับที่เพิ่มการพึ่งพา)
วิธีคำอธิบายประกอบอาเรย์
myapp.controller ('myctrl', ['$ scope', '$ http', ฟังก์ชั่น ($ scope, $ http) {... }]))การฉีด $ อย่างชัดเจน
MyApp.Controller ('myctrl', myctrl); ฟังก์ชั่น myctrl = ($ scope, $ http) {... } myctrl. $ inject = ['$ scope', '$ http'];เติมเต็ม
สำหรับคอนเทนเนอร์ DI จะต้องรวมองค์ประกอบสามอย่าง: การลงทะเบียนการพึ่งพาการประกาศการพึ่งพาและการได้มาของวัตถุ
ใน AngularJS ทั้งโมดูลและ $ ให้สามารถให้การลงทะเบียนการพึ่งพาได้ หัวฉีดในตัวสามารถรับวัตถุได้ การประกาศการพึ่งพาเป็นไปตามที่กล่าวไว้ในคำถามก่อนหน้า
นี่คือเกาลัด
// สำหรับโมดูลมีการส่งพารามิเตอร์มากกว่าหนึ่งพารามิเตอร์ซึ่งหมายความว่าโมดูลใหม่ถูกสร้างขึ้นและอาร์เรย์ที่ว่างเปล่าหมายถึงไม่มีการพึ่งพาโมดูลอื่น ๆ // มีเพียงพารามิเตอร์เดียว (ชื่อโมดูล) ซึ่งหมายถึงการได้รับโมดูล // กำหนด myapp.services 'service Angular.Module ('MyApp.Services', []) // $ ผู้ให้บริการมีโรงงาน, บริการ, ผู้ให้บริการ, ค่า, ค่าคงที่ // กำหนด httpserviceAngular.module ('myapp.services'). บริการ ('httpservice', ['$ http'อ้างถึง
[AngularJs] ใช้การฉีดพึ่งพาอย่างง่ายด้วยตัวเอง
เข้าใจโมดูลและหัวฉีดในเชิงมุมเช่นการฉีดพึ่งพา
สถานการณ์การใช้งานการฉีดพึ่งพาการใช้งานจริงใน AngularJs
วิธีดู Angular2
เมื่อเทียบกับ Angular1.x แล้ว Angular2 ได้ทำการเปลี่ยนแปลงครั้งใหญ่และเกือบจะเป็นกรอบใหม่ล่าสุด
ขึ้นอยู่กับ TypeScript (ซึ่งสามารถพัฒนาได้โดยใช้ TypeScript) ประเภทภาษาที่แข็งแกร่งจะเป็นประโยชน์มากขึ้นเมื่อทีมงานโครงการขนาดใหญ่ร่วมมือกัน
ส่วนประกอบช่วยเพิ่มประสิทธิภาพของการพัฒนาและการบำรุงรักษา
นอกจากนี้ยังมีโมดูลที่รองรับการโหลดแบบไดนามิกเราเตอร์ใหม่การสนับสนุนดั้งเดิมสำหรับสัญญา ฯลฯ
มันเหมาะกับมาตรฐานในอนาคตและดูดซับข้อดีของเฟรมเวิร์กอื่น ๆ ซึ่งคุ้มค่าที่จะรอคอย แต่ก็มีหลายสิ่งที่จะเรียนรู้ (ES ถัดไป, TS, RX, ฯลฯ )
ข้างต้นเป็นการรวบรวมข้อมูลสำหรับคำถามสัมภาษณ์ AngularJS เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!