AngularJS - Menu điều hướng

Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng nhau lặn vào thế giới thú vị của AngularJS và học cách tạo một menu điều hướng. Là người giáo viên máy tính hàng xóm thân thiện của bạn, tôi ở đây để hướng dẫn bạn từng bước trong hành trình này. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu lập trình này nhé!

AngularJS - Nav Menu

Menu điều hướng là gì?

Trước khi chúng ta nhảy vào mã, hãy dành một chút thời gian để hiểu menu điều hướng là gì. Hãy tưởng tượng bạn đang ở một thư viện khổng lồ với hàng triệu cuốn sách. Bạn sẽ tìm sách như thế nào? Có lẽ bạn sẽ tìm kiếm các biển hiệu hoặc danh mục, phải không? Well, một menu điều hướng trên trang web cũng giống như danh mục thư viện đó. Nó giúp người dùng dễ dàng tìm đường trên trang web của bạn.

Tại sao nên sử dụng AngularJS cho Menu điều hướng?

Bạn có thể tự hỏi, "Tại sao tôi nên sử dụng AngularJS cho menu điều hướng của mình?" Well, AngularJS giúp tạo ra các menu động và tương tác một cách dễ dàng. Nó giống như một cây kéo đa năng siêu mạnh cho phát triển web!

Bắt đầu với Menu điều hướng AngularJS

Bước 1: Thiết lập dự án

Thứ nhất, hãy thiết lập dự án của chúng ta. Chúng ta cần bao gồm AngularJS trong file HTML. Dưới đây là cách chúng ta làm:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Menu điều hướng AngularJS của tôi</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Nội dung của chúng ta sẽ ở đây -->
<script src="app.js"></script>
</body>
</html>

Trong đoạn mã này, chúng ta đang告诉 HTML rằng chúng ta đang sử dụng AngularJS bằng cách thêm ng-app="myApp" vào thẻ <html>. Chúng ta cũng bao gồm thư viện AngularJS và file JavaScript của riêng chúng ta (app.js) nơi chúng ta sẽ viết mã AngularJS.

Bước 2: Tạo Module và Controller của AngularJS

Bây giờ, hãy tạo module và controller của AngularJS. Trong file app.js của bạn, thêm mã sau:

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

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Trang chủ', url: '#/' },
{ name: 'Về chúng tôi', url: '#/about' },
{ name: 'Liên hệ', url: '#/contact' }
];
});

Ở đây, chúng ta đang tạo một module AngularJS có tên myApp và một controller có tên NavController. Controller này có một mảng các mục menu mà chúng ta sẽ sử dụng để tạo menu điều hướng.

Bước 3: Tạo HTML cho Menu điều hướng

Bây giờ, hãy thêm HTML cho menu điều hướng của chúng ta. Cập nhật file HTML của bạn để bao gồm mã sau:

<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>

<script src="app.js"></script>
</body>

Trong đoạn mã này, chúng ta đang sử dụng chỉ thị ng-controller để告诉 AngularJS sử dụng controller NavController. Chúng ta cũng sử dụng chỉ thị ng-repeat để lặp qua các mục menu và tạo một mục danh sách cho từng mục.

Tính năng Nâng cao

Thêm Trạng thái Active cho các Mục Menu

Hãy làm cho menu của chúng ta trở nên tinh tế hơn bằng cách thêm trạng thái active cho trang hiện tại. Cập nhật controller trong app.js:

app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Trang chủ', url: '#/' },
{ name: 'Về chúng tôi', url: '#/about' },
{ name: 'Liên hệ', url: '#/contact' }
];

$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});

Và cập nhật HTML:

<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>

Bây giờ, mục menu của trang hiện tại sẽ có class 'active'.

Tạo Menu Dropdown

Hãy nâng cấp thêm và thêm một menu dropdown. Cập nhật controller:

$scope.menuItems = [
{ name: 'Trang chủ', url: '#/' },
{
name: 'Dịch vụ',
url: '#/services',
subItems: [
{ name: 'Thiết kế Web', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Liên hệ', url: '#/contact' }
];

Và cập nhật HTML:

<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>

Kết luận

Và thế là bạn đã tạo ra một menu điều hướng động, tương tác bằng AngularJS. Nhớ rằng, thực hành làm cho hoàn hảo, vì vậy đừng ngại thử nghiệm với các phong cách và tính năng khác nhau.

Dưới đây là bảng tóm tắt các chỉ thị AngularJS chính chúng ta đã sử dụng:

Chỉ thị	Mục đích
ng-app	Xác định phần tử gốc của ứng dụng AngularJS
ng-controller	Xác định controller nào sẽ được sử dụng cho phần tử HTML
ng-repeat	Lặp một bộ HTML một số lần
ng-class	ĐDynamicically bind one or more CSS classes to an HTML element
ng-if	Điều kiện render một phần tử HTML

Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, đừng bao giờ ngừng vui vẻ! Hẹn gặp lại các bạn, đây là giáo viên máy tính hàng xóm thân thiện của bạn signing off. Chúc các bạn lập trình vui vẻ!

Credits: Image by storyset

Hướng Dẫn Trước:

AngularJS - Ứng dụng In-line

Hướng Dẫn Tiếp Theo:

AngularJS - Thay đổi Menu