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

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.

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>

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

<script src="angularApp.js"></script>

</body>
</html>

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

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

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

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

<script src="angularApp.js"></script>

</body>
</html>

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

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

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

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

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent"></div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

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

<script src="angularApp.js"></script>

</body>
</html>

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

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

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

<div id="fixedContent">
    <ul>
        <a href="#page1">Page1</a>
        <a href="#page2">Page2</a>
        <a href="#page3">Page3</a>
        <a href="#page4">Page4</a>
    </ul>
</div>

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

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

<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>
<body>
<div id="mainWrapper" ng-app="mainApp">
    <div id="fixedContent">
        <ul>
            <a href="#page1">Page1</a>
            <a href="#page2">Page2</a>
            <a href="#page3">Page3</a>
            <a href="#page4">Page4</a>
        </ul>
    </div>
    <div id="wrapper">
        <div id="routedContent" ng-view></div>
    </div>
</div>

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

<script src="angularApp.js"></script>

</body>
</html>

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

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

html, body{
    margin: 0;
    padding: 0;
}

#mainWrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px
}

#fixedContent{
    margin-bottom: 50px;
}

#wrapper{
    width: 350px;
}

#routedContent{
    width: 350px;
    position: absolute;
}

ul{
    display: flex;
    justify-content: space-between;
    width: 350px;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #FFFFFF;
    font-family: Arial;

    list-style: none;
    background-color: #cecece;
    padding: 7px 10px;
    border-radius: 2px;
}

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

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

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

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

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

<link href="page1.css" rel="stylesheet">

<div id="page1">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

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

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

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

#page1{
    font-family: Arial;
}

h1{
    color: #ffa42a;
}

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

page2.html и page2.css

<link href="page2.css" rel="stylesheet">

<div id="page2">
    <h1>Page 2</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page2{
    font-family: Arial;
}

h1{
    color: cornflowerblue;
}

page3.html и page3.css

<link href="page3.css" rel="stylesheet">

<div id="page3">
    <h1>Page 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

#page3{
    font-family: Arial;
}

h1{
    color: #b2ce6f;
}

page4.html и page4.css

<link href="page4.css" rel="stylesheet">

<div id="page4">
    <h1>Page 4</h1>
    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

#page4{
    font-family: Arial;
}

h1{
    color: #ff4517;
}

Настраиваем 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:

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

mainAngular.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/page1',{
            templateUrl: 'page1.html'
        })
        .when('/page2',{
            templateUrl: 'page2.html'
        })
        .when('/page3',{
            templateUrl: 'page3.html'
        })
        .when('/page4',{
            templateUrl: 'page4.html'
        })
        .otherwise({
            redirectTo: '/page1'
        });

    $locationProvider.hashPrefix('');

});

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

Пример для page1:

.when('/page1',{
    templateUrl: 'page1.html',
    controller: 'page1Controller'
})

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

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

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

Для создания анимации 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.

#routedContent.ng-enter{
    transform: translateX(-500px);
    opacity: 0;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-enter-active{
    transform: translateX(0px);
    opacity: 1;
}

#routedContent.ng-leave{
    transform: translateX(0);
    opacity: 1;

    -webkit-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -moz-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -ms-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    -o-transition: all 0.35s cubic-bezier(1,.01,0,.99);
    transition: all 0.35s cubic-bezier(1,.01,0,.99);
}

#routedContent.ng-leave-active{
    transform: translateX(500px);
    opacity: 0;
}

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

Заключение

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

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

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

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

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