ສະນັບສິນລະບຸ AngularJS

AngularJS ຖືກກໍານົດວ່າ ບົດສະຫລະ JavaScriptມັດຄູ່ມຂໍ້ມູນສະແນວ HTML.

AngularJS ນຳໃຊ້ຄຳສັ່ງຂະຫຍາຍຄວາມນັບຕັ້ງ HTML ແລະໃຊ້ການສະແດງມັດຄູ່ມຂໍ້ມູນສະແນວ HTML.

AngularJS ຖືກກໍານົດວ່າບົດສະຫລະ JavaScript

AngularJS ຖືກຂຽນໂດຍ JavaScript

AngularJS ຖືກແຈກຢາຍໃຫ້ເປັນບົດສະຫລະ JavaScript ແລະສາມາດເພີ່ມເຂົ້າໃນເວັບໄຊດັງດ້ວຍ ອັບເທມ ອັບເທມ:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

AngularJS ຂະຫຍາຍ HTML

AngularJS ນຳໃຊ້ ng-ຄຳສັ່ງຂະຫຍາຍ HTML.

ng-app ຄຳສັ່ງຈະກໍານົດຄວາມນັບຕັ້ງ AngularJS.

ng-model ຄຳສັ່ງຈະມັດຄູ່ມຄູ່ມວ່າຄູ່ມຄືກັບຄູ່ມຂອງຄວາມນັບຕັ້ງຂອງຄວາມນັບຕັ້ງ

ng-bind ຄຳສັ່ງຈະມັດຄູ່ມຂໍ້ມູນຄວາມນັບຕັ້ງຂອງຄວາມນັບຕັ້ງສະແນວ HTML.

ສາມາດ AngularJS ການປ່ຽນປ່າ

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}
</body>
</html>

<script>

ຄວາມກ່າວຫາວິດີຈະກໍາ:

ເມື່ອເວັບໄຊດັງໄດ້ບັນທຶກໄວ້ແລ້ວ AngularJS ຈະເລີ່ມເຄື່ອນໄຫວອອກມາເອງ.

ng-app ຄຳສັ່ງຈະບອກ AngularJS ວ່າ <div> ສະແນວໄດ້ເປັນ ຄວາມນັບຕັ້ງຂອງ“ເຈົ້າໜຶ່ງ”

ng-model ຄຳສັ່ງຈະມັດຄູ່ມວ່າຄູ່ມຄືກັບຄູ່ມຂອງຄວາມຄວາມນັບຕັ້ງຄວາມນັບຕັ້ງຂອງຄວາມນັບຕັ້ງ name。

ng-bind ຄຳສັ່ງຈະມັດຕິດຂໍ້ມູນຂອງສະມາຊິກ <p> ໃຫ້ກັບຄວຍຄວາມຄິດຂອງຄວຍຄວາມຄິດ. name。

ສາມາດ AngularJS ຄຳສັ່ງ

ຄືກັບທີ່ທ່ານໄດ້ເຫັນ, AngularJS ຄຳສັ່ງຈະມີ ng ສະຖານະປະສາດ HTML ທີ່ມີຄວາມເລື່ອງ.

ng-init ຄຳສັ່ງຈະມີຜົນງານຄວຍຄວາມຄິດຂອງ AngularJS.

ສາມາດ AngularJS ການປ່ຽນປ່າ

<div ng-app="" ng-init="firstName='Bill'">
<p>ຊື່ຂອງທ່ານ <span ng-bind="firstName"></span></p>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}

<script>

ຫຼືໃຊ້ HTML ທີ່ມີຜົນງານ:

ສາມາດ AngularJS ການປ່ຽນປ່າ

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>ຊື່ຂອງທ່ານ <span data-ng-bind="firstName"></span></p>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}

<script>

ຖ້າທ່ານຢາກໃຫ້ HTML ຂອງເວັບໄຊມີຜົນງານ, ທ່ານສາມາດໃຊ້ data-ng- ຕາມດຽວກັນກັບ ng-。

ທ່ານຈະບອກຫຍັງຄຳສັ່ງສະໝັກພາສາຢູ່ທີ່ຫຼັງຂອງຄູຣິນ.

ສາມາດການສະແດງ AngularJS

ຄຳສັ່ງ AngularJS ຂຽນໃນຄຳສວຍບວຍນອກຂອງບວຍນອກຂອງບວຍນອກ:{{ expression }}。

AngularJS ຈະບອກຂໍ້ມູນທີ່ຢູ່ໃນຄຳສັ່ງຄືກັນກັບ

ສາມາດ AngularJS ການປ່ຽນປ່າ

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>ຄຳສັ່ງທີ່ຂ້ອຍພະຍາຍາມ: {{ 5 + 5 }}</p>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}
</body>
</html>

<script>

ຄຳສັ່ງ AngularJS ຈະມັດຕິດຂໍ້ມູນ AngularJS ໃຫ້ HTML, ກັບ ng-bind ກົນວຽກຄຳສັ່ງດຽວກັນ.

ສາມາດ AngularJS ການປ່ຽນປ່າ

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}
</body>
</html>

<script>

ທ່ານຈະບອກຫຍັງຄຳສັ່ງສະໝັກພາສາຢູ່ທີ່ຫຼັງຂອງຄູຣິນ.

ສາມາດ AngularJS ການປ່ຽນປ່າ

AngularJS ສະມາຊິກຄຳສັ່ງສະໝັກຄວຍຕົວແຫຼງ AngularJS.

AngularJS ຄວຍຄວຍຄວາມຄິດຂອງ AngularJS.

ng-app ຄຳສັ່ງສະໝັກຄວຍຕົວແຫຼງ.ng-controller ຄຳສັ່ງສະໝັກຄວຍ.

ສາມາດ AngularJS ການປ່ຽນປ່າ

<div ng-app="myApp" ng-controller="myCtrl">
ຊື່：<input type="text" ng-model="firstName"><br>
姓氏：

ຊື່ສະຕຣັກ: <input type="text" ng-model="lastName"><br>
<br>
ຊື່ສະຕຣັກ: {{firstName + " " + lastName}}
<div>
ການສະແດງຕົວຢ່າງ
var app = angular.module('myApp', []);
  AngularJS ຄວາມຄວຍຄວາມຄອບກວດຄວາມຄວຍຄວາມຄອບຂອງການປ່ຽນປ່າ:
  app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
</div>

<script>

</script>

ສາມາດ AngularJS ຫົວໜ່ວຍ

ການສະແດງຕົວຢ່າງ

AngularJS ຫົວໜ່ວຍການຄວາມຄວຍຄວາມຄອບການປ່ຽນປ່າ:

ສາມາດ AngularJS ຄວາມຄວຍຄວາມຄອບ

var app = angular.module('myApp', []);
  AngularJS ຄວາມຄວຍຄວາມຄອບກວດຄວາມຄວຍຄວາມຄອບຂອງການປ່ຽນປ່າ:
  app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";

$scope.lastName= "Gates";