ການຈັດການຕົວແທນ AngularJS

ngRoute ສະມາຊິກຈະນຳພະນັກງານຂອງທ່ານກາຍເປັນ Single Page Application。

ສິ່ງຫຍັງຈະການດໍາເນີນຄືນ Routerໃນ AngularJS?

ຖ້າເຈົ້າຕ້ອງນຳໄປຫາຫົວໜ່ວງຕ່າງໆໃນບັນຊີພະນັກງານແລະຍັງຕ້ອງພະນັກງານເປັນ SPA (Single Page Application) ແລະບໍ່ມີການລະບາຍຫົວໜ່ວງຈາກຫຼັກການໃຊ້ຈະມີສະມາຊິກ ngRoute ສະມາຊິກ。

ngRoute ສະມາຊິກຈະນຳພະນັກງານຂອງທ່ານຕິດຄະນະກັບຫົວໜ່ວງຕ່າງໆໃນຫຼັກການໃຊ້ບໍ່ຕ້ອງເລີ່ມຂຶ້ນຂະບວນຄືນຫຼັກການໃຊ້ໂດຍທັງໝົດ。

ຄວາມນາຍຄາວ

ນຳໄປ "red.htm"、"green.htm" ແລະ "blue.htm":

body ng-app="myApp"
<p><a href="#/!">ເວບໄຊເຮືອນ</a></p>
<a href="#!red">ສີກະສັດ</a>
<a href="#!green">ສີຂຽວ</a>
<a href="#!blue">ສີຟ້າ</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  });
  .when("/red", {
    templateUrl : "red.htm"
  });
  .when("/green", {
    templateUrl : "green.htm"
  });
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

ທ່ານຈະຕ້ອງພະຍາຍາມ

ຂ້ອຍຕ້ອງຫາຫຍັງ?

ເພື່ອສະແດງຄອມພິວເຕີຂອງທ່ານໃຫ້ມີຄວາມພ້ອມສຳລັບການນຳໃຊ້ຄວາມຄວຍກຳຫນົດສາຍງານ，ທ່ານຕ້ອງບັນຈຸ

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

ຫຼັງຈາກນັ້ນ，ທ່ານຕ້ອງ ngRoute ການເພີ່ມຄວາມຄວຍກຳຫນົດໃຫ້ກັບຄອມພິວເຕີຂອງທ່ານ:

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

ປັດຈຸບັນຄອມພິວເຕີຂອງທ່ານສາມາດເຂົ້າເຖິງຂັ້ນຕົ້ນຂອງຄວາມຄວຍກຳຫນົດ. $routeProvider ຄວາມຄວຍກຳຫນົດຕາມສານ.

ພວກເຈົ້າຄວນນຳໃຊ້ $routeProvider ການການຕິດຕັ້ງຄວາມຄວຍກຳຫນົດຫຼາກຫຼາຍໃນຄອມພິວເຕີ.

app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  });
  .when("/red", {
    templateUrl : "red.htm"
  });
  .when("/green", {
    templateUrl : "green.htm"
  });
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

ມັນຍັງຢູ່ບ່ອນໃດ?

ຄອມພິວເຕີຂອງທ່ານຕ້ອງມີບັນດາບັນນາທິການເພື່ອບັນຈຸຂັ້ນຕົ້ນຂອງຄວາມຄວຍກຳຫນົດ.

ຄວາມຄວຍກຳຫນົດນີ້ແມ່ນ ng-view

ຄວາມຄວຍກຳຫນົດສາມາດບັນຈຸໃນຄອມພິວເຕີໃຫ້ສາມາດມີສາມສະຖານະການທີ່ແຕກຕ່າງກັນ. ng-view ຄວາມຄວຍກຳຫນົດ:

ຄວາມນາຍຄາວ

<div ng-view></div>

ທ່ານຈະຕ້ອງພະຍາຍາມ

ຄວາມນາຍຄາວ

<ng-view></ng-view>

ທ່ານຈະຕ້ອງພະຍາຍາມ

ຄວາມນາຍຄາວ

<div class="ng-view"></div>

ທ່ານຈະຕ້ອງພະຍາຍາມ

