เราจะใช้ AngularJs และ Bootstrap เพื่อพัฒนาตัวอย่างแอปพลิเคชันส่วนหน้า ผ่านการฝึกฝนโครงการง่าย ๆ นี้เราจะนำทุกคนเข้าสู่วังแห่งการพัฒนาส่วนหน้าของ AngularJS และแนะนำจุดความรู้บางอย่างให้คุณฟัง:
1. MVC พื้นฐานผ่านตัวอย่างโครงการให้ทุกคนมีความเข้าใจเบื้องต้นเกี่ยวกับการประยุกต์ใช้รูปแบบการออกแบบ MVC
2. สร้างแอปพลิเคชัน AngularJS แรกของเรา ผ่านการพัฒนากรณีการใช้งานจริงทุกคนสามารถได้รับความเข้าใจในการพัฒนาส่วนหน้า
3. ความเข้าใจเบื้องต้นขององค์ประกอบที่สำคัญที่สุดสามประการของ AngularJs คือแบบจำลองมุมมองและคอนโทรลเลอร์
4. ความเข้าใจเบื้องต้นเกี่ยวกับการใช้วัตถุขอบเขต AngularJS
การแนะนำขั้นพื้นฐานเกี่ยวกับโหมด MVC:
MVC เป็นรูปแบบสถาปัตยกรรม UI วัตถุประสงค์ของมันคือการย่อยสลายฟังก์ชั่นของแอปพลิเคชันเป็นโมดูลพิเศษตระหนักถึงความสามารถในการใช้ซ้ำของโมดูลลดการมีเพศสัมพันธ์ระหว่างโมดูลและเพิ่มความทนทานของระบบ โหมด MVC ส่วนใหญ่แบ่งออกเป็นสามส่วน:
รุ่น: ใช้ในการจัดเก็บข้อมูลระบบ
มุมมอง: ใช้เพื่อใช้อินเทอร์เฟซ UI ของระบบ
คอนโทรลเลอร์: ใช้เพื่อเชื่อมต่อโมเดลและมุมมอง
ในความคิดของฉันวิธีที่ดีที่สุดในการเรียนรู้คือการฝึกฝน เราจะพัฒนาตัวอย่างแอปพลิเคชันส่วนหน้า จากตัวอย่างนี้ในอีกด้านหนึ่งเราสามารถเข้าใจกรอบ AngularJS ได้ลึกซึ้งยิ่งขึ้นและในเวลาเดียวกันเรายังสามารถรู้สึกว่าโมเดล MVC ถูกฝังอยู่ในกระบวนการพัฒนาอย่างไร
บทนำแอปพลิเคชัน (เส้นทางรหัส: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
เราจะสร้างเว็บแอปพลิเคชันที่คาดเดาตัวเลขด้วยอินเทอร์เฟซดังนี้:
พื้นหลังแอปพลิเคชันจะสร้างหมายเลขสุ่มแบบสุ่มด้วยช่วง 1 ถึง 1,000 ผู้ใช้จะป้อนหมายเลขที่เดาได้ในกล่องข้อความ หากอินพุตถูกต้องแอปพลิเคชันจะปรากฏขึ้นพร้อมท์สีเขียวด้านล่าง หากไม่ถูกต้องตัวอย่างเช่นหมายเลขอินพุตมีขนาดใหญ่กว่าหรือเล็กกว่าจำนวนที่สร้างขึ้นโดยพื้นหลังแอปพลิเคชันจะปรากฏพร้อมท์ที่สอดคล้องกันเช่น:
ตัวเลขที่แสดงที่ด้านล่างระบุว่าเราเดาได้กี่ครั้ง
โครงสร้างไดเรกทอรีรหัสของแอปพลิเคชันทั้งหมดมีดังนี้:
เนื่องจากเรากำลังทำงานกับตัวอย่างแอปพลิเคชันอย่างง่ายเราจึงรวมรหัสของแต่ละโมดูลเข้าด้วยกัน ในอนาคตเมื่อเราสร้างแอปพลิเคชันส่วนหน้าขนาดใหญ่เราจะระมัดระวังอย่างมากในการจัดเรียงโครงสร้างไดเรกทอรีรหัสของโครงการทั้งหมด
ในองค์ประกอบไฟล์ที่แสดงในรูปด้านบน Angular.js เป็นไฟล์เฟรมเวิร์กที่เราพึ่งพาในการพัฒนาแอปพลิเคชัน, bootstrap.min.css เป็นไฟล์อินเตอร์เฟสไลบรารีที่ใช้ในการออกแบบอินเทอร์เฟซ UI และ numberguessing.html จะเป็นไฟล์แอปพลิเคชันหลัก ต่อไปเราจะเพิ่มรหัสลงใน numberGuessing.html ทีละขั้นตอนและค่อยๆเพิ่มฟังก์ชั่นของแอปพลิเคชัน
ก่อนอื่นสิ่งที่เราต้องทำคือสร้างแม่แบบ HTML อย่างง่าย บนเทมเพลตนี้เราสามารถเพิ่มฟังก์ชั่นได้อย่างช้าๆ รหัสเทมเพลตมีดังนี้:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> เดาหมายเลข! </title> <link href = "bootstrap.min.css src = "angular.js"> </script> </body> </html>
ในรหัสเทมเพลตด้านบนโปรดสังเกตว่ามีบรรทัด "meta ... charset =" utf = 8 "
จุดประสงค์ของบรรทัดนี้คือการเปิดใช้งานเบราว์เซอร์เพื่อแสดงภาษาจีนอย่างถูกต้อง หากบรรทัดนี้ไม่พร้อมใช้งานเบราว์เซอร์จะแสดงภาษาจีน ในเทมเพลตก่อนอื่นเราแนะนำรหัสเฟรมเวิร์กและรหัสห้องสมุดอินเตอร์เฟส UI ที่จะใช้ในภายหลัง หลังจากเสร็จสิ้นเราจะโหลดลงในเบราว์เซอร์เพื่อดูว่ามีข้อผิดพลาดหรือไม่ หากถูกต้องสิ่งที่เราเห็นในปัจจุบันคือช่องว่าง:
ต่อไปเราจะพัฒนารหัสลอจิกพื้นหลังของแอปพลิเคชันและก่อนอื่นเราจะกำหนดตัวแปรสองสามตัวที่จะใช้:
OriginalVal ใช้เพื่อจัดเก็บตัวเลขที่สร้างขึ้นแบบสุ่ม
Userguess เก็บหมายเลขที่ผู้ใช้เข้ามาในปัจจุบัน
numoftries บันทึกจำนวนครั้งที่ผู้ใช้ได้ลอง
การเบี่ยงเบน: บันทึกความแตกต่างระหว่างจำนวนที่ป้อนโดยผู้ใช้และหมายเลขสุ่มพื้นหลัง หากหมายเลขที่ป้อนโดยผู้ใช้มีขนาดใหญ่คำจำกัดความ> 0; อินพุตมีขนาดเล็กคำจำกัดความ <0; หากอินพุตถูกต้องแล้วคำจำกัดความ == 0
การใช้โมดูลคอนโทรลเลอร์
คอนโทรลเลอร์ใช้เพื่อเชื่อมต่อโมดูลทั้งสองของโมเดลและมุมมองและตรรกะทางธุรกิจของระบบยังใช้ในคอนโทรลเลอร์ เมื่อผู้ใช้ทำการดำเนินการบางอย่างบนอินเทอร์เฟซเช่นคลิกปุ่มและป้อนเนื้อหาคอนโทรลเลอร์จะได้รับข้อมูลที่เกี่ยวข้องจากด้านมุมมองจากนั้นคอนโทรลเลอร์จะกระตุ้นตรรกะการประมวลผลเหตุการณ์ที่สอดคล้องกัน ตัวอย่างเช่นผู้ใช้ป้อนหมายเลขในอินเทอร์เฟซและคลิกปุ่ม OK คอนโทรลเลอร์จะได้รับค่าอินพุตจากมุมมองจากนั้นนำหมายเลขสุ่มที่สร้างโดยแอปพลิเคชันจากรุ่นเปรียบเทียบกับ Hatchback สองตัวและส่งกลับผลการเปรียบเทียบไปยังมุมมอง มุมมองแสดงการเปลี่ยนแปลงอินเทอร์เฟซที่สอดคล้องกันตามค่าเบี่ยงเบนที่ส่งคืน มาดูกันว่ามีการใช้งานที่มีเหตุผลของคอนโทรลเลอร์อย่างไร:
ฟังก์ชั่น GuessThenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalVal - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalVal = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); -ฟังก์ชั่น GuessThenumberController ตั้งค่าคุณสมบัติเชิงตัวเลขของวัตถุโมเดล ความหมายของค่าเหล่านี้ได้รับการกล่าวถึงก่อนหน้านี้ ในเวลาเดียวกันฟังก์ชั่นคอนโทรลเลอร์นี้ยังได้รับการเรียกอินเทอร์เฟซสองสายหนึ่งคือ VerifyGuess เมื่อคลิกปุ่มยืนยันบนอินเทอร์เฟซโมดูลมุมมองจะเรียกอินเทอร์เฟซเพื่อตรวจสอบว่าข้อมูลที่ผู้ใช้ป้อนนั้นถูกต้องหรือไม่ ในเวลาเดียวกันการโทรจะอัปเดตค่าของแอตทริบิวต์ทั้งสองเบี่ยงเบนและ numoftries
InitializeGame ใช้เพื่อเริ่มต้นแอปพลิเคชันระบบทั้งหมดก่อนสร้างหมายเลขสุ่มก่อนจากนั้นเริ่มต้นตัวแปรบางอย่างให้ว่างเปล่า
ในฟังก์ชั่นตัวควบคุมของเราจะมีการส่งผ่านขอบเขตพารามิเตอร์ $ พารามิเตอร์นี้จะถูกส่งผ่านให้เราโดย AngularJs โดยทั่วไปจะเทียบเท่ากับ m ในโหมด MVC ซึ่งเป็นรุ่น มันคล้ายกับฐานข้อมูลที่ใช้เป็นพิเศษเพื่อจัดเก็บข้อมูลแอปพลิเคชันและรหัสโลจิคัล อย่างที่คุณเห็นในการเรียกเริ่มต้นการเรียกใช้งานคอนโทรลเลอร์จะวาง numoftries, OriginalVal และข้อมูลอื่น ๆ ลงในวัตถุ $ SCOPE ในการโทร VerifyGeess เขาได้รับข้อมูลเหล่านี้จาก $ SCOPE สำหรับการคำนวณและการปรับเปลี่ยน
หลังจากเพิ่มรหัสคอนโทรลเลอร์ด้านบนลงในไฟล์เทมเพลตของเรา NumberGuessing.html ผลลัพธ์จะเป็นดังนี้:
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> เดาหมายเลข! </title> <link href = "bootstrap.min.css src = "angular.js"> </script> <script type = "text/javaScript"> ฟังก์ชั่นการเดา hexhenumberController ($ scope) {$ scope.verifyguess = function () {$ scope.deviation = $ scope.originalVal - $ scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalVal = math.floor ((math.random () * 1000) + 1); $ scope.userguess = null; $ scope.deviation = null; } $ scope.initializeGame (); } </script> </body> </html>แอพดูแอปพลิเคชันอินเตอร์เฟสการออกแบบ
มุมมองนั่นคือมุมมองใน MVC จริง ๆ แล้วเพื่อแสดงข้อมูลในโมเดลผ่านอินเตอร์เฟสกราฟิก แอปพลิเคชันปัจจุบันของเรานั้นง่ายและขึ้นอยู่กับหลักการของความเรียบง่ายประสบการณ์ผู้ใช้ของการออกแบบอินเตอร์เฟสอาจไม่ดีนัก แต่ก็เพียงพอที่จะเข้าใจวิธีการใช้ AngularJs และ Bootstrap อย่างรวดเร็วเพื่อสร้างอินเทอร์เฟซส่วนหน้าอย่างรวดเร็วสำหรับโปรแกรม
มาดูการก่อสร้างอินเทอร์เฟซและรวมตัวควบคุมและตรรกะอินเตอร์เฟส:
<body ng-app = "app"> <div ng-controller = "GuessThenumberController"> <h2> เดาหมายเลข! </h2> <p> โปรดเดาหมายเลขสุ่มที่สร้างโดยคอมพิวเตอร์ซึ่งมีตั้งแต่ 1 ถึง 1,000 ng-click = "VerifyGuess ()"> ยืนยัน </button> <button ng-click = "InitializeGame ()"> return </button> <p> <p ng-show = "การเบี่ยงเบน <0"> mr. คุณเสนอราคาสูงเกินไป! </p> <p ng-show = "การเบี่ยงเบน> 0"> ผู้ชายของฉันถ้าคุณมีน้อยกว่าเพิ่มคะแนนเพิ่มเพิ่มคะแนนเพิ่มเติม </p> <p ng-show = "การเบี่ยงเบน === 0"> ผู้ชายของฉันคุณทำให้คุณพูดได้อย่างถูกต้อง!
C ใน MVC นั่นคือคอนโทรลเลอร์เป็นสะพานเชื่อมระหว่างอินเทอร์เฟซ (มุมมอง) และข้อมูล (รุ่น) ในการเชื่อมโยงทั้งสามนี้เราจำเป็นต้องฝังทั้งสามของพวกเขาไว้ในกรอบ AngularJS และจากนั้นพึ่งพากลไกกรอบ AngularJS เพื่อให้ได้การเชื่อมต่อระหว่างกันระหว่างทั้งสาม
เพื่อที่จะฝังมุมมองลงใน AngularJS คำสั่งรหัสข้างต้น:
<body ng-app = "app">
NG-APP คุณสมบัตินี้บอก Angular ว่ารหัส HTML ในแท็กตัวถังจะถูกฝังเป็นส่วนมุมมองลงในกรอบ Angulajs และ“ แอพ” ถูกใช้เป็นค่าคุณสมบัติ NG-APP เพื่อแจ้งกรอบ AngularJS เพื่อโหลดโมดูลชื่อ“ แอป” โมดูลนี้เทียบเท่ากับคลังสินค้าที่เก็บข้อมูล เราแบ่งฟังก์ชั่นต่าง ๆ ของแอปพลิเคชันส่วนหน้าออกเป็นหน่วยต่าง ๆ หน่วยเหล่านี้จะถูกเก็บไว้ในโมดูลที่เรียกว่าแอป คอนโทรลเลอร์และรุ่นยังเป็นหน่วยการทำงาน หลังจากนั้นเราจะเห็นว่าพวกเขาจะถูกเพิ่มลงในโมดูลที่เรียกว่าแอป Framework AngularJS จะนำคอนโทรลเลอร์และโมเดลสองหน่วยออกมาจากโมดูลนี้เพื่อใช้งาน
ต่อไปก่อนอื่นเราใส่โมดูลนี้ที่เรียกว่าแอปลงในกรอบ AngularJS รหัสมีดังนี้:
<script type = "text/javascript"> angular.module ('แอพ', []) ฟังก์ชั่นการเดา hexhenumberController ($ scope) {.... } <Script>ด้วยวิธีนี้เรามีโมดูลที่เรียกว่าแอพในกรอบ AngularJS และเราเชื่อมโยงโมดูลกับอินเทอร์เฟซผ่าน NG-APP = "แอป" ต่อไปเราต้องใส่ชุดคอนโทรลเลอร์ลงในโมดูลแอพรหัสมีดังนี้:
<script type = "text/javascript"> angular.module ('แอพ', []). controller ('GuessThenumberController', GuessThenumberController); ฟังก์ชั่น GuessThenumberController ($ scope) {.... } </script>ฟังก์ชั่นเชิงมุมฟังก์ชั่นสร้างและส่งคืนวัตถุโมดูล วัตถุนี้มีอินเทอร์เฟซที่เรียกว่าคอนโทรลเลอร์ ผ่านอินเทอร์เฟซนี้หน่วยการทำงานของคอนโทรลเลอร์ที่เราพัฒนาสามารถวางไว้ในโมดูล จากรหัสด้านบนเราจะเห็นว่าเราใส่ชุดคอนโทรลเลอร์ในโมดูล ชื่อของยูนิตนี้คือ GuessThenumberController ซึ่งเป็นพารามิเตอร์อินพุตแรกของฟังก์ชันคอนโทรลเลอร์ พารามิเตอร์อินพุตที่สองคือตัวตรรกะการทำงานของหน่วยคอนโทรลเลอร์ซึ่งเป็นฟังก์ชั่น GuessThenumberController ที่เราพัฒนาก่อนหน้านี้
หลังจากทำตามขั้นตอนข้างต้นแล้วแอปพลิเคชันของเราจะได้รับการพัฒนา ในเวลานี้ HTML ของเราสามารถโหลดได้จากเบราว์เซอร์เพื่อให้คุณสามารถดูเอฟเฟกต์เฉพาะ
ก่อนสิ้นสุดให้ลึกลงไปในรหัสเพื่อดูว่า AngularJS รวมโมดูลต่างๆเพื่อสร้างแอปพลิเคชันส่วนหน้าอย่างสมบูรณ์ ในรหัสมีสัญลักษณ์และแอตทริบิวต์พิเศษบางอย่างสัญลักษณ์พิเศษเช่น: {{}} และแอตทริบิวต์พิเศษเช่น: NG-APP, NG-Controller ฯลฯ ในบริบทเชิงมุม {{และ}} รวมกันเรียกว่า Angular Converts ตัวแปรที่แซนวิชใน {{และ}} เป็นค่าที่สอดคล้องกับตัวแปรเช่นรหัสตัวอย่างต่อไปนี้:
<p> จำนวนครั้งที่คุณเดาคือ: <span> {{numoftries}} </span> <p>
Numoftries หมายถึงจำนวนครั้งที่ผู้ใช้พยายามเดา หากค่าของ numoftries เป็น 0, AngularJs จะหลบหนีรหัสด้านบนเป็น:
<p> จำนวนครั้งที่คุณเดาคือ: <span> 0 </span> <p>
เบราว์เซอร์จะทำให้อินเทอร์เฟซกับสถานการณ์ต่อไปนี้:
AngularJS Directive เป็นจุดความรู้ทางเทคนิคที่ซับซ้อน ในการสนทนาที่ตามมาเราจะหารืออย่างละเอียด ที่นี่เราแนะนำบทบาทของ AngularJS Directive สั้น ๆ ซึ่งส่วนใหญ่ขยายฟังก์ชันไวยากรณ์ของ HTML คำสั่งเป็นส่วนที่ทรงพลังที่สุดในกรอบ AngularJS มาแนะนำคำสั่ง AngularJS สั้น ๆ ที่ใช้ในรหัส
NG-Controller: คำสั่งนี้เชื่อมต่อคอนโทรลเลอร์และมุมมองที่แสดงโดย HTML เฉพาะกับคำสั่งนี้มุมมองสามารถเข้าถึงตัวแปรและอินเทอร์เฟซที่กำหนดโดยคอนโทรลเลอร์ คุณสามารถลองใส่ในรหัส
ng-model = ng-controller =” GuessThenumberController”
ลบประโยคนี้และดูว่าผลลัพธ์คืออะไร
NG-Model: ตัวแปรผูกแบบสองทิศทางในแบบจำลองที่มีการควบคุมในมุมมองตัวอย่างเช่น:
<อินพุต type = "number" ng-model = "userguess"/>
คำสั่งนี้เชื่อมโยงตัวแปร userguess ในโมเดลกับกล่องข้อความอินพุตบนอินเทอร์เฟซ เมื่อค่าในกล่องข้อความเปลี่ยนแปลงค่าที่สอดคล้องกันของ userguess จะเปลี่ยนแปลงเช่นกัน ในทางตรงกันข้ามหากค่าของการเปลี่ยนแปลงการเปลี่ยนแปลงในพื้นหลังเนื้อหาในกล่องข้อความจะเปลี่ยนไปตาม
NG-CLICK: เชื่อมต่อเหตุการณ์คลิกที่สร้างโดยอินเทอร์เฟซด้วยตรรกะการประมวลผลของคอนโทรลเลอร์ตัวอย่างเช่น:
<button ng-click = "VerifyGuess ()"> ยืนยัน </button>
รหัสด้านบนเชื่อมต่อปุ่ม "ตกลง" คลิกเหตุการณ์ด้วยฟังก์ชั่น VerifyGuess () ของคอนโทรลเลอร์ เมื่อคลิกปุ่มฟังก์ชั่นจะถูกดำเนินการ
NG-Show: ใช้เพื่อควบคุมว่าตัวควบคุมที่ใช้ในการควบคุมมุมมองที่จะแสดงหรือไม่ หากค่าของนิพจน์ที่สอดคล้องกันของ NG-show เป็นจริงการควบคุมจะปรากฏขึ้น หากเป็นเท็จการควบคุมจะไม่ปรากฏขึ้น ตัวอย่างเช่น:
<p ng-show = "การเบี่ยงเบน <0"> mr. การเสนอราคาของคุณสูงเกินไป! </p>
ฟังก์ชั่นของรหัสด้านบนคือเมื่อค่าของคำจำกัดความตัวแปรน้อยกว่า 0 เนื้อหาขององค์ประกอบวรรค P จะแสดงบนอินเทอร์เฟซ
AngularJS เป็นกรอบการพัฒนาส่วนหน้าที่ทรงพลัง แต่ค่อนข้างซับซ้อน บทบาทของตัวอย่างของเราคือการช่วยให้ทุกคนเข้าใจฟังก์ชั่นอันทรงพลังของ AngularJs และได้รับความเข้าใจในการรับรู้เป็นครั้งแรกเพื่อที่จะวางรากฐานที่มั่นคงสำหรับเราในการวิเคราะห์อย่างมีเหตุผลและควบคุมเทคโนโลยีการพัฒนาส่วนหน้า AngularJS ทั้งหมดในอนาคต
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น