Этот урок связан с проектом Создание приложения на AngularJS и Firebase

Создание приложения на AngularJS и Firebase: Часть 6

В прошлом уроке мы осуществили вывод списка постов на главной странице нашего блога. В этой части займёмся реализацией редактирования и удаления постов.

Стартуем

Начнём с копирования кода предыдущего урока (GitHub).

git clone https://github.com/jay3dec/AngularJS_Firebase_Part5.git

После копирования, отправляемся в каталог проекта и устанавливаем все зависимости.

cd AngularJS_Firebase_Part5
npm install

Запускаем сервер.

npm start

Отправляемся по адресу http://localhost:8000/app/#/home и видим наше приложение.

Редактирование поста

Шаг 1: Добавление кнопок редактирования и удаления

Начнём с добавление кнопок для удаления и редактирования записей. В прошлом уроке мы вывели все посты на главной странице. Давайте добавим кнопки Edit и Delete.

Отправляемся в app/welcome/ и открываем welcome.html. Воспользуемся компонентом bootstrap list-group. Добавьте следующий HTML код (компонент list-group) для отображения кнопок Edit и Delete.

<div class="list-group" ng-repeat="article in articles">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">{{article.title}}</h4>
        <p class="list-group-item-text">{{article.post}}</p>

        <span class="pull-right">
      <button class="btn btn-xs btn-info">EDIT</button>
      <button class="btn btn-xs btn-warning">DELETE</button>
    </span>
    </a>
</div>

Сохраняем изменения и перезапускаем сервер. Войдите на сайт, используя логин и пароль:

Шаг 2: Показ всплывающего окна при клике по кнопке редактирования

Для вызова всплывающего окна воспользуемся соответствующим компонентом Bootstrap JavaScript. Для этого подключим соответствующие скрипты jQuery и Bootstrap в index.html.

<script src="https://code.jquery.com/jquery-2.0.1.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

После это вставьте следующий HTML код в app/welcome/welcome.html.

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">Update Post</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Title:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Post:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Publish</button>
            </div>
        </div>
    </div>
</div>

Далее преобразуйте кнопку Edit, добавив атрибуты data-toggle и data-target для отображения всплывающего окна при клике.

<button class="btn btn-xs btn-info" data-toggle="modal" data-target="#editModal">EDIT</button>

В атрибуте data-target мы указываем ID HTML элемента, который должен быть показан в модальном окне.

Так же добавьте атрибут onclick кнопке Edit:

<a href="#" onclick="return false;" class="list-group-item active">

Сохраните изменения, перезапустите сервер, авторизируйтесь. На главной странице нажмите на одну из кнопок Edit. Результат будет следующий.

Шаг 3: Заполнения модального окна

У каждой записи в Firebase есть свой ID, который можно использовать для извлечения отдельной записи. Давайте осуществим вывод идентификаторов:

<div class="list-group" ng-repeat="article in articles">
    <a href="#" onclick="return false;" class="list-group-item active">
        <h4 class="list-group-item-heading">{{article.title}}</h4>
        <p class="list-group-item-text">{{article.post}}</p>

        <span class="pull-right">
      <button class="btn btn-xs btn-info" data-toggle="modal" data-target="#editModal">EDIT</button>
      <button class="btn btn-xs btn-warning" >DELETE</button>
    </span>
    </a>
</div>

Удаляем data-toggle="modal" из кнопки Edit. Вызывать модальное окно будем через контроллер.

Внутри app/welcome/welcome.js добавьте функцию editPost, которую будем вызывать при клике по кнопке Edit. В прошлый раз мы использовали Firebase URL https://blistering-heat-2473.firebaseio.com/Articles для извлечения всех записей. Для извлечения какой-то отдельной записи следует использовать следующий URL https://blistering-heat-2473.firebaseio.com/Articles/-JdMk7taYJCLZg9DfMJg.

Теперь давайте создадим объект Firebase, используя конкретный ID, а затем осуществим выборку. Вот так будет выглядеть функция editPost:

$scope.editPost = function(id) {

    var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com/Articles/" + id);

    var syn = $firebase(firebaseObj);

    $scope.postToUpdate = syn.$asObject();

    $('#editModal').modal();      // triggers the modal pop up
}

Откройте welcome.html и добавьте атрибут ngClick кнопке Edit. При добавлении функции ngClick к editPost передайте уникальный ID статьи как показано ниже:

<button class="btn btn-xs btn-info" ng-click="editPost(article.$id)" data-target="#editModal">EDIT</button>

Далее нам нужно заполнить информацией модальное окно. Поскольку полученные данные хранятся в $scope.postToUpdate, то забиндим атрибуты, используя ngModel. Добавляем директиву ngModel к post и title, как показано ниже:

<input type="text" class="form-control" ng-model="postToUpdate.title" id="recipient-name">

<textarea class="form-control" id="message-text" ng-model="postToUpdate.post"></textarea>

Сохраните все изменения и перезапустите сервер. Осуществляем вход, используя логин и пароль. После этого нажмите на кнопку Edit. В результате вы должны увидеть примерно следующее.

Шаг 4: Реализация обновления информации

