AngularJS - Навигационное меню
Здравствуйте, будущие веб-разработчики! Сегодня мы окунемся в захватывающий мир AngularJS и узнаем, как создать навигационное меню. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы помочь вам пройти этот путь шаг за шагом. Так что возьмите любимый напиток, устройтесь поудобнее и отправляйтесь в это кодирование приключение вместе со мной!
Что такое навигационное меню?
Прежде чем мы перейдем к коду, давайте на минутку поймем, что такое навигационное меню. Представьте, что вы находитесь в огромной библиотеке с миллионами книг. Как вы найдете нужную книгу? Вы, вероятно, ищете знаки или каталог, правильно? Ну, навигационное меню на сайте как раз такое же, как каталог библиотеки. Оно помогает пользователям легко ориентироваться на вашем сайте.
Почему использовать AngularJS для навигационных меню?
Вы можете задаться вопросом: "Why我应该 использовать AngularJS для своего навигационного меню?" Ну, мой любопытный друг, AngularJS делает создание динамических и интерактивных меню breeze. Это как иметь супер-мощный швейцарский армейский нож для веб-разработки!
Начало работы с навигационным меню AngularJS
Шаг 1: Настройка вашего проекта
Сначала давайте настроим наш проект. Нам нужно включить AngularJS в наш HTML файл. Вот как это делается:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Мое навигационное меню AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Наш контент пойдет сюда -->
<script src="app.js"></script>
</body>
</html>В этом коде мы говорим нашему HTML, что мы используем AngularJS, добавляя ng-app="myApp" к тегу <html>. Мы также включаем библиотеку AngularJS и наш собственный JavaScript файл (app.js), где мы будем писать наш код AngularJS.
Шаг 2: Создание модуля и контроллера AngularJS
Теперь давайте создадим наш модуль и контроллер AngularJS. В вашем файле app.js добавьте следующий код:
var app = angular.module('myApp', []);
app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Домой', url: '#/' },
{ name: 'О нас', url: '#/about' },
{ name: 'Контакт', url: '#/contact' }
];
});Здесь мы создаем модуль AngularJS под названием myApp и контроллер под названием NavController. Контроллер имеет массив элементов меню, которые мы будем использовать для генерации нашего навигационного меню.
Шаг 3: Создание HTML для навигационного меню
Теперь давайте добавим HTML для нашего навигационного меню. Обновите ваш HTML файл, чтобы включить это:
<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>В этом коде мы используем директиву ng-controller, чтобы сказать AngularJS использовать наш NavController. Мы также используем директиву ng-repeat, чтобы循环 по нашим элементам меню и создать элемент списка для каждого из них.
Расширенные функции
Добавление активного состояния элементам меню
Давайте сделаем наше меню немного интереснее, добавив активное состояние для текущей страницы. Обновите ваш контроллер в app.js:
app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Домой', url: '#/' },
{ name: 'О нас', url: '#/about' },
{ name: 'Контакт', url: '#/contact' }
];
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});И обновите ваш HTML:
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>Теперь элемент меню текущей страницы будет иметь класс 'active'.
Создание выпадающего меню
Давайте поднимем планку и добавим выпадающее меню. Обновите ваш контроллер:
$scope.menuItems = [
{ name: 'Домой', url: '#/' },
{
name: 'Услуги',
url: '#/services',
subItems: [
{ name: 'Веб-дизайн', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Контакт', url: '#/contact' }
];И обновите ваш 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>Заключение
И вот оно, друзья! Вы только что создали динамическое, интерактивное навигационное меню с помощью AngularJS. Помните, что практика делает мастера, так что не бойтесь экспериментировать с различными стилями и функциями.
Вот таблица, резюмирующая основные директивы AngularJS, которые мы использовали:
| Директива | Назначение |
|---|---|
| ng-app | Определяет корневой элемент приложения AngularJS |
| ng-controller | Указывает, какой контроллер использовать для HTML элемента |
| ng-repeat | Повторяет набор HTML элементов заданное количество раз |
| ng-class | Динамически связывает один или несколько классов CSS с HTML элементом |
| ng-if | Условно рендерит HTML элемент |
Продолжайте кодить, продолжайте учиться и, самое главное, продолжайте наслаждаться! Until next time, ваш доброжелательный соседский компьютерный учитель подписывается. Счастливого кодирования!
Credits: Image by storyset