เฟรมเวิร์ก AngularJS นั้นใช้ในโครงการส่วนหน้า ฉันไม่รู้เกี่ยวกับกรอบนี้มาก่อนและเป็นเพราะฉันเข้ารับตำแหน่งเมื่อเร็ว ๆ นี้ดังนั้นฉันจึงวางแผนที่จะเรียนรู้ได้ดี ฉันเคยเป็นด้านพีซี แต่ตอนนี้ฉันเข้าครอบครองโครงการมือถือ เฟรมเวิร์ก UI มือถือใช้ Ionic + Vordova แต่ไม่ได้ใช้ bootstrap ฉันใช้ส่วนต่อประสานแอพ iOS + Android เป็นหลัก ฉันไม่รู้เกี่ยวกับกรอบไอออนิกมากนักและฉันต้องใช้เวลาในการทำความคุ้นเคย AngularJS การเรียนรู้สามเณรยินดีที่จะแก้ไขฉัน
AngularJs คืออะไร?
พูดง่ายๆคือมันเป็นกรอบของ JavaScript ที่เพิ่มเข้าไปในหน้าเว็บผ่านแท็กสคริปต์ นั่นคือเมื่อเราใช้ AngularJS เราต้องแนะนำรหัสต่อไปนี้
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
โดยปกติจะแนะนำให้วางสคริปต์ที่ด้านล่างขององค์ประกอบ <body> ซึ่งคือการปรับปรุงความเร็วในการโหลดของหน้าเว็บ เนื่องจากการโหลด HTML ไม่ได้อยู่ภายใต้การโหลดสคริปต์
AngularJs คืออะไร?
AngularJS ช่วยให้ง่ายต่อการพัฒนาแอปพลิเคชันหน้าเดียวที่ทันสมัย (สปา: แอปพลิเคชันหน้าเดียว)
• AngularJS เชื่อมโยงข้อมูลแอปพลิเคชันกับองค์ประกอบ HTML
• AngularJs สามารถโคลนและทำซ้ำองค์ประกอบ HTML
• AngularJs สามารถซ่อนและแสดงองค์ประกอบ HTML
• AngularJs สามารถเพิ่มรหัส "เบื้องหลัง" องค์ประกอบ HTML
• AngularJS รองรับการตรวจสอบอินพุต
ตัวอย่างเช่นเทอร์มินัลมือถือโดยทั่วไปใช้การเปรียบเทียบหน้าเดียวซึ่งทำได้โดยใช้การแปลงการกำหนดเส้นทางเชิงมุม เช่นเดียวกับโครงการปัจจุบันของเราเรายังใช้หน้าเดียว นั่นคือในหน้าหลักหน้ากระโดดทั้งหมดจะดำเนินการในหน้าหลัก ภาพหน้าจอมีดังนี้:
การแสดงออกของ Angularjs
นิพจน์ AngularJS เขียนด้วยวงเล็บปีกกาสองครั้ง: {{Expression}}
นิพจน์ AngularJS ผูกข้อมูลกับ HTML ซึ่งคล้ายกับคำสั่ง NG-bind
AngularJS จะ "เอาต์พุต" ข้อมูลที่ตำแหน่งที่เขียนนิพจน์
นิพจน์ AngularJS นั้นเหมือนกับการแสดงออกของ JavaScript: พวกเขาสามารถมีตัวอักษรตัวดำเนินการและตัวแปร
<! doctype html> <!-แท็ก angularjs เพื่อประมวลผลหน้า html ทั้งหมดและบูตแอปพลิเคชัน-> <html ng-app> <head> <meta charset = "utf-8"> <สคริปต์ src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> ชื่อ: {{"ting"+"feng"}} </p> <p> จำนวน: {{5+5} ng-init = "person = {ชื่อ: 'tingfeng', อายุ: '13 '}"> <p> ชื่อ: {{person.name}} อายุ: {{person.age}} </p> </div> </body> </html>การประยุกต์ใช้ AngularJs ใน HTML
ส่วนใหญ่ขยาย HTML ผ่าน NG-Directive Directive AngularJS เป็นแอตทริบิวต์ HTML นำหน้าด้วย NG ซึ่งมีคุณสมบัติหลักสี่ประการ: MVC, โมดูล, ระบบการเรียนการสอน (Directive) และ Databinding
NG-Init: คำสั่งนี้เริ่มต้นตัวแปรแอปพลิเคชัน AngularJS ตัวอย่างเช่นคอลัมน์ต่อไปนี้:
<! doctype html> <!-แท็ก angularjs เพื่อประมวลผลหน้า html ทั้งหมดและแนะนำแอปพลิเคชัน-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0. ng-init = "name = 'tingfeng'"> <p> ชื่อคือ: <span ng-bind = "name"> </pan> </p> </div> </body> </html>
NG-APP: คำสั่งนี้บ่งชี้ว่าแอปพลิเคชัน AngularJS ถูกกำหนดไว้ โดยปกติแล้วจะอยู่ด้านหลัง HTML คุณยังสามารถใช้ NG-APP Directive ในพื้นที่ ตัวอย่างเช่น <div ng-app> สคริปต์ AngularJS จะทำงานใน DIV เท่านั้นซึ่งหมายความว่าจากที่นี่เนื้อหาทั้งหมดเป็น AngularJS สำหรับการจัดการ
NG-Model: คำสั่งนี้หมายถึงค่าองค์ประกอบที่มีผลผูกพัน (เช่นค่าของกล่องอินพุต) ไปยังแอปพลิเคชัน
NG-Bind: คำสั่งนี้เชื่อมโยงข้อมูลแอปพลิเคชันกับมุมมอง HTML ใช้คำแนะนำที่เกี่ยวข้องเพื่อใช้ AngularJS เพื่อใช้งานหน้า HTML มาดูรหัสสำหรับวิธีการใช้งาน
ในเวลานี้ให้ใช้ NG-Model เพื่อผูกกับตัวแปรโมเดล SetName เมื่อป้อนค่าในกล่องอินพุตชื่อ setName ที่สอดคล้องกันจะเปลี่ยน คุณสามารถทดสอบได้ด้วยตัวเอง
คำอธิบายเกี่ยวกับ $ SCOPE
$ SCOPE คืออะไร? ฟังก์ชั่นของมันคืออะไร? ใช้อย่างไร?
พูดง่ายๆคือขอบเขตคือ pojo (plineoldjavascriptObject) คล้ายกับวัตถุที่มีคุณสมบัติและวิธีการขอบเขตคือ pojo (plineoldjavascriptObject) คล้ายกับวัตถุที่มีคุณสมบัติและวิธีการขอบเขตให้นาฬิกา (), watch () และใช้วิธีการเครื่องมือ () MVC ของ AngularJS นั้นทำด้วยความช่วยเหลือของ $ SCOPE
คุณสมบัติ: 1. เป็นสภาพแวดล้อมการดำเนินการ (หรือขอบเขต) ของนิพจน์
2. ขอบเขตคือโครงสร้างของต้นไม้ขนานกับแท็ก DOM ที่มีขอบเขตซึ่งเป็นโครงสร้างต้นไม้ขนานกับแท็ก DOM ที่มีรูทสโคปอยู่ที่ระดับบนสุด
3. ขอบเขตจะสืบทอดขอบเขตหลักจะสืบทอดคุณสมบัติและวิธีการของ Rootscope หลัก
4. $ SCOPE สามารถเผยแพร่เหตุการณ์คล้ายกับ DOM ซึ่งสามารถเผยแพร่ขึ้นหรือลงได้
5. $ SCOPE ไม่เพียง แต่เป็นพื้นฐานของ MVC แต่ยังเป็นพื้นฐานสำหรับการใช้งานสองทางในภายหลัง
ส่วนประกอบของ AngularJs
เทมเพลต: นั่นคือไฟล์ HTML และ CSS ที่เขียนโดยแสดงมุมมองของแอปพลิเคชัน AngularJS สามารถสร้างแท็ก HTML ของตัวเองใน HTML!
คอนโทรลเลอร์: แตกต่างจาก AJAX ไม่จำเป็นต้องเขียนผู้ฟังหรือตัวควบคุม DOM เนื่องจากมันถูกสร้างขึ้นใน AngularJS แล้ว ประโยชน์: ง่ายต่อการเขียนทดสอบรักษาและทำความเข้าใจ
ข้อมูลแบบจำลอง: โมเดลถูกขยายจาก AngularJS เป็นคุณลักษณะของวัตถุโดเมน ข้อมูลของโมเดลอาจเป็นวัตถุ JS, อาร์เรย์หรือประเภทดั้งเดิม แต่พวกเขาทั้งหมดเป็นของวัตถุขอบเขต AngularJS
จะเข้าใจขอบเขตใน AngularJS ได้อย่างไร?
นั่นคือขอบเขตถือได้ว่าเป็นเทมเพลตพันธบัตรที่ทำงานร่วมกับโมเดลและคอนโทรลเลอร์ AngularJS ใช้ขอบเขตและยังมีข้อมูลโมเดลข้อมูลและตัวควบคุมในเทมเพลต สิ่งเหล่านี้สามารถช่วยแยกโมเดลและมุมมองออกได้ แต่ทั้งคู่ต่างกัน! การเปลี่ยนแปลงใด ๆ ของโมเดลจะสะท้อนให้เห็นในมุมมองทันทีและการเปลี่ยนแปลงใด ๆ ในมุมมองจะสะท้อนให้เห็นในโมเดลทันที
มุมมอง: ใน AngularJS มุมมองคือการแมปหลังจากที่โมเดลจะแสดงผลผ่านเทมเพลต HTML นั่นคือไม่ว่าแบบจำลองจะเปลี่ยนไปเมื่อใด AngularJS จะอัปเดตจุดเชื่อมต่อแบบเรียลไทม์และอัปเดตมุมมอง
มันใช้งานง่ายกว่าในการโพสต์รหัส!
<! doctype html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js" －control เทมเพลต helloangularmymodule.controller ("helloangular", ['$ scope', ฟังก์ชั่น helloangular ($ scope) {$ scope.value = {ชื่อ: 'Jiangting'};}]); </script> </head> <body> <!-MVC-view Angular-> <div ng-controller = "helloangular"> － คอนโทรลเลอร์คือ helloangular <p> {{value.name}}, สวัสดี!มาดูแอปพลิเคชันของคอนโทรลเลอร์นั่นคือคอนโทรลเลอร์นั่นคือคอนโทรลเลอร์ทำงานข้อมูลผูกมันและแสดงบนหน้า HTML
โมดูล AngularJS (โมดูล) กำหนดแอปพลิเคชัน AngularJS
คอนโทรลเลอร์ AngularJS (คอนโทรลเลอร์) ใช้เพื่อควบคุมแอปพลิเคชัน AngularJS
คำสั่ง NG-APP กำหนดแอปพลิเคชันและ NG-Controller กำหนดคอนโทรลเลอร์ มาใช้คอลัมน์ด้านบนเพื่อดู:
โมดูล AngularJS กำหนดแอปพลิเคชัน:
var mymodule = angular.module ("helloangular", []); template ควบคุม helloangularแอปพลิเคชั่นควบคุมคอนโทรลเลอร์ AngularJS:
mymodule.controller ("helloangular", ['$ scope', ฟังก์ชั่น helloangular ($ scope) {$ scope.value = {ชื่อ: 'Jiangting'};}]);เข้าใจ MVC ส่วนหน้า
เกี่ยวกับคุณสมบัติคอนโทรลเลอร์:
1. อย่าพยายามใช้คอนโทรลเลอร์คอนโทรลเลอร์มักจะรับผิดชอบเฉพาะมุมมองเล็ก ๆ
2. อย่าใช้งาน DOM โดยตรงในคอนโทรลเลอร์ไม่ใช่ความรับผิดชอบ
3. อย่าทำการกรองข้อมูลในคอนโทรลเลอร์มีบริการตัวกรอง
4. อย่าจัดรูปแบบข้อมูลในคอนโทรลเลอร์ NG มีการควบคุมแบบฟอร์มที่มีประโยชน์มาก
5. คอนโทรลเลอร์จะไม่โทรหากัน ปฏิสัมพันธ์ระหว่างคอนโทรลเลอร์จะดำเนินการผ่านเหตุการณ์ มันจะผ่านบริการกรอง 4. อย่าจัดรูปแบบข้อมูลในคอนโทรลเลอร์ มีการควบคุมแบบฟอร์มที่มีประโยชน์มาก 5. คอนโทรลเลอร์จะไม่โทรหากัน ปฏิสัมพันธ์ระหว่างคอนโทรลเลอร์จะดำเนินการผ่านเหตุการณ์ มันจะดำเนินการผ่านขอบเขต
มาดูวิธีการปรับแต่งระบบคำสั่งรหัสมีดังนี้:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script> []); mymodule.directive ("สวัสดี", function () {return {จำกัด : 'e', เทมเพลต: '<div> สวัสดีทุกคน! </div>', -เราแทรกแท็ก html แทนที่: true}}); </script> </head> <body>ในคำสั่งมีพารามิเตอร์สามตัวที่ส่งคืนหลังจากนั้นโดยที่เทมเพลตกลางหมายถึงแท็ก HTML ที่แทรก ตอนนี้ฉันจะเขียนรหัส HTML ด้วยตัวเองและดูวิธีการเขียนลงใน AngularJS
รหัส HTML แบบคงที่ดั้งเดิมมีดังนี้:
<ul> <li> <span> new1 </span> <p> เพียงแค่ทดสอบหน้า 1 </p> </li> <li> <pan> new2 </span> <p> เพียงแค่ทดสอบหน้า 2 </p> </li></ul>
วิธีการแก้ไขเป็น AngularJS มีดังนี้:
<! doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> // ขอบเขต AngularJS: มันถือได้ว่าเป็นเทมเพลต หลังจากแอปพลิเคชันเริ่มต้นจะมีการสร้างขอบเขตรูทและขอบเขตของคอนโทรลเลอร์เป็นตัวตายตัวแทนทั่วไปไปยังขอบเขตรูท ฟังก์ชั่น newsctrl ($ scope) {$ scope.news = [{"เนื้อหา": "new1", "แนะนำ": "แค่ทดสอบ page1"}, {"เนื้อหา": "new2", "แนะนำ": "เพียงแค่การทดสอบ page2"}]; $ scope.phones = {ความยาว: "4" commas};} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "ใหม่ในข่าว"> {{new.content}} <p> {new.introduce}} </p> </li>ข้างต้นคือการวิเคราะห์คุณสมบัติพื้นฐานของ AngularJs ที่แนะนำโดยบรรณาธิการ (I) ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!