Далее давайте реализуем само обновление данных. Сохранение изменённых данных должно осуществляться после клика на кнопку Publish. После этого данные должны быть отправлены на Firebase.

Добавим атрибут ngClick к кнопке Publish.

<button type="button" class="btn btn-primary" ng-click="update()">Publish</button>

Откройте app/welcome/welcome.js и добавьте функцию update, которая будет вызвана при клике по кнопке Publish. Внутри функции обновления мы создадим Firebase объект и отправим данные на Firebase URL с уникальным идентификатором ID.

var fb = new Firebase("https://blistering-heat-2473.firebaseio.com/Articles/"+$scope.postToUpdate.$id);

Используем объект fb, создаём $firebase.

var article = $firebase(fb);

Используя объект article мы можем задействовать API для обновления информации в Firebase.

article.$update({
    title: $scope.postToUpdate.title,
    post: $scope.postToUpdate.post,
    emailId: $scope.postToUpdate.emailId
}).then(function(ref) {
    // Update successful
}, function(error) {
    console.log("Error:", error);
});

Если обновление прошло успешно, то закрываем модальное окно. Добавьте следующий код колбэка.

$('#editModal').modal('hide');

Вот полная версия функции update:

$scope.update = function() {
    var fb = new Firebase("https://blistering-heat-2473.firebaseio.com/Articles/" + $scope.postToUpdate.$id);
    var article = $firebase(fb);
    article.$update({
        title: $scope.postToUpdate.title,
        post: $scope.postToUpdate.post,
        emailId: $scope.postToUpdate.emailId
    }).then(function(ref) {
        $('#editModal').modal('hide');
    }, function(error) {
        console.log("Error:", error);
    });
}

Сохраняем изменения и перезапускаем сервер. Редактируем какой-то пост и смотрим на результат.

Удаление поста

Далее давайте реализуем функционал удаления поста. Перед самим удалением выведем окно для подтверждения операции.

Шаг 1: Показ окна подтверждения удаления

И снова задействуем Bootstrap. Добавьте следующий HTML код в welcome.html:

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align:center;">
                <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this post forever !!</h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" ng-click="update()">Delete</button>
            </div>
        </div>
    </div>
</div>

Теперь добавьте в кнопку Delete атрибуты: data-toggle и data-target:

<button class="btn btn-xs btn-warning" data-toggle="modal" data-target="#deleteModal" >DELETE</button>

Атрибут data-toggle нужен для вызова модального окна, а в data-target будет указан идентификатор блока с HTML.

Сохраните изменения и перезапустите сервер. Заходим на сайт и нажимаем на кнопку Delete.

Шаг 2: Удаление поста

Для удаления поста нужно сделать запрос по особому Firebase адресу. Поскольку у нас есть ID, то при клике по кнопке Delete удалим данные из Firebase.

Во-первых, удалите атрибут data-toggle из кнопки Delete. Теперь данный функционал будет располагаться в контроллере. Добавьте атрибут ngClick к кнопке Delete.

<button class="btn btn-xs btn-warning" ng-click="confirmDelete(article.$id)" data-target="#deleteModal" >DELETE</button>

Внутри app/welcome/welcome.js создайте новую функцию confirmDelete. Вот так вот будет выглядеть содержимое функции confirmDelete:

$scope.confirmDelete = function(id) {
        var fb = new Firebase("https://blistering-heat-2473.firebaseio.com/Articles/" + id);
        var article = $firebase(fb);
        $scope.postToDelete = article.$asObject();
        $('#deleteModal').modal();
    }

Как видно в предыдущем листинге, мы создали объект Firebase и достаём объект статьи. Используя данный объект удаляем статью из Firebase.

Далее нам необходимо создать функцию deletePost, которая будет вызвана при удалении статьи. В confirmDelete мы уже записали объект в $scope.postToDelete. В функции deletePost используем объект $scope.postToDelete для удаления статьи из Firebase:

$scope.deletePost = function() {
    var fb = new Firebase("https://blistering-heat-2473.firebaseio.com/Articles/" + $scope.postToDelete.$id);
    var article = $firebase(fb);
    article.$remove().then(function(ref) {
        $('#deleteModal').modal('hide');
    }, function(error) {
        console.log("Error:", error);
    });
}

Используем метод $remove API для удаления статьи из Firebase. Если операция пройдёт успешно, то нам необходимо скрыть элемент статьи с страницы.

Добавляем директиву ngClick к кнопке Delete.

<button type="button" class="btn btn-primary" ng-click="deletePost()">Delete</button>

Сохраняем изменения, перезапускаем сервер и пробуем удалить запись.

Итог

В этом уроке мы реализовали редактирование и удаление поста, используя методы Firebase API. В следующей статье мы осуществим интеграцию с сервисом Ladda. Так же нами будут исправлены и другие неточности.

Исходный код данного урока доступен на GitHub.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://code.tutsplus.com/tutorials/creating-a-web-app-from-scratch-using-angularjs-and-firebase-part-6--cms-22814
Перевел: Станислав Протасевич
Урок создан: 12 Сентября 2015
Просмотров: 6475
Правила перепечатки


5 последних уроков рубрики "Разное"

^ Наверх ^