Cách sử dụng route trong AngularJS

Sử dụng route trong AngularJS là một tính năng quan trọng giúp cho việc điều hướng trang web trở nên dễ dàng hơn, đồng thời giúp cho việc phát triển ứng dụng web với AngularJS trở nên tiện lợi và đơn giản hơn.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về sử dụng route trong AngularJS, và tại sao nó lại trở thành một phần quan trọng trong việc phát triển ứng dụng web với AngularJS.

Route trong AngularJS là gì?

Route trong AngularJS là một tính năng quan trọng để quản lý điều hướng trang web trong ứng dụng AngularJS. Route giúp định nghĩa các URL mà người dùng có thể truy cập, hiển thị các template tương ứng với URL đó, và chuyển hướng người dùng đến các trang khác trong ứng dụng. Nó cho phép phân chia và quản lý mã nguồn ứng dụng một cách hiệu quả hơn, đồng thời cũng cải thiện trải nghiệm người dùng bởi vì người dùng có thể dễ dàng điều hướng giữa các trang trong ứng dụng. Route là một phần quan trọng của AngularJS và thường được sử dụng trong hầu hết các ứng dụng AngularJS để quản lý điều hướng trang web.

Các tính năng của AngularJS

Two-way data binding: AngularJS cho phép hai chiều kết nối dữ liệu giữa model và view. Khi dữ liệu thay đổi trong model, thì view sẽ được cập nhật tự động và ngược lại. Điều này giúp tiết kiệm thời gian lập trình và giảm thiểu các lỗi trong ứng dụng.

Bài viết này được đăng tại [free tuts .net]

Dependency Injection: Dependency Injection (DI) là một cơ chế quản lý các phụ thuộc của ứng dụng. AngularJS sử dụng DI để cung cấp các thành phần của ứng dụng cho các thành phần khác mà chúng cần sử dụng. Điều này giúp tăng tính tái sử dụng của mã và giảm sự phụ thuộc giữa các thành phần.

Directives: AngularJS cho phép tạo các directive để mở rộng các khả năng của HTML. Directive có thể được sử dụng để định nghĩa các thuộc tính mới, các phần tử mới, hoặc để thay đổi hành vi của các phần tử hiện có. Directive là một tính năng mạnh mẽ của AngularJS giúp tạo ra các ứng dụng web động phức tạp.

Services: AngularJS cung cấp các services để cung cấp các chức năng cho các thành phần khác của ứng dụng. Các services là các thành phần độc lập, có thể được sử dụng để thực hiện các chức năng như lưu trữ dữ liệu, xử lý tệp tin, hoặc gọi các API. Các services có thể được chia sẻ giữa các thành phần khác nhau của ứng dụng.

Filters: AngularJS cung cấp các filters để định dạng dữ liệu hiển thị trên view. Filters có thể được sử dụng để định dạng các số, định dạng ngày tháng, chuyển đổi chữ hoa/chữ thường, hoặc tạo các chuỗi mới từ các chuỗi hiện có. Filters là một tính năng hữu ích của AngularJS để giúp định dạng dữ liệu hiển thị trên view.

Routing: Route trong AngularJS giúp quản lý điều hướng trang web trong ứng dụng AngularJS. Route giúp định nghĩa các URL mà người dùng có thể truy cập, hiển thị các template tương ứng với URL đó, và chuyển hướng người dùng đến các trang khác trong

Route trong AngularJS được sử dụng để làm gì?

Route trong AngularJS được sử dụng để quản lý điều hướng trang web trong ứng dụng AngularJS. Route giúp định nghĩa các URL mà người dùng có thể truy cập, hiển thị các template tương ứng với URL đó, và chuyển hướng người dùng đến các trang khác trong tiếp. Nó cho phép ứng dụng AngularJS có thể đáp ứng và hiển thị nội dung khác nhau trên cùng một trang mà không cần phải tải lại toàn bộ trang web.

Các tính năng của Route trong AngularJS bao gồm định nghĩa các URL, điều hướng người dùng đến các trang khác nhau, hiển thị các template tương ứng với URL, lấy thông tin từ các tham số trên URL và sử dụng các service để lấy dữ liệu cho từng trang.

Sử dụng Route trong AngularJS

Bước 1: Khởi tạo ứng dụng AngularJS với Route

Để cài đặt AngularJS và Angular Route bằng npm, bạn có thể làm như sau:

Mở terminal hoặc command prompt và chạy lệnh sau để cài đặt AngularJS và Angular Route:

npm install angular angular-route

Sau khi cài đặt xong, trong file index.html, thêm các đường dẫn đến AngularJS và Angular Route như sau:

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>

Thêm module "ngRoute" vào ứng dụng

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

Sau khi thực hiện các bước trên, bạn đã có thể sử dụng Angular Route trong ứng dụng của mình.

Bước 2: Cấu hình các route cho ứng dụng

Sử dụng $routeProvider để thiết lập các route. Bạn có thể sử dụng phương thức .when() để định nghĩa các route. Ví dụ:

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'AboutController'
    })
    .otherwise({
      redirectTo: '/'
    });
});

