Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Одностраничные приложения с ngRoute и ngAnimate в AngularJS

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anton Ponomarev (you can also view the original English article)

Одностраничные приложения позволяют обновлять определенную часть веб страницы путем маршрутизации любого контента, хранящегося в отдельном .html файле. Поступая таким образом, вы не перезагружаете вашу главную страницу.

AngularJS предоставляет модуль ngRoute именно для этой цели.

Еще один полезный модуль AngularJS - это ngAnimate, который с легкостью позволяет анимировать определенные классы CSS.

В этом уроке я постараюсь объяснять каждый шаг тщательно, хотя вам все еще будут нужны базовые знания об AngularJS для того, чтобы понимать происходящее.

Начинаем с главной страницы

Основная структура

Файл index.html будет нашей главной страницей, где мы будем иметь как фиксированный контент, так и маршрутизацию контента.

Я начну с базового HTML-документа и включу все необходимые библиотеки наряду с нашими пользовательскими стилями, которые именуются style.css и JavaScript файл angularApp.js.

Теперь добавим два div'а с идентификторами fixedContent и routedContent внутри блока mainWrapper.

routedContent также обернут в другой div, который называется wrapper. Это потому, что routedContent должен быть cпозиционирован абсолютно относительно родительского div'а по причине того, чтобы в ходе маршрутизации анимации, две различные части контента не склеились друг с другом.

Идентификатор fixedContent говорит сам за себя, в этом блоке контент будет статическим на нашей главной странице, а routedContent будет динамически изменяться после взаимодействия с пользователем.

Для того, чтобы обозначить в Angular приложении наш HTML файл, необходимо использовать директиву ng-app. Так как вся страница будет Angular приложением, нам необходимо обозначить данную директиву для div'а mainWrapper.

Также нам пригодится директива ng-view, которая сообщит конкретному div'у отображать динамический контент.

Теперь наш файл index.html выглядит таким образом:

Меню навигации

Нам нужно меню навигации для того, чтобы направить различные части контента в ng-view.

Мы будем использовать теги ul и a для создания простого горизонтального меню. Ниже вы можете увидеть фрагмент HTML кода, отображающего структуру меню.

По умолчанию модуль ng-route использует ! префикс. Однако здесь мы используем только # перед нашими страницами, которые будут изменяться. Это будет сделано с помощью атрибута hashPrefix, используемого в конфигурации, которую я разъясню далее в соответствующем разделе. Сейчас примите это как данное.

Наш окончательный файл HTML выглядит следующим образом:

Дизайн главной страницы

Так как этот урок фокусируется на AngularJS, я не собираюсь подробно описывать стили CSS. Если у вас есть определенные знания по CSS, создайте стиль страницы по своему усмотрению. Либо можно использовать стиль, приведенный ниже.

Страницы, которые будут изменяться

Каждая страница, которая будет маршрутизироваться в div с директивой ng-view внутри главного HTML файла, может иметь уникальную структуру HTML и стиль CSS.

Давайте начнем с page1.html.

Поскольку мы хотим конкретных стилей для каждой страницы, мы должны отделить файлы CSS для каждой страницы. Таким образом мы создаем файл с именем page1.css, который будет содержать правила стилей page1.html.

Базовая структура HTML для page1 выглядит следующим образом:

Наверху мы делаем ссылку на CSS-файл, который будет отвечать за стиль страницы, и мы объявляем div с идентификатором page1, где будет размещен весь контент.

Я буду придерживаться простого оформления, но, как именно структурировать html файл, зависит полностью от вас. Просто всегда держите в памяти, что ваш контейнер должен иметь директиву ng-view. Так что все, что изменяется, будет принадлежать данному div'у.

Стиль page1.html приводится ниже:

Другие три страницы могут быть совершенно разными, но ради простоты я используя тот же шаблон для каждой страницы HTML и немного различные CSS файлы (различные цвета заголовков h1).

page2.html и page2.css

page3.html и page3.css

page4.html и page4.css


Настраиваем ngRoute & ngAnimate в JavaScript

Итак, мы завершили все необходимые действия с файлами HTML и CSS. Теперь пора написать код JavaScript, который будет управлять маршрутизацией и анимацией.

Поскольку наша ng-app директива называется mainApp, мы используем этот идентификатор в функции модуля. Мы также должны включить зависимости ngRoute и ngAnimate.

mainAngular = angular.module('mainApp',['ngRoute', 'ngAnimate']);

Теперь у нас есть доступ к $routeProvider и $locationProvider.

Мы будем использовать $routeProvider для управления маршрутов и $locationProvider, чтобы изменить hashPrefix, который имеет значение ! по умолчанию.

Мы используем .when ('/ page1 ', {templateUrl: 'page1.html'}) для определения страницы, которая будет изменяться, когда ссылка <a href="#page1">Page1</a> будет нажата в главном файле HTML.

Мы повторяем те же строки кода для каждой страницы, к которой будет применена маршрутизация. В конце мы используем .otherwise ({redirectTo: ' / page1 '}), которая обрабатывает имена неожиданных страниц. Если вы попытаетесь посетить неопределенную страницу, скажем, page5, вы будете перенаправлены на page1.

Ниже приведен полный код JavaScript:

Дополнительное примечание: Если вы хотите добавить директиву ng-controller для любых страниц, которые будут изменяться, все это можно обработать внутри $routeProvider.

Пример для page1:

В конце концов наша страница должна выглядеть вот так, и вы должны быть в состоянии перемещаться между страницами с отсутсвием анимации перехода.

Final result after styling and routing

Анимация переходов страницы

Теперь пора для анимации переходов.

Для создания анимации AngularJS имеет встроенные CSS классы благодаря ngAnimate зависимостям.

Вот классы, которые мы собираемся использовать:

  • ng-enter: начальный стиль CSS запуска анимации.
  • ng-enter-active: CSS стиль завершения запуска анимации.
  • ng-leave: начальный стиль CSS для окончания анимации.
  • ng-leave-active: CSS стиль завершения для окончания анимации.

Таким образом перенаправленный контент, который отображается на главной странице имеет переход от ng-enter к ng-enter-active.  Аналогичным образом контент, уходящий с главной страницы имеет переход от ng-leave к ng-leave-active.

Мы должны прикрепить вышеупомянутые классы к нашему классу routedContent.

Ниже приводится пример перехода. Можно разработать свой собственный стиль анимации перехода или использовать один из представленных в файле style.css.

Ниже приведен конечный результат проекта на Plunker.

Заключение

В этом уроке мы рассмотрели способы создания SPA приложений с модулем ng-route AngularJS, и затем мы оживили переходы через CSS классы ng-animate.

Используя всего четыре CSS класса, предоставляемых ng-animate, вы можете достичь большого количества различных вариантов анимации. Вы всегда можете прикрепить дополнительные классы для большего контроля над анимацией перехода. Например, можно настроить переходы страниц с учетом направления.

Я также упомянул, что подключив директиву controller для каждой конкретной страницы внутри $routeProvider, вы можете достичь дополнительного контроля над страницей.

JavaScript с его библиотеками, такими как Angular, стал де-факто одним из языков, работающим в сети Интернет. Без трудностей обучения не обойтись, всегда найдутся фреймворки и библиотеки, которые необходимо освоить. Если вы ищете дополнительные ресурсы для изучения или использования в вашей работе, проверьте то, что доступно на Envato Market.

Я надеюсь, что этот урок дал вам общее представление о том, как использовать модули ng-route и ng-animate вместе.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.