กระบวนการทำงานพื้นฐานของเทมเพลตและข้อมูลมีดังนี้:
หน้าแอปพลิเคชันคำขอผู้ใช้เริ่มต้น
เบราว์เซอร์ของผู้ใช้เริ่มต้นการเชื่อมต่อ HTTP ไปยังเซิร์ฟเวอร์จากนั้นโหลดหน้า index.html ซึ่งมีเทมเพลต
Angular ถูกโหลดลงในหน้ารอให้หน้าโหลดและมองหาคำสั่ง NG-APP เพื่อกำหนดขอบเขตของเทมเพลต
เทมเพลตการสำรวจเชิงมุมค้นหาความสัมพันธ์ที่ระบุและผูกพันและจะกระตุ้นการกระทำบางอย่างของคอลัมน์: ลงทะเบียนผู้ฟังดำเนินการ DOM บางอย่างและรับข้อมูลการเริ่มต้นจากเซิร์ฟเวอร์ ในที่สุดแอปพลิเคชันจะเปิดตัวและเทมเพลตจะถูกแปลงเป็นมุมมอง DOM
เชื่อมต่อกับเซิร์ฟเวอร์เพื่อโหลดข้อมูลอื่น ๆ ที่ต้องแสดงต่อผู้ใช้
แสดงข้อความ
หนึ่งใช้ฟอร์ม {{}} เช่น {{คำทักทาย}} ประเภทที่สอง ng-bind = "ทักทาย"
ใช้ประเภทแรกที่ผู้ใช้อาจเห็นได้ ขอแนะนำให้ใช้หน้าดัชนีประเภทที่สองและหน้าส่วนที่เหลือสามารถใช้ประเภทแรก
ฟอร์มอินพุต
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ฟอร์ม </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
ฟังก์ชั่น startupController ($ scope) {
$ scope.funding = {artialestimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
-
$ SCOPE. $ WATCH ('Funding.Startingestimate', Computeneeded); // การเปลี่ยนแปลงของโมเดลนาฬิกา
-
</script>
</head>
<body>
<form ng-controller = "startupcontroller">
เริ่มต้น: <อินพุต ng-change = "computeneeded ()" ng-model = "การระดมทุนเริ่มต้น"> // เรียกฟังก์ชั่นเมื่อเปลี่ยน
คำแนะนำ: {{funding.yeeded}}
</form>
</body>
</html>
ในบางกรณีเราไม่ต้องการเคลื่อนไหวทันทีเมื่อมีการเปลี่ยนแปลง แต่เราต้องรอ ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ฟอร์ม </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
ฟังก์ชั่น startupController ($ scope) {
$ scope.funding = {artialestimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
-
$ SCOPE. $ WATCH ('Funding.StartingEStimate', Computeneeded); // ดูตรวจสอบการแสดงออกและเมื่อการแสดงออกนี้เปลี่ยนฟังก์ชันการโทรกลับจะถูกเรียก
$ scope.requestFunding = function () {
window.alert ("ขออภัยโปรดรับลูกค้าเพิ่มเติมก่อน")
-
-
</script>
</head>
<body>
<form ng-submit = "requestfunding ()" ng-controller = "startupcontroller"> // ng-submit
เริ่มต้น: <อินพุต ng-change = "computeneeded ()" ng-model = "Funding.startingestimate">
คำแนะนำ: {{funding.yeeded}}
<button> กองทุนเริ่มต้นของฉัน! </button>
</form>
</body>
</html>
ปฏิสัมพันธ์ที่ไม่ใช่รูปแบบการส่งให้คลิกเป็นตัวอย่าง
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ฟอร์ม </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
ฟังก์ชั่น startupController ($ scope) {
$ scope.funding = {artialestimate: 0};
computeneeded = function () {
$ scope.funding.needed = $ scope.funding.startingestimate * 10;
-
$ SCOPE. $ WATCH ('Funding.Startingestimate', Computeneeded);
$ scope.requestFunding = function () {
window.alert ("ขออภัยโปรดรับลูกค้าเพิ่มเติมก่อน")
-
$ scope.reset = function () {
$ scope.funding.StartingEStimate = 0;
-
-
</script>
</head>
<body>
<form ng-controller = "startupcontroller">
เริ่มต้น: <อินพุต ng-change = "computeneeded ()" ng-model = "Funding.startingestimate">
คำแนะนำ: {{funding.yeeded}}
<button ng-click = "requestfunding ()"> กองทุนเริ่มต้นของฉัน! </button>
<ปุ่ม ng-click = "reset ()"> รีเซ็ต </ button>
</form>
</body>
</html>
รายการตารางและองค์ประกอบซ้ำอื่น ๆ
NG-Repeat จะส่งคืนหมายเลของค์ประกอบที่อ้างอิงในปัจจุบันผ่านดัชนี $ รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<title> ฟอร์ม </title>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script type = "text/javascript">
var students = [{ชื่อ: 'Mary', คะแนน: 10}, {ชื่อ: 'Jerry', คะแนน: 20}, {ชื่อ: 'Jack', คะแนน: 30}]
ฟังก์ชั่น StudentListController ($ scope) {
$ scope.students = นักเรียน;
-
</script>
</head>
<body>
<table ng-controller = "StudentListController">
<tr ng-repeat = 'นักเรียนในนักเรียน'>
<td> {{$ index+1}} </td>
<td> {{student.name}} </td>
<td> {{student.score}} </td>
</tr>
</table>
</body>
</html>
ซ่อนและแสดง
ฟังก์ชั่น NG-show และ ng-hide นั้นเทียบเท่า แต่เอฟเฟกต์การทำงานนั้นตรงกันข้าม
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script>
ฟังก์ชั่น deathraymenucontroller ($ scope) {
$ scope.menustate = {show: false}; // ถ้าคุณเปลี่ยนเป็น menustate.show = false เอฟเฟกต์จะไม่ปรากฏขึ้น ในอนาคตใส่ตัวแปรใน {}
$ scope.togGlemenu = function () {
$ scope.menustate.show =! $ scope.menustate.show;
-
-
</script>
</head>
<body>
<div ng-controller = 'DeathrayMenucontroller'>
<ปุ่ม ng-click = 'togglemenu ()'> เมนูสลับ </button>
<ul ng-show = 'menustate.show'>
<li ng-click = 'stun ()'> stun </li>
<li ng-click = 'disintegrate ()'> disintegrate </li>
<li ng-click = 'erase ()'> ลบออกจากประวัติศาสตร์ </li>
</ul>
</div>
</body>
</html>
คลาสและสไตล์ CSS
ทั้ง NG-Class และ NG-style สามารถยอมรับนิพจน์และผลลัพธ์ของการดำเนินการแสดงออกอาจเป็นหนึ่งในค่าต่อไปนี้:
สตริงที่แสดงชื่อคลาส CSS คั่นด้วยช่องว่าง
อาร์เรย์ชื่อคลาส CSS
การทำแผนที่ชื่อคลาส CSS กับค่าบูลีน
ตัวอย่างรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<style type = "text/css">
.ข้อผิดพลาด {
พื้นหลังสี: สีแดง;
-
.คำเตือน {
พื้นหลังสี: สีเหลือง;
-
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script>
ฟังก์ชั่น HeaderController ($ SCOPE) {
$ scope.iserror = false;
$ scope.iswarning = false;
$ scope.showerror = function () {
$ scope.messagetext = "ข้อผิดพลาด !!!"
$ scope.iserror = true;
$ scope.iswarning = false;
-
$ scope.showWarning = function () {
$ scope.messagetext = "คำเตือน !!!"
$ scope.iswarning = true;
$ scope.iserror = true;
-
-
</script>
</head>
<body>
<div ng-controller = "HeaderController">
<div ng-class = "{error: iSerror, คำเตือน: iswarning}"> {{messageText}} </div>
<button ng-click = "showerror ()"> ข้อผิดพลาด </button>
<button ng-click = "showwarning ()"> คำเตือน </button>
</div>
</body>
</html>
การทำแผนที่ชื่อคลาส CSS กับค่าบูลีน
รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html ng-app>
<head>
<style type = "text/css">
. เลือก {
พื้นหลังสี: LightGreen;
-
</style>
<script type = "text/javascript" src = "angular.min.js"> </script>
<script>
ฟังก์ชั่นร้านอาหาร ($ SCOPE) {
$ scope.list = [{ชื่อ: "The For มัน", อาหาร: "BBQ"}, {ชื่อ: "Green", อาหาร: "Salads"}, {ชื่อ: "House", อาหาร: 'Seafood'}];
$ scope.selectrestaurant = ฟังก์ชั่น (แถว) {
$ scope.selectedrow = แถว;
-
-
</script>
</head>
<body>
<table ng-controller = "ร้านอาหาร">
<tr ng-repeat = 'ร้านอาหารในรายการ' ng-click = 'selectrestaurant ($ index)' ng-class = '{เลือก: $ index == selectedRow}'> // แผนที่ของชื่อคลาส CSS ถึงค่าบูลีน เมื่อค่าของแอตทริบิวต์โมเดลที่เลือกไว้เท่ากับ $ index ใน ng-repeat สไตล์ selectd จะถูกตั้งค่าเป็นบรรทัดนั้น
<td> {{Restaurant.name}} </td>
<td> {{Restaurant.cuisine}} </td>
</tr>
</table>
</body>
</html>