Tìm hiểu về Multiple Views và Routing trong Angularjs 1

Bài đăng này đã không được cập nhật trong 7 năm

Đôi khi trong một trang, nhiều khi chúng ta chỉ muốn hiển thị một phần HTML ứng với mỗi chức năng cụ thể mà ta không cần chuyển đổi trang, Angular là một full-stack framework hiệu quả giúp chúng ta có thể làm được việc này nhanh chóng và dễ dàng. Route là bộ điều hướng các yêu cầu từ phía người dùng tới các controller tương ứng để xử lý dựa theo các đối số truyền trên thanh url. Route trong AngularJS là thành phần quan trọng giúp AngularJs tạo được ứng dụng SPA, chuyển trang mà không cần tải lại trình duyệt. Trong AngularJs chúng ta sẽ sử dụng $routeProvider để bắt các yêu cầu. Biểu thức route được tính từ sau dấu #.

1.Multiple Views

Mình có 1 ví dụ đơn giản như sau:

<!doctype html>
<html lang="en" ng-app="demoApp">
<head>
  <meta charset="utf-8">
  <title>Multiple Views and Routing Angularjs 1 </title>
  <script src="js/angular.min.js"></script>
  <script src="js/angular-route.min.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

Từ phiên bản AngularJs 1.0.7 thì Route đã được tách thành một file js riêng biệt, và để sử dụng được nó ta phải nhúng file angular-route.min.js vào ứng dụng. Directive ng-view được sử dụng để hiển thị dữ liệu.OK có rất nhiều bạn khi mới làm quen với angularjs sẽ thắt mắc về directive này mình sẽ giải thích trong bài viết sắp tới nhé ...

2.Routing

Đăng ký biến app thành một module trong AngularJS và thiết lập route cơ bản. Để làm việc với Route thì bạn cần gọi và sử dụng một extends module của angular là ngRoute.

var app = angular.module('demoApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when('/, {
      templateUrl : index.html',
      controller : 'homeController'
    })
    .when('/post/:id', {
      templateUrl : 'detail.html',
      controller : 'postController'
    })
    .otherwise({
      redirect: '/'
    })
}]);

Giải thích nha!! app.config là method cho phép khai báo các Controller, View tương ứng với url Với route thế này thì khi truy cập vào đường dẫn chính của trang web thì trình duyệt sẽ load file index.html và bind nó vào

. Trong route tới chi tiết bài đăng có sử dụng $routeParams service dùng để nhận các đối số là id của bài viết, giúp xác định được chính xác bài viết cần hiển thị. Đường dẫn truy cập tới chi tiết bài đăng sẽ có dạng #/post/id. Trong đó id là id của bài đăng. Khi cấu hình route không cần phải ghi dấu “#”. Khi gặp đường dẫn có dạng #/post/id thì route sẽ gọi tới controller là postController và sử dụng template từ file detail.html.

.when('/post/:id', {
  templateUrl : 'detail.html',
  controller : 'postController'
})

$routeProvider.otherwise xử lý cho route mặc định. Khi đường dẫn không khớp với những route đã được thiết lập thì sẽ được tái điều hướng về trang chủ.

.otherwise({
  redirect: '/'
});

3.Lời kết

Rất cảm ơn các bạn đã đọc bài viết của mình . Với những gì mình vừa chia sẽ mong rằng sẽ giúp được các bạn giải đáp được vấn đề cơ bản về Multiple Views and Routing Angularjs 1. Trong các bài viết sắp tới mình sẽ cố gắng chia sẽ thêm một số kiến thức liên quan đến angularjs 1....

Nguồn tham khảo :

https://docs.angularjs.org/tutorial

1.Multiple Views

2.Routing

3.Lời kết

Nguồn tham khảo :

Mục lục