ฉันดูวิดีโอเกี่ยวกับ AngularJs เนื้อหาวิดีโออธิบายวิธีการสร้างสปาในรูปแบบของรายการสิ่งที่ต้องทำ (แอปพลิเคชันหน้าง่าย) เพื่อเพิ่มความเข้าใจบทความถูกเขียนด้านล่างเพื่อตรวจสอบและรวม
เตรียมตัว
ดาวน์โหลด AngularJs
มันเรียกว่าการดาวน์โหลด แต่ในความเป็นจริงตราบใดที่คุณสามารถอ้างอิง AngularJs ในหน้าของเรา อาจมีวิธีการต่อไปนี้
การเร่งความเร็ว CDN
นอกจากนี้ยังเป็นไปได้ที่จะใช้บริการเร่งความเร็ว CDN ในประเทศ
คัดลอกรหัสดังนี้: <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
วิธี NPM
นอกจากนี้ยังค่อนข้างสะดวกในการใช้เครื่องมือการจัดการแพ็คเกจของ NodeJS โดยทั่วไปสามารถทำได้ในสองขั้นตอน
ก่อนอื่นให้ป้อนโฟลเดอร์ที่เราจะเขียนโค้ด
•ติดตั้ง AngularJS: NPM ติดตั้ง Angular
•แนะนำให้ใช้ในหน้า:
<!-ที่อยู่ SRC นี้ขึ้นอยู่กับสถานการณ์ของคุณเอง->
<script src = "node_modules/angular/angular.js"> </script>
วิธีธรรมดา
วิธีการทั่วไปคือการดาวน์โหลดไฟล์ที่เกี่ยวข้องด้วยตนเองแล้วแนะนำด้วยตนเองเพราะมันค่อนข้างยุ่งยาก ไม่มีการเล่าเรื่องที่นี่อีกต่อไป
ดาวน์โหลด bootstrap
ในฐานะที่เป็นกรอบการทำงานระดับแนวหน้าที่ได้รับความนิยมและทันสมัย Bootstrap เป็นที่นิยม ดาวน์โหลดที่อยู่
สำรองความรู้
สถาปัตยกรรม MVC
Core AngularJS ใช้สถาปัตยกรรม MVC และแอพพลิเคชั่นที่ขับเคลื่อนด้วยเหตุการณ์ ฉันยังใหม่กับมันดังนั้นฉันจึงไม่เข้าใจดี หากมีข้อผิดพลาดใด ๆ ฉันหวังว่าบล็อกเกอร์จะชี้ให้เห็น
NG-APP
ในฐานะบัตเลอร์ของหน้าเดียวแอพหมายถึงแอปพลิเคชันและความหมายของแอปพลิเคชัน บริการหน้าเดียวของเราทำหน้าที่เป็นแอพ
โดยทั่วไปแล้ว NG-APP ควรซ้อนกันเป็นภาชนะแม่ของ NG-Controller มิฉะนั้นผลลัพธ์ที่คาดหวังอาจไม่ปรากฏขึ้น
ผู้ควบคุม
คอนโทรลเลอร์ชายมือขวาที่ใช้บนหน้าและการมีอยู่ของคอนโทรลเลอร์ทำให้การมีเพศสัมพันธ์ระหว่างโมดูลง่ายขึ้นทำให้รหัสการเขียนเป็นมาตรฐานและง่ายขึ้น
โมเดล NG
ในระหว่างการประมวลผลแบบจำลองโดยทั่วไปแล้วจะผูกและเอาต์พุตกับองค์ประกอบหน้าเพื่อให้ได้เอฟเฟกต์หน้าแบบปราศจากการรีเฟรช
พื้นฐานเหตุการณ์
คลิกที่
ในแอปพลิเคชันหน้าเดียวของเราองค์ประกอบที่ประกาศแอตทริบิวต์นี้มีฟังก์ชั่นของเหตุการณ์คลิก ส่วนใดของฟังก์ชั่นที่เรียกว่าพวกเขาเกี่ยวข้องกับคอนเทนเนอร์ที่องค์ประกอบอยู่
กล่าวคือฟังก์ชั่นที่สอดคล้องกับเหตุการณ์การคลิกคือรหัสที่เขียนในคอนโทรลเลอร์ที่เกี่ยวข้องเพื่อให้ฟังก์ชั่นเฉพาะ
กรอกรหัส
รหัสรายละเอียดสำหรับตัวอย่างนี้โพสต์ด้านล่าง
main.js
(ฟังก์ชั่น (หน้าต่าง) {// ลงทะเบียนโมดูลหลักของแอปพลิเคชัน var toDoapp = window.angular.module ('toDoapp', []); // ลงทะเบียนคอนโทรลเลอร์ // window.angular.module ('toDoapp') toDoapp.controller ('mainController' $ scope.text = ''; // ประเภทข้อมูลที่ถูกผูกไว้สองทางจะถูกใช้ // เพื่อความสะดวกในการแสดงหน้าจอให้เพิ่มสตริงของรายการ $ scope.todolist = [{text: 'Angularjs', ทำ: false}, {text: 'bootstrap' $ scope.text.trim (); หาก (ข้อความ) {$ scope.todolist.push ({text: text, done: false}); มัน} // รับจำนวนเหตุการณ์ที่เสร็จสมบูรณ์และนำไปใช้ตามการเลือกช่องทำเครื่องหมาย // เนื่องจากหน้ามีการเปลี่ยนแปลงแบบไดนามิกคุณต้องใช้ฟังก์ชั่นหรือเพียงแค่ใช้การผูกโมเดล แต่นั่นจะเป็นปัญหาเล็กน้อย $ doNeCount = function () {// ใช้ตัวกรอง เงื่อนไขและเหตุการณ์เสร็จสิ้น});todolist.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> angularjs รวมรายการงานการใช้งาน bootstrap </apps.bdimg.com/libs/libs/libs.30 rel = "stylesheet"> <style> .container {Max-Width: 720px; } .done {color: #cca; } .CheckBox {มาร์จิ้น-ขวา: 12px; มาร์จิ้น-ก้น: 0; } .DONE> .CheckBox> LABEL> Span {Text-Decoration: Line-through; } </style> <script src = "node_modules/angular/angular.js"> </script> <script src = "myjs/app.js"> </script> </head> <body> <div ng-app = "toDoApp"> <ส่วนหัว> <h1> ng-controller = "MainController"> <!-เพื่อให้ได้อินเทอร์เฟซที่ดูดีได้ใช้การควบคุมแบบฟอร์ม-> <form> <อินพุต type = "text" ng-model = "text" name = ""> <span> <button ng-click = "เพิ่ม ()" ng-class = "{'เสร็จแล้ว': item.done}" ng-repeat = "รายการใน todolist"> <button type = "ปุ่ม" Aria-label = "ปิด" ng-click = "ลบ (รายการ)"> ng-model = "item.done"> <span> {{item.text}} </span> </label> </div> </li> </ul> <p> ทั้งหมด <strong> {{todolist.length}} </strong>เอฟเฟกต์หน้า
คำอธิบายรหัสโดยละเอียด
ชั้นนอกสุดของรหัสในรหัสสามารถมีผลดีเป็นพื้นที่ชั่วคราวและป้องกันมลพิษเนมสเปซ
(ฟังก์ชั่น (หน้าต่าง) {// เพื่อทำอะไร}) (หน้าต่าง)โปรดทราบว่าหน้าต่างสุดท้าย (หน้าต่าง) ที่ขาดไม่ได้
สร้างแอปพลิเคชัน
// ลงทะเบียนโมดูลหลักของแอปพลิเคชัน
var toDoapp = window.angular.module ('toDoapp', []);
สร้างคอนโทรลเลอร์
toDoApp.Controller ('MainController' // The $ SCOPE ที่นี่ยังมีบทบาทของคอนเทนเนอร์และประกาศช่วงที่มองเห็นได้ของตัวแปร ['$ scope' ฟังก์ชั่น ($ scope) {// ฟังก์ชันของ $ scope คือการเพิ่มองค์ประกอบของ Views // เพิ่มสตริงของรายการ $ scope.todolist = [{text: 'angularjs', ทำ: false}, {text: 'bootstrap', ทำ: false}];}]);ปรับปรุงฟังก์ชั่นฟังก์ชั่น
// เพิ่มฟังก์ชั่นเพื่อตอบสนองต่อการโต้ตอบ $ scope.add = function () {var text = $ scope.text.trim (); if (text) {$ scope.todolist.push ({text: text, done: false}); $ scope.text = ''; }} // คลิกเหตุการณ์ตอบสนอง $ scope.delete = function (toDo) {var index = $ scope.todolist.indexof (toDo) $ scope.todolist.splice (ดัชนี, 1); ปัญหา $ scope.donecount = function () {// ใช้ตัวกรองเพื่อใช้ var temp = $ scope.todolist.filter (ฟังก์ชั่น (รายการ) {return item.done; // return true เพื่อระบุว่าข้อมูลปัจจุบันเป็นไปตามเงื่อนไขและเหตุการณ์เสร็จสิ้น}); ส่งคืนอุณหภูมิความยาว; -สรุป
มีรหัสและความคิดที่ลึกซึ้งไม่มากนัก
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น