แอปพลิเคชัน AngularJS
ตอนนี้ถึงเวลาที่จะสร้างเว็บแอปพลิเคชันหน้าเดียวของ AngularJS จริง (SPA)
ตัวอย่างแอปพลิเคชัน AngularJS
คุณได้เรียนรู้เพียงพอเกี่ยวกับ AngularJS และตอนนี้คุณสามารถเริ่มสร้างแอปพลิเคชัน AngularJS แรกของคุณ:
จำนวนคำที่เหลือ: 100
คำอธิบายแอปพลิเคชัน
อินสแตนซ์ Angularjs
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myNotEctl"> <H2> บันทึกของฉัน </h2> <textarea ng-model = "ข้อความ" cols = "40" แถว = "10"> </textarea> <p> <ปุ่ม ng-click = "บันทึก ()" ng-bind = "left ()"> </span> </p> <script src = "myNotEap.js"> </script> <script src = "myNotEctrl.js"> </script> </body> </html>
ผลการทำงาน:
จำนวนคำที่เหลือ: 100
ไฟล์แอปพลิเคชัน "myNotEAPP.JS":
var app = angular.module ("myNoteApp", []);
ไฟล์คอนโทรลเลอร์ "mynotectrl.js":
app.controller ("myNotectrl", ฟังก์ชั่น ($ scope) {$ scope.message = ""; $ scope.left = function () {return 100 - $ scope.message.length;}; $ scope.clear = function () {$ scope.message = ""องค์ประกอบ <html> เป็นคอนเทนเนอร์สำหรับแอปพลิเคชัน AngularJS: ng-app = "MyNotEapp
<html ng-app = "myNoteApp">
<div> คือขอบเขตของคอนโทรลเลอร์ในหน้า HTML: NG-Controller = "MyNotEctrl":
<div ng-controller = "myNotectrl">
คำสั่ง ng-model ผูก <textarea> กับข้อความตัวแปรคอนโทรลเลอร์:
<textarea ng-model = "message" cols = "40" rows = "10"> </textarea>
เหตุการณ์ NG-click สองรายการเรียกฟังก์ชั่นคอนโทรลเลอร์ Clear () และบันทึก ():
<button ng-click = "save ()"> บันทึก </button> <button ng-click = "Clear ()"> ล้าง </duct>
คำสั่ง ng-bind เชื่อมโยงฟังก์ชันคอนโทรลเลอร์ที่ซ้าย () ถึง <span> เพื่อแสดงอักขระที่เหลืออยู่:
จำนวนอักขระที่เหลือ: <span ng-bind = "left ()"> </span>
ไฟล์ไลบรารีแอปพลิเคชันจะต้องมีการโหลดหลังจาก AngularJs สามารถดำเนินการได้:
<script src = "mynoteap.js"> </script> <script src = "mynotectrl.js"> </script>
สถาปัตยกรรมแอปพลิเคชัน AngularJS
ตัวอย่างข้างต้นเป็นแอปพลิเคชันเว็บหน้าเดียวที่สมบูรณ์ (SPA)
องค์ประกอบ <html> ประกอบด้วยแอปพลิเคชัน AngularJS (NG-APP =)
องค์ประกอบ <div> กำหนดขอบเขตของคอนโทรลเลอร์ AngularJS (ng-controller =)
ในแอปพลิเคชันเดียวสามารถสร้างขึ้นจากตัวควบคุมจำนวนมาก
ไฟล์แอปพลิเคชัน (my ... app.js) กำหนดรหัสโมเดลแอปพลิเคชัน
ไฟล์คอนโทรลเลอร์หนึ่งไฟล์ขึ้นไป (ของฉัน ... ctrl.js) กำหนดรหัสคอนโทรลเลอร์
สรุป - มันทำงานอย่างไร?
คำสั่ง NG-APP อยู่ภายใต้องค์ประกอบรูทของแอปพลิเคชัน
สำหรับเว็บแอปพลิเคชันหน้าเดียว (SPA) รูทของแอปพลิเคชันมักจะเป็นองค์ประกอบ <html>
คำสั่ง NG-controller หนึ่งตัวขึ้นไปกำหนดตัวควบคุมของแอปพลิเคชัน คอนโทรลเลอร์แต่ละตัวมีขอบเขตของตัวเอง :: องค์ประกอบ HTML ที่กำหนดไว้
AngularJS เริ่มต้นโดยอัตโนมัติในเหตุการณ์ HTML domcontentloaded หากพบคำสั่ง NG-APP นั้น AngularJS จะโหลดโมดูลในคำสั่งและรวบรวม NG-APP เป็นรูทของแอปพลิเคชัน
รูทของแอปพลิเคชันสามารถเป็นทั้งหน้าหรือส่วนเล็ก ๆ ของหน้าและหากเป็นส่วนเล็ก ๆ มันจะถูกรวบรวมและดำเนินการเร็วขึ้น
ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับแอปพลิเคชันที่เรียบง่ายของ AngularJs ฉันหวังว่ามันจะสามารถช่วยการเขียนโปรแกรม AngularJS