Trong đoạn mã trên, chúng ta định nghĩa 2 route: '/' và '/about'. Nếu người dùng truy cập địa chỉ URL '/', AngularJS sẽ hiển thị nội dung của file home.html và sử dụng HomeController để quản lý dữ liệu trong trang đó. Tương tự, nếu người dùng truy cập địa chỉ URL '/about', AngularJS sẽ hiển thị nội dung của file about.html và sử dụng AboutController để quản lý dữ liệu trong trang đó.

Nếu người dùng truy cập một địa chỉ URL không tồn tại, chúng ta có thể sử dụng phương thức .otherwise() để chuyển hướng người dùng đến một trang mặc định. Trong đoạn mã trên, chúng ta sử dụng phương thức .otherwise() để chuyển hướng người dùng về trang '/'.

Bạn cũng có thể sử dụng các biến truyền vào đường dẫn URL và thêm chúng vào các controller để thực hiện các chức năng động. Ví dụ:

app.config(function($routeProvider) {
  $routeProvider
    .when('/product/:id', {
      templateUrl: 'product.html',
      controller: 'ProductController'
    })
});

Trong đoạn mã trên, chúng ta định nghĩa một route với địa chỉ URL '/product/:id'. Biến ':id' sẽ được truyền vào đường dẫn URL và sử dụng trong controller của trang product.html.

Bước 3: Sử dụng Route để điều hướng trong ứng dụng AngularJS

Để sử dụng các directive như "ng-view" để hiển thị các template của từng route, ta có thể thêm một phần tử HTML với thuộc tính "ng-view" vào template gốc của ứng dụng. Ví dụ:

<body ng-app="myApp">
  <nav>
    <a href="#/">Home</a>
    <a href="#/about">About</a>
    <a href="#/contact">Contact</a>
  </nav>
  <div ng-view></div>
</body>

Ở đây, ta đã thêm một phần tử div với thuộc tính "ng-view" vào body của ứng dụng. Khi người dùng truy cập đến các URL được định nghĩa trong các route, AngularJS sẽ hiển thị template tương ứng trong phần tử div này.

Để sử dụng các thuộc tính như "ng-href" để điều hướng đến các route khác, ta có thể thêm thuộc tính này vào các phần tử HTML liên kết. Ví dụ:

<a href="#/about" ng-href="#/about">About</a>

Ở đây, thuộc tính "ng-href" được sử dụng để đảm bảo rằng AngularJS sẽ xử lý liên kết này và điều hướng đến route tương ứng thay vì thực hiện điều hướng trên máy chủ.

Bước 4: Tạo các component trong AngularJS

Để tạo các component tương ứng với mỗi route, ta có thể sử dụng directive "ngRoute" của AngularJS. Đầu tiên, ta cần định nghĩa các route trong ứng dụng bằng cách sử dụng $routeProvider. Sau đó, ta có thể tạo các component tương ứng với từng route bằng cách sử dụng directive "ng-view" để hiển thị component đó.

Ví dụ, ta có thể định nghĩa các route như sau:

angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home.html',
        controller: 'HomeController'
      })
      .when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
      })
      .when('/contact', {
        templateUrl: 'contact.html',
        controller: 'ContactController'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Ở đây, ta đã định nghĩa ba route: "/", "/about", và "/contact". Mỗi route sẽ hiển thị một template và được điều hướng đến một controller tương ứng.

Sau đó, ta có thể tạo các component tương ứng với từng route bằng cách sử dụng directive "ng-view" trong template của ứng dụng:

<body ng-app="myApp">
  <nav>
    <a href="#/">Home</a>
    <a href="#/about">About</a>
    <a href="#/contact">Contact</a>
  </nav>
  <div ng-view></div>
</body>

Ở đây, ta đã sử dụng directive "ng-view" để hiển thị component tương ứng với route. Khi người dùng truy cập đến các URL được định nghĩa trong các route, AngularJS sẽ hiển thị component tương ứng trong phần tử div này.

Ngoài ra, ta cũng có thể sử dụng directive "ng-include" để chèn component vào template. Directive "ng-include" cho phép ta chèn một template từ một file HTML khác vào template hiện tại. Ví dụ:

<div ng-include="'my-component.html'"></div>

Ở đây, ta đã sử dụng directive "ng-include" để chèn component được định nghĩa trong file "my-component.html" vào template hiện tại.

Kết bài viết

Trong bài viết này, chúng ta đã tìm hiểu về Route trong AngularJS và cách sử dụng nó để quản lý điều hướng trang web trong ứng dụng AngularJS.

Chúng ta đã bắt đầu với việc cài đặt AngularJS và Angular Route bằng lệnh npm, sau đó thêm module "ngRoute" vào ứng dụng. Tiếp theo, chúng ta đã sử dụng $routeProvider để cấu hình các route và thiết lập template cho từng route.

Để hiển thị các template của từng route, chúng ta đã sử dụng directive "ng-view". Nếu muốn chèn component vào template, chúng ta có thể sử dụng directive "ng-include".

Cuối cùng, chúng ta đã sử dụng các thuộc tính như "ng-href" để điều hướng đến các route khác trong ứng dụng.

Tóm lại, Route là một tính năng quan trọng của AngularJS, giúp cho ứng dụng của bạn trở nên linh hoạt hơn và cải thiện trải nghiệm người dùng. Hy vọng với kiến thức được trình bày trong bài viết này, bạn có thể sử dụng Route trong AngularJS một cách hiệu quả và tạo ra những ứng dụng tốt hơn cho người dùng.