Kết nối

[AngularJS] Phần 22: Routing

4.770 lượt xem 
 Cập nhật lần cuối: 23/09/2023 lúc 16:06:17
Thể loại: AngularJS, Thiết kế Web 

Module ngRoute giúp chương trình của bạn trở thành ứng dụng trang đơn (single-page application). Ứng dụng trang đơn (single-page application, viết tắt SPA) là một ứng dụng web hay website thích hợp với một trang đơn với mục tiêu cung cấp cho nguồi dùng trải nghiệm thân thiện tương tự như các ứng dụng desktop. Trong 1 ứng dụng SPA, tất cả các mã nguồn HTML, JavaScript, và CSS được truy vấn với việc tải nội dung trang đơn, hay các nguồn thích hợp được tải động và thêm vào trang cần thiết, thường khi có yêu cầu từ người dùng.

LƯU Ý KHI SỬ DỤNG ROUTING TRONG ANGULARJS, BẠN PHẢI CHẠY TRANG WEB Ở WEB SERVER CHẲNG HẠN NHƯ SERVER APACHE HOẶC IIS

Routing
Nếu bạn muốn duyệt nhiều trang khác nhau trong ứng dụng, và bạn cũng muốn ứng dụng là dạng SPA, với không có trang nào tải lên, bạn có thể dùng module ngRoute. Module ngRoute giúp duyệt ứng dụng web tới nhiều trang web khác nhau mà không cần tải lại trang.

Đối với các đường dẫn không chính xác, server sẽ bị treo (vì vòng lặp vô hạn) vì vậy, bạn nên cẩn thận truyền đường dẫn đúng địa chỉ. Khi nào server có hiện tượng đơ thì hãy nhanh chóng tắt trang web đi.


Ví dụ, duyệt các trang “about.html” và “contact.html” trên cùng 1 trang main.html có nội dung sau.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>
<a href="#!about">About</a>
<a href="#!contact">Contact</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/main", {
        templateUrl : "main.html"
    })
    .when("/about", {
        templateUrl : "about.html"
    })
    .when("/contact", {
        templateUrl : "contact.html"
    });
});
</script>

<p>Nhấn vào các liên kết để xem nội dung trang Contact.html và About.html</p>
</body>
</html>

Nội dung trang about.html:

<h1 style="background-color:red">about.html</h1>

Nội dung trang contact.html:

<h1 style="background-color:yellow">contact.html</h1>

Các bước cần làm trong ví dụ trên
Đầu tiên, nhúng module AngularJS Route thông qua tập tin angular-route.js vào ứng dụng.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

Sau đó thêm module ngRoute là 1 phần phụ thuộc của module ứng dụng.

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

Tiếp theo, bạn truy cập module ngRoute thông qua $routeProvider, dùng để cấu hình các đường dẫn khác nhau trong ứng dụng của bạn.

app.config(function($routeProvider) {
  $routeProvider
  .when("/main", {
    templateUrl : "main.html"
  })
  .when("/about", {
    templateUrl : "about.html"
  })
  .when("/contact", {
    templateUrl : "contact.html"
  });
});

Nội dung được hiển thị như thế nào?
Để hiển thị nội dung từ các trang web khác nhau, bạn thêm 1 vùng chứa nội dung. Vùng chứa này là chỉ thị ng-view. Có 3 cách nhúng chỉ thị ng-view vào ứng dụng.

Cách 1: Dùng vùng div

<div ng-view></div>

Cách 2: Dùng thẻ ng-view

<ng-view></ng-view>

Cách 3: Dùng lớp ng-view

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

Ứng dụng chỉ nên có 1 chỉ thị ng-view, vì vậy bạn chỉ dùng 1 trong 3 cách trên, và chỉ thị này sẽ là nơi chứa nội dung các trang khác nhau khi người dùng duyệt web.

Liên quan:  [AngularJS] Phần 15: AngularJS HTML DOM

