AngularJS - แอปพลิเคชันแรก

ก่อนสร้างจริงHello World! แอปพลิเคชันโดยใช้ AngularJS ให้เราดูส่วนต่างๆของแอปพลิเคชัน AngularJS แอปพลิเคชัน AngularJS ประกอบด้วยสามส่วนที่สำคัญดังต่อไปนี้ -

ng-app - คำสั่งนี้กำหนดและเชื่อมโยงแอปพลิเคชัน AngularJS กับ HTML
ng-model - คำสั่งนี้ผูกค่าของข้อมูลแอปพลิเคชัน AngularJS กับตัวควบคุมอินพุต HTML
ng-bind - คำสั่งนี้ผูกข้อมูลแอปพลิเคชัน AngularJS กับแท็ก HTML

การสร้าง AngularJS Application

ขั้นตอนที่ 1: โหลดเฟรมเวิร์ก

เนื่องจากเป็นเฟรมเวิร์ก JavaScript แท้สามารถเพิ่มได้โดยใช้แท็ก <Script>

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

ขั้นตอนที่ 2: กำหนดแอปพลิเคชัน AngularJS โดยใช้คำสั่ง ng-app

<div ng-app = "">
   ...
</div>

ขั้นตอนที่ 3: กำหนดชื่อรุ่นโดยใช้ ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

ขั้นตอนที่ 4: ผูกค่าของโมเดลด้านบนที่กำหนดโดยใช้คำสั่ง ng-bind

<p>Hello <span ng-bind = "name"></span>!</p>

การเรียกใช้แอปพลิเคชัน AngularJS

ใช้สามขั้นตอนดังกล่าวข้างต้นในหน้า HTML

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

เอาต์พุต

เปิดไฟล์testAngularJS.htmในเว็บเบราว์เซอร์ ป้อนชื่อของคุณและดูผลลัพธ์

AngularJS ผสานรวมกับ HTML อย่างไร

คำสั่ง ng-app ระบุจุดเริ่มต้นของแอปพลิเคชัน AngularJS
คำสั่ง ng-model จะสร้างตัวแปรรูปแบบชื่อ name ซึ่งสามารถใช้ได้กับเพจ HTML และภายใน div ที่มีคำสั่ง ng-app
จากนั้น ng-bind จะใช้โมเดลชื่อที่จะแสดงในแท็ก HTML <span> เมื่อใดก็ตามที่ผู้ใช้ป้อนข้อมูลลงในกล่องข้อความ
แท็กปิด </div> ระบุจุดสิ้นสุดของแอปพลิเคชัน AngularJS