В предыдущей части этого урока мы реализовали функцию edit и delete сообщений на странице приветствия. В этой части руководства мы добавим индикатор загрузки Ladda в наше приложение. Добавление индикатора загрузки очень важно, поскольку оно делает приложение более интерактивным. Мы также исправим несколько незначительных проблем в процессе обучения.
Начиная
Давайте начнем с клонирования предыдущей части руководства от GitHub .
|
1
|
git clone https://github.com/jay3dec/AngularJS_Firebase_Part6.git
|
После клонирования исходного кода перейдите в каталог проекта и установите необходимые зависимости.
|
1
2
|
cd AngularJS_Firebase_Part6
npm install
|
Как только зависимости установлены, запустите сервер.
|
1
|
npm start
|
Укажите в браузере http: // localhost: 8000 / app / # / home, и приложение должно быть запущено.
Добавление индикатора загрузки Ladda
Ladda — это концепция пользовательского интерфейса, которая объединяет индикатор загрузки с кнопками, делая его интерактивным и удобным для пользователя. С официального сайта Ladda,
Концепция пользовательского интерфейса, которая объединяет индикаторы загрузки с действием, которое их вызывало. В первую очередь предназначен для использования с формами, где он дает пользователям немедленную обратную связь после отправки, а не заставляет их задуматься, пока браузер делает свое дело.
Создание директивы для Ладды
Чтобы использовать Ladda в нашем приложении, мы создадим директиву AngularJS для индикатора загрузки Ladda. Директивы являются одной из основных функций AngularJS, и они контролируют рендеринг HTML внутри приложения.
Откройте app/home/home.js и создайте простую директиву, как показано ниже:
|
1
2
3
4
5
6
7
8
9
|
.directive(‘laddaLoading’, [
function() {
return {
link: function(scope, element, attrs) {
}
};
}
]);
|
Мы запустим и остановим индикатор загрузки login.loading на основе переменной $scope называемой login.loading . Когда значение login.loading равно true, мы покажем индикатор загрузки, а когда значение false, мы остановим индикатор загрузки. Итак, в HomeCtrl определите переменную с именем login и присвойте ее переменной $scope.login .
|
1
2
3
|
var login = {};
$scope.login = login;
|
Затем home/home.html файлы CSS и JavaScript из ladda dist в home/home.html как показано ниже:
|
1
2
3
|
<script type=»text/javascript» src=»spin.min.js»></script>
<script type=»text/javascript» src=»ladda.min.js»></script>
<link href=»ladda-themeless.min.css» rel=»stylesheet»>
|
После добавления приведенных выше ссылок на скрипты и стили измените кнопку « Sign In в home.html как показано:
|
1
|
<button ladda-loading=»login.loading» data-style=»expand-right» ng-disabled=»!user.email || !user.password» type=»button» ng-click=»SignIn($event)» class=»btn btn-lg segoe-ui-light ladda-button btn-primary btn-block»><span class=»ladda-label»>Sign In
|
Как видно из приведенного выше кода, мы добавили директиву laddaLoading к кнопке и передали login.loading . Мы установим и login.loading переданный в login.loading чтобы переключить отображение индикатора загрузки. Мы также добавили определенные стили, segoe-ui-light и ladda-button , для стилизации индикаторов загрузки Ladda.
Теперь внутри функции директивной link добавьте следующий код, чтобы следить за переменной области видимости login.loading и соответственно запускать и останавливать индикатор.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
.directive(‘laddaLoading’, [
function() {
return {
link: function(scope, element, attrs) {
var Ladda = window.Ladda;
var ladda = Ladda.create(element[0]);
// Watching login.loading for change
scope.$watch(attrs.laddaLoading, function(newVal, oldVal) {
// Based on the value start and stop the indicator
if (newVal) {
ladda.start();
} else {
ladda.stop();
}
});
}
};
}
]);
|
Далее, когда пользователь нажимает кнопку « Войти» , нам нужно установить индикатор загрузки. Итак, в HomeCtrl внутри функции SignIn установите для login.loading значение true, чтобы запустить индикатор загрузки.
|
1
|
login.loading = true;
|
Точно так же, когда вызывается обратный вызов при success или failure входе в систему, нам нужно установить login.loading false для login.loading чтобы остановить индикатор загрузки.
|
1
|
login.loading = false;
|
Сохраните все изменения и перезапустите сервер. Введите действующий адрес электронной почты и пароль, и вы сможете увидеть индикатор загрузки в действии.
Точно так же мы можем добавить индикатор загрузки ladda для кнопки Register в register/register.html . Включите необходимые ссылки в register/register.html как показано:
|
1
2
3
|
<script type=»text/javascript» src=»spin.min.js»></script>
<script type=»text/javascript» src=»ladda.min.js»></script>
<link href=»ladda-themeless.min.css» rel=»stylesheet»>
|
Измените кнопку Register , чтобы включить директиву, как показано:
|
1
|
<button type=»button» ladda-loading=»login.loading» data-style=»expand-right» ng-click=»signUp();»
|
Внутри RegisterCtrl добавьте переменную login в login чтобы установить и сбросить индикатор загрузки Ladda.
|
1
2
|
var login={};
$scope.login=login;
|
Теперь, чтобы включить индикатор загрузки, когда пользователь нажимает кнопку « Регистрация» , добавьте следующий код в функцию регистрации.
|
1
|
login.loading = true;
|
Чтобы отключить индикатор загрузки, при success или failure обратном вызове добавьте следующий код.
|
1
|
login.loading = false;
|
Сохраните все изменения и попробуйте зарегистрировать новую учетную запись. При нажатии на кнопку « Регистрация» вы должны увидеть индикатор загрузки.
Точно так же мы можем добавить индикатор загрузки и на страницу добавления поста . Это точно так же, поэтому я не буду повторять это снова. Если вы застряли, посмотрите на исходный код в конце этого урока.
Фильтр статей на странице приветствия
На этом этапе любой зарегистрированный пользователь может добавлять, редактировать и удалять все сообщения в приложении. Но не совсем справедливо разрешать пользователю изменять сообщения других пользователей. Поэтому мы будем фильтровать сообщения, отображаемые на странице приветствия, и отображать только те сообщения, которые были созданы конкретным пользователем.
Для запроса данных из Firebase мы можем использовать API startAt и endAt . Используя startAt и endAt мы можем получить результаты с указанной начальной и конечной точкой. Но данные, которые мы будем передавать с startAt должны быть приоритетными. Итак, сначала нам нужно установить адрес электронной почты в качестве приоритета при передаче данных в Firebase.
Итак, откройте addPost/addPost.js и взгляните на часть, куда мы addPost/addPost.js данные в Firebase.
|
1
2
3
4
5
6
|
fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path(‘/welcome’);
}, function(error) {
console.log(«Error:», error);
});
|
Измените приведенный выше код, чтобы адрес электронной почты был приоритетным при отправке данных.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var user = CommonProp.getUser();
fb.$push({
title: title,
post: post,
emailId: user,
‘.priority’: user
}).then(function(ref) {
console.log(ref);
$location.path(‘/welcome’);
}, function(error) {
console.log(«Error:», error);
});
|
Так что теперь, если мы добавляем сообщение в наше приложение, оно добавляется с приоритетом для адреса электронной почты. Затем откройте файл welcome/welcome.js и посмотрите на часть, где мы создаем объект $firebase WelcomeCtrl в WelcomeCtrl .
|
1
|
var sync = $firebase(firebaseObj);
|
Измените приведенный выше код, добавив методы startAt и endAt в firebaseObj .
|
1
|
var sync = $firebase(firebaseObj.startAt($scope.username).endAt($scope.username));
|
Теперь он будет возвращать только сообщения, добавленные определенным вошедшим пользователем.
Сохраните вышеуказанные изменения и перезагрузите сервер. Удалите все старые сообщения из Firebase. Теперь попробуйте добавить сообщения после входа с действительным адресом электронной почты и паролем. После создания нескольких сообщений попробуйте войти как другой пользователь, и вы не сможете видеть сообщения, созданные предыдущим пользователем.
Вывод
В этом уроке мы увидели, как добавить индикатор загрузки Ladda в наше приложение, чтобы сделать наше приложение более интерактивным. Мы также увидели, как фильтровать результаты данных при извлечении данных из Firebase. В следующей части этой серии мы реализуем функциональность выхода из системы, а также исправим несколько существующих проблем.
Исходный код из этого урока доступен на GitHub . Дайте нам знать ваши мысли, исправления и предложения в комментариях ниже!