Latest web development tutorials

บทนำ AngularJS

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

AngularJS โดย สั่ง ขยาย HTML และผ่าน การแสดงออกของ ข้อมูลที่เชื่อมโยงกับ HTML

AngularJS เป็นกรอบ JavaScript

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

ไฟล์ AngularJS JavaScript เป็นรูปแบบของการปล่อยอาจจะเพิ่มโดยแท็กสคริปต์ไปยังหน้า:

<script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

หมายเหตุ เราเสนอสคริปต์ที่ด้านล่างของ <body> องค์ประกอบ
ซึ่งจะช่วยเพิ่มความเร็วในการโหลดหน้าเว็บเพราะ HTML ไม่อยู่ภายใต้การโหลดสคริปต์ในการโหลด

รุ่น angular.js ดาวน์โหลดแต่ละ: https://github.com/angular/angular.js/releases

AngularJS ขยาย HTML

AngularJS โดย NG-สั่งขยาย HTML

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

NG-รูปแบบคำสั่งค่าองค์ประกอบ (เช่นค่าของฟิลด์อินพุต) ผูกไว้กับแอพลิเคชัน

คำสั่ง NG-ผูกการผูกข้อมูลการใช้มุมมอง HTML

AngularJS ตัวอย่าง

<! DOCTYPE html>
<html>
<head>
<Meta charset = "UTF-8 ">
<script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ head>
<body>

<div NG-App = "" >
<p> ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "ชื่อ"> </ p>
<h1> สวัสดี {{name} } </ h1>
</ div>

</ body>
</ html>

ลอง»

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

เมื่อเพจมีการโหลด AngularJS โดยอัตโนมัติ

NG-App สั่งบอก AngularJS <div> เป็นโปรแกรม AngularJS ของ "เจ้าของ".

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

คำสั่ง NG-ผูกกับการประยุกต์ใช้ชื่อตัวแปรถูกผูกไว้กับวรรค innerHTML

หมายเหตุ ถ้าคุณเอาคำสั่ง NG-App, HTML จะปรากฏโดยตรงกับการแสดงออกไม่ได้ที่จะประเมินผลการศึกษาการแสดงออกของผลการค้นหา

AngularJS คืออะไร?

AngularJS ทำให้การพัฒนาแอพลิเคชันที่ทันสมัยหน้าเดียว (สปา: การประยุกต์ใช้หน้าเดียว) ได้ง่ายขึ้น

  • AngularJS ข้อมูลการใช้ผูกไว้กับองค์ประกอบ HTML
  • องค์ประกอบ HTML AngularJS สามารถโคลนและทำซ้ำ
  • AngularJS สามารถซ่อนและแสดงองค์ประกอบ HTML
  • AngularJS สามารถเพิ่มรหัสองค์ประกอบ HTML "ที่อยู่เบื้องหลัง."
  • การตรวจสอบข้อมูลสนับสนุน AngularJS

AngularJS สั่ง

ที่คุณสามารถดูคำแนะนำ AngularJS จะนำหน้าแอตทริบิวต์ HTML NG

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

AngularJS ตัวอย่าง

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

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

ลอง»

หมายเหตุ HTML5 ช่วยให้คุณสามารถขยาย (โฮมเมด) คุณสมบัติที่จุดเริ่มต้น DATA-
คุณสมบัติ AngularJS จุดเริ่มต้น ng- แต่คุณสามารถใช้ข้อมูล ng- ที่จะทำให้หน้าเว็บสำหรับ HTML5 ที่ถูกต้อง

ด้วย HTML5 ที่ถูกต้อง:

AngularJS ตัวอย่าง

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

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

ลอง»

การแสดงออก AngularJS

AngularJS การแสดงออกเป็นลายลักษณ์อักษรในวงเล็บปีกกา: {{}} แสดงออก

การแสดงออก AngularJS การผูกข้อมูลเพื่อ HTML ซึ่งคำสั่ง NG-ผูกมีวัตถุประสงค์เดียวกัน

การแสดงออก AngularJS ในตำแหน่งการเขียน "ส่งออก" ข้อมูล

AngularJS แสดงออกเช่นการแสดงออก javascript: พวกเขาสามารถมีข้อความที่ผู้ประกอบการและตัวแปร

ตัวอย่าง 5 + 5 {{}} หรือ {{firstName + "" + นามสกุล}}

AngularJS ตัวอย่าง

<! DOCTYPE html>
<html>
<head>
<Meta charset = "UTF-8">
<script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ head>
<body>

<div NG-App = "">
<p> การแสดงออกครั้งแรกของฉัน: {{5 + 5}} </ p>
</ div>

</ body>
</ html>

ลอง»

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

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

AngularJS ควบคุม (Controller) สำหรับการควบคุมการใช้งาน AngularJS

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

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "firstName"> ฟรี
นามสกุล: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "นามสกุล"> ฟรี
ฟรี
ชื่อ: {{firstName + "" + นามสกุล}}

</ div>

<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'myCtrl' ฟังก์ชั่น ( $ ขอบเขต) {
$ Scope.firstName = "จอห์น";
$ Scope.lastName = "โด";
});
</ script>

ลอง»

นิยามโมดูลการประยุกต์ใช้ AngularJS:

โมดูล AngularJS

var App = angular.module ( 'MyApp' []);

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

AngularJS ควบคุม

app.controller ( 'myCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น";
$ Scope.lastName = "โด";
});

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