Вывод относительного времени в Angular

angular
image-906

Вывод относительного времени стало популярным в последние несколько лет. Это можно увидеть в социальных сетях, таких как Twitter, Facebook и vk.

Например, вместо того, чтобы отображать время записи, как 8:12, время будет отображаться как 3 часа назад.

Это помогает пользователям видеть относительное время и облегчает понимание, как давно было обновление. Мы посмотрим как мы можем достичь этого эффекта в Angular.

Пакеты

Angular уже поставляется с большим количеством фильтров, но чтобы помочь нам справиться с отображением времени и даты, он не подойдет для этих целей с коробки.

Пакет, который поможет нам отображать относительное время — angular-moment. Этот пакет использует библиотеку MomentJS. Если вы не использовали библиотеку раньше, посмотрите ее; она может помочь со всеми видами скриптов, в которых вам приходится работать с датой и временем в JavaScript.

Установка

Есть несколько способов установки этого пакета. В этой статье мы просто подключим через CDNJS.

Все, что мы должны сделать, это добавить следующие строки в нашем проекте:

<!-- подключаем angular -->
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'>
<!-- загрузка momentJS (необходим для angular-moment) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<!-- загрузка angular-moment -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-moment/0.9.0/angular-moment.min.js"></script>
<!-- подключаем языковой файл vjventjs, нужен для русского языка -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/locales.js"></script>

Модель

А нас будет следующий код модуля:

// создание angular приложения
angular.module('timeApp', ['angularMoment'])
// создание angular контроллера
.controller('mainController', function() {
  // связь контроллера с vm (вид-модель)
  var vm = this;
  //устанавливаем русский язык
  moment.locale('ru');
  // создание новой временной переменной с текущей датой
  vm.time = new Date();
});

Мы создали новую переменную времени с использованием new Date(). Вы можете передать дату и время в Date(), чтобы конвертировать ее в объект даты. Наши данные и Angular приложение готово, теперь перейдем к HTML разметке, чтобы увидеть, как мы можем вывести переменную vm.time для наших пользователей.

Вид

Мы должны применить Angular модуль (timeApp) и контроллер (mainController) в нашем приложении:

<!-- добавим наше приложение(модуль) и контроллер-->
<div class="container" ng-app="timeApp" ng-controller="mainController as main">
  <div class="jumbotron">
    <p>Время: {{ main.time }}</p>
  </div>
</div>

7661

С начало мы просто выведем время. Основные способы, которые мы можем использовать в этом пакете являются директивы и фильтры. Давайте их посмотрим.

Методы использования этого пакета

Относительное время — Директива

<time am-time-ago="main.time"></time>

Директива am-time-ago будет автоматически обновлять значение времени. Когда вы первый раз увидите ее, вы увидите несколько секунд назад. Если вы подождете, вы увидите 3 минут назад и тд.

В дополнение к использованию директивы, у нас также есть возможность использовать фильтр при отображении времени.

Формат даты — Фильтр

При использовании фильтра, можно вывести точный формат, который вам нужен:

<time>{{ main.time | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}</time>

Календарный Формат — Фильтр

Третий способ, которым вы можете использовать это календарный формат.

Календарный формат будут отображать различные строки на основе того, насколько близко дата к определенному времени.

<time>{{ main.time | amCalendar }}</time>

Хорошая практика

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

Хорошей практикой при использовании относительного времени, использование title в ваших тегах, так что пользователь имели возможность видеть точное время при наведении мыши.

<time title="{{ main.time | amDateFormat: 'dddd, MMMM Do YYYY, h:mm a' }}">{{ main.time | amCalendar }}</time>

Демо

7661

Вывод

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