ຄອມພິວເຕີສາມາດມີຄວາມຄວຍກຳຫນົດພຽງຄົນຫນື່ງ. ng-view ຄວາມຄວຍກຳຫນົດ

$routeProvider

ນຳໃຊ້ $routeProviderພວກເຈົ້າສາມາດອອກຄວາມຄວຍກຳຫນົດສຳລັບຂະແໜງທີ່ຈະສະແດງໃນເວລາທີ່ຜູ້ນຳໃຊ້ຫາກຈະຄົ້ນຫາການເຊື່ອມຕໍ່ຂອງຫົວລະຄອນ.

ຄວາມນາຍຄາວ

ການອອກຄວາມຄວຍກຳຫນົດ $routeProvider:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  });
  .when("/london", {
    templateUrl : "london.htm"
  });
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

ທ່ານຈະຕ້ອງພະຍາຍາມ

ນຳໃຊ້ຄວາມຄວຍກຳຫນົດຂອງຄອມພິວເຕີ. config ການອອກຄວາມຄວຍກຳຫນົດ $routeProviderຈະດຳເນີນພາຍໃນຂັ້ນຕອນເລີ່ມຕົ້ນຂອງຄອມພິວເຕີພວກເຈົ້າ. config ພວກມັນເປັນວຽກງານທີ່ລົງທະບຽນໃນເວລາທີ່ນຳໃຊ້ຄວາມຄວຍກຳຫນົດ.

ຄວາມຄວຍກຳຫນົດ

ນຳໃຊ້ $routeProviderພວກເຈົ້າອາດອອກຄວາມຄວຍກຳຫນົດສຳລັບ "ບັນຫາ" ທັງໝົດ.

ຄວາມນາຍຄາວ

ເພີ່ມຄວາມຄວຍກຳຫນົດ:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  });
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  });
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  var $scope.msg = "ຂ້ອຍມັກລອນດອນ";
});
app.controller("parisCtrl", function ($scope) {}}
  $scope.msg = "I love Paris";
});

ທ່ານຈະຕ້ອງພະຍາຍາມ

"london.htm" ແລະ "paris.htm" ແມ່ນສະບັບ HTML ທຳມະດາ, ທ່ານສາມາດເພີ່ມ AngularJS Expression ໃຫ້ໃນສ່ວນ HTML ອື່ນຂອງການສະແດງ AngularJS.

ສະບັບຟາມນີ້ບາງຄັ້ງ:

london.htm

<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>

paris.htm

<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>

template

ໃນຄວາມນາຍຄາວກ່ອນໜ້ານີ້, ພວກເຮົາໃນ $routeProvider.when ກົນລະບຽບ templateUrl template

ທ່ານສາມາດໃຊ້ ປະສົງ ປະສົງ, ທີ່ອະນຸຍາດທ່ານທີ່ຈະຂຽນ HTML ພາຍໃນຄຸນພາສາຂອງປະສົງ, ທີ່ບໍ່ຕ້ອງອ້າງເວັບໄຊ.

ຄວາມນາຍຄາວ

ຂຽນຮູບແບບ:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Click on the links to change this content</p>"
  });
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  });
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  });
});

ທ່ານຈະຕ້ອງພະຍາຍາມ

ກົນລະບຽບ otherwise

ໃນຄວາມນາຍຄາວກ່ອນໜ້ານີ້, ພວກເຮົາໃຊ້ $routeProvider ກົນລະບຽບ when.

ທ່ານສາມາດໃຊ້ otherwise ກົນລະບຽບ, ເມື່ອບໍ່ມີກົນລະບຽບອື່ນໆທີ່ຈະຕົກຮອງ, ມັນຈະກາຍເປັນກົນລະບຽບສະບັບທີ່ຜົນສົມບູນ.

ຄວາມນາຍຄາວ

ຖ້າບໍ່ມີການກະທັບ "Banana" ລາຍການຫຼື "Tomato" ລາຍການ, ບອກພວກເຂົາວ່າ:

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
  $routeProvider
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  });
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  });
  .otherwise({
    template : "<h1>None</h1><p>Nothing has been selected</p>"
  });
});

ທ່ານຈະຕ້ອງພະຍາຍາມ