ทำตามขั้นตอนด้านล่างเพื่อสร้างแอปพลิเคชัน AngularJS
ขั้นตอนที่ 1: กำลังโหลดเฟรม
เป็นเฟรมเวิร์ก JavaScript บริสุทธิ์สามารถเพิ่มได้โดยใช้แท็ก <Script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script>
ขั้นตอนที่ 2: ใช้คำสั่ง NG-APP เพื่อกำหนดแอปพลิเคชัน AngularJS
<div ng-app = ""> ... </div>
ขั้นตอนที่ 3: ชื่อรูปแบบที่กำหนดด้วย NG-Model Directive
<p> ป้อนชื่อของคุณ: <อินพุต type = "text" ng-model = "name"> </p>
ขั้นตอนที่ 4: ใช้คำสั่ง ng-bind เพื่อผูกคำจำกัดความค่าในโมเดลด้านบน
<p> สวัสดี <span ng-bind = "name"> </span>! </p>
ทำตามขั้นตอนด้านล่างเพื่อเรียกใช้แอปพลิเคชัน AngularJS
ใช้สามขั้นตอนที่กล่าวถึงข้างต้นในหน้า HTML
testangularjs.html
<html> <title> แอปพลิเคชันแรกแอปพลิเคชัน </title> <body> <h1> แอปพลิเคชันตัวอย่าง </h1> <div ng-app = ""> <p> ชื่อของฉัน: <อินพุต type = "text" ng-model = "name"> </p> <p> สวัสดี src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>
เอาท์พุท
เปิด textangularjs.html ในเว็บเบราว์เซอร์ โปรดป้อนชื่อของคุณและดูผลลัพธ์
วิธีการรวม angularJs กับ html
คำสั่ง NG-APP บ่งบอกถึงการเริ่มต้นของแอปพลิเคชัน AngularJS
NG-Model Directive สร้างตัวแปรโมเดลชื่อ "ชื่อ" ในหน้า HTML และมีคำสั่ง NG-APP ที่ใช้ใน DIV
NG-Bind ใช้ชื่อรุ่นตราบใดที่ผู้ใช้ป้อนบางสิ่งในกล่องข้อความจะปรากฏขึ้นในแท็ก HTML Span
แท็ก End </div> หมายถึงจุดสิ้นสุดของแอปพลิเคชัน AngularJS
ข้างต้นเป็นแอปพลิเคชัน AngularJS ที่เรียบง่าย เราจะจัดระเบียบข้อมูลที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้