$routeProvider
$routeProvider định nghĩa trang nào cần hiển thị khi người dùng nhấp chuột. Ví dụ định nghĩa một $routeProvider như sau.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!trang1">Trang 1</a>
<a href="#!trang2">Trang 2</a>

<p>Nhấn vào các liên kết để xem nội dung Trang 1 và Trang 2.</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/main", {
        templateUrl : "main.htm"
    })
    .when("/trang1", {
        templateUrl : "trang1.htm"
    })
    .when("/trang2", {
        templateUrl : "trang2.htm"
    });
});
</script>

</body>
</html>

Định nghĩa $routeProvider bằng cách dùng phương thức config trong ứng dụng của bạn. Sau đó, nội dung phương thức config sẽ chứa định nghĩa khi nào chạy đường dẫn nào thì sẽ hiển thị nội dung trang.

Controller
Với $routeProvider, bạn cũng có thể định nghĩa một controller cho mỗi “view”. Ví dụ thêm các controller.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!trang1">Trang 1</a>
<a href="#!trang2">Trang 2</a>

<p>Nhấn vào các liên kết để xem nội dung Trang 1 và Trang 2. --- dammio.com</p>

<p>Lưu ý mỗi "view" có 1 controller riêng và có chứa giá trị "msg" khác nhau.</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/main", {
        templateUrl : "main.htm"
    })
    .when("/trang1", {
        templateUrl : "trang1.htm",
        controller : "trang1Ctrl"
    })
    .when("/trang2", {
        templateUrl : "trang2.htm",
        controller : "trang2Ctrl"
    });
});
app.controller("trang1Ctrl", function ($scope) {
    $scope.msg = "Day la trang 1 --- dammio.com";
});
app.controller("trang2Ctrl", function ($scope) {
    $scope.msg = "Day la trang 2 --- dammio.com";
});
</script>

</body>
</html>

Nội dung trang1.htm

<h1>Trang 1</h1>
<p>{{msg}}</p>

Nội dung trang2.htm

<h1>Trang 2</h1>
<p>{{msg}}</p>

Template
Trong các ví dụ trước, chúng ta có dùng thuộc tính templateUrl trong phương thức $routeProvider.when. Bạn cũng có thể dùng phương thức này, để định nghĩa trực tiếp mã HTML trong giá trị thuộc tính, thay vì định nghĩa trang.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "<h1>Main</h1><p>Nhan vao cac lien ket de xem su thay doi --- dammio.com</p>"
    })
    .when("/cat", {
        template : "<h1>Cat</h1><p>Cat's content.</p>"
    })
    .when("/dog", {
        template : "<h1>Dog</h1><p>Dog's content</p>"
    });
});

Phương thức otherwise
Bạn cũng có thể dùng phương thức otherwise, để định nghĩa route default nếu không có trang nào khớp với điều kiện routing.

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
   $routeProvider
    .when("/", {
        template : "<h1>Main</h1><p>Nhan vao cac lien ket de xem su thay doi --- dammio.com</p>"
    })
    .when("/cat", {
        template : "<h1>Cat</h1><p>Cat's content.</p>"
    })
    .when("/dog", {
        template : "<h1>Dog</h1><p>Dog's content</p>"
    })
    .otherwise({
        template : "<h1>Trang trong</h1><p>Trang mac dinh, khong co noi dung.</p>"
    });
});

Kết luận: Routing trong AngularJS thường được dùng để xây dựng các ứng dụng trang đơn (SPA) trên thực tế, vì vậy bạn phải nắm vững về Routing. Mời bạn tiếp theo dõi phần tiếp theo.

Trích dẫn bài viết
  • APA:
    Dammio. (2017). [AngularJS] Phần 22: Routing. https://www.dammio.com/2017/09/13/angularjs-phan-22-routing.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[AngularJS] Phần 22: Routing},
    year = {2017},
    url = {https://www.dammio.com/2017/09/13/angularjs-phan-22-routing},
    urldate = {2024-11-07}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Hung
Hung
4 năm trước

có chạy được đâu hả a

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x