ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJSบทนำ

❮ก่อนหน้า ถัดไปบท❯

AngularJS เป็นกรอบ JavaScript มันสามารถเพิ่มไปยังหน้าเว็บ HTML กับ <script> แท็ก

AngularJS ขยายแอตทริบิวต์ HTML ที่มีคำสั่งและข้อมูลที่ผูกเป็น HTML ที่มีการแสดงออก

AngularJS เป็นกรอบ JavaScript

AngularJS เป็นกรอบ JavaScript มันเป็นห้องสมุดที่เขียนใน JavaScript

AngularJS มีการกระจายเป็นไฟล์ JavaScript และสามารถเพิ่มไปยังหน้าเว็บที่มีแท็กสคริปต์:

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

AngularJS ขยาย HTML

AngularJS ขยาย HTML ที่มี NG-สั่ง

สั่ง NG-แอปพลิเคชันกำหนด AngularJS

NG-รูปแบบคำสั่งผูกค่าของการควบคุม HTML (input เลือก textarea) ข้อมูลแอพลิเคชัน

สั่ง NG-ผูกผูกข้อมูลใบสมัครเป็นมุมมอง HTML

ตัวอย่าง AngularJS

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>
ลองตัวเอง»

ตัวอย่างอธิบายว่า:

AngularJS เริ่มทำงานโดยอัตโนมัติเมื่อหน้าเว็บที่มีการโหลด

สั่ง NG-App บอก AngularJS ว่า <div> เป็น "เจ้าของ" ของแอพลิเคชัน AngularJS

NG-รูปแบบคำสั่งผูกค่าของช่องใส่เพื่อชื่อตัวแปรแอพลิเคชัน

สั่ง NG-ผูกผูก innerHTML ของ <p> องค์ประกอบชื่อตัวแปรแอพลิเคชัน

AngularJS Directives

ในขณะที่คุณได้เห็นแล้วสั่ง AngularJS เป็นคุณสมบัติ HTML ที่มีคำนำหน้า NG

สั่ง NG-init เริ่มต้นตัวแปรแอพลิเคชัน AngularJS

ตัวอย่าง AngularJS

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
ลองตัวเอง»

หรืออีกทางหนึ่งด้วย HTML ที่ถูกต้อง:

ตัวอย่าง AngularJS

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
ลองตัวเอง»
บันทึก คุณสามารถใช้ข้อมูล ng- แทน ng- ถ้าคุณต้องการที่จะทำให้ HTML ของหน้าเว็บที่ถูกต้อง

คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับคำสั่งต่อไปในการกวดวิชานี้

AngularJS นิพจน์

AngularJS สำนวนที่ถูกเขียนภายในวงเล็บคู่: {{}} แสดงออก

AngularJS จะ "ส่งออก" ข้อมูลว่าที่แสดงออกเป็นลายลักษณ์อักษร:

ตัวอย่าง AngularJS

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
ลองตัวเอง»

การแสดงออก AngularJS ผูกข้อมูล AngularJS เพื่อ HTML ลักษณะเดียวกับคำสั่ง NG-ผูก

ตัวอย่าง AngularJS

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
ลองตัวเอง»

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับนิพจน์ต่อไปในการกวดวิชานี้

AngularJS การประยุกต์ใช้งาน

โมดูล AngularJS กำหนด AngularJS การใช้งาน

ควบคุม AngularJS ควบคุมการใช้งาน AngularJS

สั่ง NG-App กำหนดโปรแกรมที่สั่ง NG-ควบคุมกำหนดควบคุม

ตัวอย่าง AngularJS

<div ng-app=" myApp " ng-controller=" myCtrl ">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
ลองตัวเอง»

AngularJS โมดูลกำหนดการใช้งาน:

AngularJS โมดูล

var app = angular.module('myApp', []);

AngularJS การควบคุมการควบคุม:

AngularJS ควบคุม

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับโมดูลและควบคุมต่อไปในการกวดวิชานี้


❮ก่อนหน้า ถัดไปบท❯