AngularJS: Routing trong AngularJS


Đăng ký nhận thông báo về những video mới nhất

Module ngRoute sẽ giúp cho ứng dụng của ta trở thành một trang ứng dụng duy nhất.

Routing trong AngularJS là gì?

Nếu bạn muốn điều hướng tới các trang khác nhau trong ứng dụng nhưng bạn chỉ muốn ứng dụng là một Trang Ứng dụng Duy nhất (Single Page Application - SPA) mà không phải load lại trang thì bạn có thể sử dụng module ngRoute.

Module ngRoute sẽ định tuyến (route) ứng dụng của ta tới các trang khác nhau mà không cần tải lại toàn bộ ứng dụng.

Ví dụ

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

<body ng-app="myApp">

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

<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">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>

<p>Click vô các link để điều hướng tới to "red.htm", "green.htm", "blue.htm", hoặc quay lại to "main.htm"</p>
</body>
</html>

Áp dụng

Để áp dụng routing thì ta đưa module AngularJS Route vào như sau:

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

Sau đó bạn phải thêm ngRoute như là một phụ thuộc của module ứng dụng:

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

Bây giờ ta đã có thể truy cập được module route thông qua $routeProvider.

Ta sử dụng $routeProvider để cấu hình các route khác nhau trong ứng dụng:

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

Đích đến của route

Ứng dụng của ta cần phải có một bộ chứa để đẩy nội dung thông qua routing.

Bộ chứa này là chỉ thị ng-view.

Có ba cách khác nhau để đưa chỉ thị ng-view vào ứng dụng của ta thông qua ba ví dụ sau đây.

Ví dụ 1

<div ng-view></div>

Ví dụ 2

<ng-view></ng-view>

Ví dụ 3

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

Ứng dụng chỉ có thể có một chỉ thị ng-view và nó sẽ thay cho tất cả các view được cung cấp bởi route.

$routeProvider

Với $routeProvider ta cho thể chỉ định trang nào được hiển thị khi người dùng nhấn link.

Ví dụ

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

Để định nghĩa $routeProvider thì ta sử dụng phương thức config của ứng dụng. Những gì đã được đăng ký trong phương thức config sẽ được thực hiện khi ứng dụng được load.

Controller

Với $routeProvider bạn cũng có thể chỉ định controller cho mỗi "view".

Ví dụ

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

<body ng-app="myApp">

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

<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>

<p>Click on the links.</p>

<p>Note that each "view" has its own controller which each gives the "msg" variable a value.</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm",
    })
    .when("/london", {
        templateUrl : "london.html",
        controller : "londonCtrl"
    })
    .when("/paris", {
        templateUrl : "paris.html",
        controller : "parisCtrl"
    });
});
app.controller("londonCtrl", function ($scope) {
    $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
    $scope.msg = "I love Paris";
});

</script>

</body>
</html>

"london.html" và "paris.html" là những file HTML, và bạn có thể thêm các biểu thức AngularJS vào giống như những phần HTML khác của ứng dụng AngularJS.

Chẳng hạn các file sẽ như thế này:

london.html

<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.html

<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

Trong những ví dụ trên ta từng sử dụng thuộc tính templateUrl trong phương thức $routeProvider.when.

Bạn cũng có thể sử dụng thuộc tính template để cho phép viết HTML trực tiếp trong giá trị property và không tham chiếu tới trang web.

Ví dụ

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

<body ng-app="myApp">

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

<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>

<p>Click on the links to change the content.</p>

<p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p>

<div ng-view></div>

<script>
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>"
    });
});
</script>

</body>
</html>

Phương thức otherwise()

Trong những ví dụ trên ta đã sử dụng phương thức when của $routeProvider.

Bạn cũng có thể sử dụng phương thức otherwise là phương thức mặc định khi không có sự tương thích (match).

Ví dụ

Nếu "Banana" hoặc "Tomato" không được nhấn thì phương thức otherwise() sẽ được kích hoạt.

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>"
    });
});

Đăng ký nhận thông báo về những video mới nhất
« Prev: AngularJS: Animation trong AngularJS
» Next: AngularJS: Tạo app Angular đơn giản (app shopping cart)
Copied !!!