ສະແຫວງການຄຳສັ່ງ AngularJS
ອອນກູລJS ອະນຸຍາດທ່ານໃຊ້ຄຳສັ່ງທີ່ເອີ້ນວ່າ “ຄຳສັ່ງປະກອບຕົວເອກະສານ HTML.
ອອນກູລJS ມີຄຳສັ່ງທີ່ຂຽນໃນເອກະສານເພື່ອສະໜອງພາບວຽກສຳລັບຄອມພິວເຕີ້ຂອງທ່ານ.
AngularJS ຍັງອະນຸຍາດໃຫ້ທ່ານກໍ່ອອກຄຳສັ່ງຂອງຕົນເອງ.
ສະແຫວງການຄຳສັ່ງ AngularJS
ຄຳສັ່ງ AngularJS ແມ່ນຄວາມປະກອບ HTML ທີ່ຂະຫຍາຍ, ມີຄວາມກຳນົດມາກ່ອນ ng-。
ng-app ຄຳສັ່ງກຳນົດຄວາມຄວຍ AngularJS.
ng-init ຄຳສັ່ງກຳນົດຂໍ້ມູນຄວາມຄວຍ.
ng-model ຄຳສັ່ງຈະວາງຄຳຂອງ HTML ຄວາມຂັງ (input, select, textarea) ສໍາລັບຂໍ້ມູນຂອງຄວາມປະຈຳການ.
ບໍ່ກັບຄົນຂອງພວກເຮົາອ່ານຂໍ້ມູນຄຳສັ່ງ AngularJS.
ພະຍານ
<div ng-app="" ng-init="firstName='Bill'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
ສອບສວນຕະຫຼອດຕົວຕົນ
ng-app ຄຳສັ່ງຍັງບອກ AngularJS ວ່າ <div> ມີສະຖານະ 'ເຈົ້າຂອງ' ຂອງຄວາມຄວຍ AngularJS.
ການມັດຕິດຂໍ້ມູນ
ໃນຕົວຢ່າງກ່ວ່າ {{ firstName }} ຄຳສັງການສະແດງຂໍ້ມູນທີ່ແມ່ນຄຳສັງການມັດຕິດຂໍ້ມູນ AngularJS.
ການມັດຕິດຂໍ້ມູນ AngularJS ຈະມັດຕິດຄຳສັງການສະແດງຂໍ້ມູນ AngularJS.
{{ firstName }} ກັບ ng-model="firstName" ມັດຕິດພາຍໃນບໍລິໂພກ.
ໃນຕົວຢ່າງຕໍ່ໄປ, ສອງບົດຄວາມທີ່ຖືກມັດຕິດພາຍໃນສອງຄຳສັ່ງ ng-model:
ພະຍານ
<div ng-app="" ng-init="quantity=1;price=5">
ຈຳນວນ: <input type="number" ng-model="quantity">
ລາຄາ: <input type="number" ng-model="price">
ຈຳນວນໃນໂດລາ: {{ quantity * price }}
ສອບສວນຕະຫຼອດຕົວຕົນ
ນຳໃຊ້ ng-init ບໍ່ຄົງຄວາມຍິ່ງ. ທ່ານຈະຮຽນກ່ຽວກັບການກຳນົດຂໍ້ມູນໃນພາກຫົວຄຳສັ່ງຄວາມຄວຍ.
ສ້າງ HTML
ng-repeat ຄຳສັ່ງສະເໜີ HTML
ພະຍານ
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
ສອບສວນຕະຫຼອດຕົວຕົນ
ng-repeat ຄຳສັ່ງພົບຢູ່ໃນຄວາມປະກອບຂອງຄວາມປະກອບສ້າງປະກອບ HTML。
ສຳລັບສາຍລະຫວ່າງ HTML ng-repeat ຄຳສັ່ງ：
ພະຍານ
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
-
{{ x.name + ', ' + x.country }}
ສອບສວນຕະຫຼອດຕົວຕົນ
AngularJS 非常适合数据库 CRUD（创建、读取、更新、删除）应用程序。
想象一下，如果这些对象是来自数据库的记录。
ng-app 指令
ng-app 指令定义 AngularJS 应用程序的根元素。
当加载网页时，ng-app 指令将自动引导（自动初始化）应用程序。
ng-init 指令
ng-init 指令定义 AngularJS 应用程序的初始值。
通常，您不会使用 ng-init。您将改用控制器或模块。
稍后您将了解有关控制器和模块的更多信息。
ຄຳສັ່ງ ng-model
ng-model ຄຳສັ່ງຈະວາງຄຳຂອງ HTML ຄວາມຂັງ (input, select, textarea) ສໍາລັບຂໍ້ມູນຂອງຄວາມປະຈຳການ.
ng-model ຄຳສັ່ງຍັງສາມາດ
- ວາງການວິຊາການຂອງຂໍ້ມູນຂອງຄວາມປະຈຳການ (ຈຳ, ອີເມວ, ຕ້ອງມີຂໍ້ມູນ)
- ວາງສະຖານະຂອງຂໍ້ມູນຂອງຄວາມປະຈຳການຂອງຄວາມປະຈຳການ (ບໍ່ມີຜົນ, ບໍ່ມີຂໍ້ຄວາມ, ໄດ້ຕ້ອງການ, ເລື່ອງບັນຫາ)
- ວາງປະເພດ CSS ສໍາລັບ HTML ຢ່າງ
- ວາງການຕິດຕໍ່ຢ່າງຫນັງວັນທີ່ຈະຕິດຕໍ່ HTML ຟອມຂໍ້ມູນ
ເພື່ອອ່ານຂໍ້ມູນຫຼາຍໃນຫນັງວັນທີ່ຈະອ່ານ ng-model ຂໍ້ມູນຄຳສັ່ງ
ສ້າງຄຳສັ່ງໃໝ່
ນອກຈາກຄຳສັ່ງໃຫຍ່ທີ່ມີຢູ່ແລ້ວ AngularJS ທ່ານສາມາດສ້າງຄຳສັ່ງໃຫຍ່ຂອງຕົນເອງ.
ຄຳສັ່ງໃໝ່ໂດຍນຳໃຊ້ .directive ຈາກການສ້າງ
ເພື່ອເອິ້ນຄຳສັ່ງໃໝ່ທີ່ມີຕົວຂອງຢ່າງດຽວກັນກັບຄຳສັ່ງໃໝ່
ບໍ່ຄວນໃຊ້ຊື່ປະເພດຄຳອັງກິດປະຕິບັດຕາມຈຳນວນຄຳວິທີໃຫຍ່ຫຼືກວ່າຄຳວິທີນ້ອຍw3TestDirective،ແຕ່ຕໍ່ມາຕ້ອງໃຊ້ຊື່ທີ່ແຕກດ້ວຍ -w3-test-directive:
ພະຍານ
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
});
});
</script>
</body>
ສອບສວນຕະຫຼອດຕົວຕົນ
ທ່ານສາມາດໃຊ້ວິທີດັ່ງກ່າວຕໍ່າ:
- ຊື່ຫົວຫົວຢ່າງ
- ປະກອບປະກອບ
- ປະເພດ
- ຄວາມອະທິບາຍ
ຄູ່ມວນຊົນທັງໝົດຈະສ້າງຜົນຄືກັນ:
ຊື່ຫົວຫົວຢ່າງ
<w3-test-directive></w3-test-directive>
ສອບສວນຕະຫຼອດຕົວຕົນ
ປະກອບປະກອບ
<div w3-test-directive></div>
ສອບສວນຕະຫຼອດຕົວຕົນ
ປະເພດ
<div class="w3-test-directive"></div>
ສອບສວນຕະຫຼອດຕົວຕົນ
ຄວາມອະທິບາຍ
<!-- directive: w3-test-directive -->
ສອບສວນຕະຫຼອດຕົວຕົນ
ຈຳກັດ
ທ່ານສາມາດຈຳກັດຄຳສັ່ງຂອງທ່ານເພື່ອພຽງແຕ່ວິທີການບາງໆ.
ພະຍານ
ພາຍໃນການເພີ່ມມູນຄ່າຂອງ "A" ຂອງ restrict ປະສົມ, ຄຳສັ່ງນັ້ນສາມາດເອິ້ນດ້ວຍປະສົມພຽງພໍ:
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
});
});
ສອບສວນຕະຫຼອດຕົວຕົນ
ມັນມີຄວາມທີ່ຖືກຕ້ອງຂອງ restrict ແມ່ນ:
E ສະແຫວງການຊື່ວັດຖຸA ສະແຫວງການຜະສານC ສະແຫວງການວິນຍານM ສະແຫວງການສະແດງຄວາມຄິດ
ຢູ່ດີການດັ່ງກ່າວ EAນີ້ໝາຍຄວາມວ່ານະຄອນຊື່ວັດຖຸແລະນະຄອນລະບຽບກັບຄຳສັ່ງ.
