Tìm hiểu về Route trong AngularJS

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

Routes trong angularJS cho phép chúng ta tạo các URLs khác biệt trong ứng dụng của chúng ta. Một routes trong url được định nghĩa sau kí hiệu #. Khi đó tất các các url trỏ đến ứng dụng AngularJS là giống nhau nhưng mỗi điểm có sự khác nhau.

ví dụ như

http://localhost:3000/index.html#View1
http://localhost:3000/index.html#View2
http://localhost:3000/index.html#View3
http://localhost:3000/index.html#View4

Khi trình duyệt load các link trên, các ứng dụng của angularJS sẽ được nạp. Tuy nhiên,AngularJS sẽ nhìn vào route(phần trong URL và sau dấu #. để quyết định xem phần html nào được hiển thị.

Và để hiểu rõ hơn về route trong AngularJS, chúng ta cũng tìm hiểu về module ngRoute.

Chúng ta có một ưng dụng AngularJS với cấu trúc như sau:

AngularJS
--index.html
--templates
----pages
      index1.html
      index2.html
----javascript
      routes.js

Để sử dụng ngRoute, chúng ta cần include nó trong file index.html

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>

và cần khai báo ngRoute là module phụ thuộc trong ứng dụng của chúng ta

//routes.js
angular.module('myTest', ['ngRoute']);

$routeProvider provider

Trong các ưng dụng AngularJS, các provider đều được định nghĩa trong module.config. Khi $routeProvider được định nghĩa, chúng ta có thể sử dụng các service mà nó cung cấp là $route service và $routeParams service để định tuyến các thành phần template trong ứng dụng $routeProvider có 2 phương thức chính để định tuyến các thành phần

.when(path, route); : Định nghia một route mới cho $route service
.otherwise(params); : Định nghĩa route sẽ được sử dụng khi gọi một url không tồn tại trong các urls đã được khai báo.

When(path, route)

Phương thức when có 2 tham số chính, tham số đầu tiên là đường dẫn phù hợp với $location.path() phía sau kí hiệu # khi ứng dụng được tải lên. Tham số thứ 2 là một $route với những thuộc tính chính sau

Template: là một chuỗi string bao gồm các thẻ HTML, nội dungcó dạng như sau '<div>noi dung template</div>'.
TemplateUrl: là một đường dẫn hay là một function trả về đường dẫn của một template html. Nếu thuộc tính templateUrl được thiết lập thì angularJS sẽ load view thông qua XHR, và template được nó tìm thấy sẽ được hiển thị trong ng-view directive, đồng thời cũng sử dụng $templateCache để lưu lại cache của template, tránh việc load lại khi gọi lại lần nữa.

angular.module('myTest', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'AngularJS/templates/index1.html',
        controller: 'TemplateController'
      })
  });

Controller: khai báo controller sẽ điểu khiển view tương ứng khi template được tải lên trên trình duyệt. Controller có thể được viết trực tiếp luôn trong này hoặc gọi tên một controller được định nghĩa sẵn.
ControllerAs: định nghĩa tên ngắn gọn(alas name) của một controller. Chúng ta xem controller như là một class khi sử dụng thuộc tính này.

angular.module('myTest', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'AngularJS/templates/index1.html',
        controller: 'TemplateCtrl',
        controllerAs: 'template'
      })
  })
  .controller('TemplateCtrl', function(){
    this.title = 'welcome angular'
  });

trong template index1.html ta sẽ sử dụng controller đã được khai báo

<div> {{template.title}} </div>

redirectTo: chuyển đến một địa chỉ cụ thể. Giá trị của thuộc tính này có thể là một chuỗi hoặc một function. Khi là function, chúng ta có thể truyền các tham số cho nó gồm $routeParams, path...$routeParams được dùng khi chúng ta cần lấy param trên current url để hiển thị hay xử lý dữ liệu.

otherwise(params)

Được dùng để thiết lập định nghĩa đường dẫn sẽ được sử dụng khi url được thay đổi mà không hợp với bất kì đường dẫn đã được định nghĩa.

angular.module('myTest', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'AngularJS/templates/index1.html'
      })
      .otherwise({
         redirectTo: '/'
      });
  });

$routeParams service

$routeParams cho phép chúng ta lấy các tham số đang được thiết lập trên url hiện tại.

giả sử chúng ta cần gọi một url với các thông tin như sau

http://localhost:3000/index.html#pages/12?title=hello

với việc thiết lập route trong AngularJS

angular.module('myTest', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/pages/:pageNumber', {
        controller: 'TemplateCtrl'
      }
      })
      .otherwise({
         redirectTo: '/'
      })
   })
  .controller('TemplateCtrl', function($scope, $routeParams){
     $scope.pageNumber = $routeParams.pageNumber
     $scope.title = $routeParams.title
  });

trên view với việc gọi các scope ra

<div>page : {{ pageNumber }}</div>
<div>title: {{ title }}</div>

sẽ được kết quả như sau

<div>page: 12</div>
<div>title: hello</div>

Như vậy chúng ta đã tìm hiểu các kiến thức cơ bản về route trong AngularJS.

tài liệu tham khảo: http://www.bogotobogo.com/AngularJS/AngularJS_Routing_C.php , AngularJS Route

JavaScript jQuery

Mục lục