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

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

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

Стартуем

Начнём с копирования кода третье части, который находится на GitHub.

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

После этого заходим в каталог проекта и устанавливаем все зависимости.

cd AngularJS_Firebase_Part3
npm install

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

npm start

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

Создание страницы добавления поста

Для начала нам необходима страница, где пользователь сможет создать и опубликовать новый пост. Давайте добавим нужные шаблоны и файлы. Отправляемся в AngularJS_Firebase_Part3/app и создаём папку addPost. Внутри addPost создаём HTML под названием addPost.html и addPost.js. В addPost.html добавляем следующий HTML код:

<html lang="en">

<head>

    <title></title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

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


</head>

<body>

    <div class="blog-masthead">
        <div class="container">
            <nav class="blog-nav">
                <a class="blog-nav-item " href="#">Home</a>
                <a class="blog-nav-item active" href="addPost.html">Add Post</a>

            </nav>
        </div>
    </div>

    <div class="container">

        <form class="form-horizontal">
            <fieldset>

                <!-- Form Name -->
                <legend>Create Post</legend>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtTitle">Title</label>
                    <div class="col-md-4">
                        <input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtPost">Post</label>
                    <div class="col-md-4">
                        <textarea class="form-control" id="txtPost" name="txtPost"></textarea>
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="singlebutton"></label>
                    <div class="col-md-4">
                        <input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                    </div>
                </div>

            </fieldset>
        </form>


    </div>
    <!-- /.container -->

    <div class="blog-footer">
        <p>AngularJS & Firebase Blog App</p>

    </div>



</body>

</html>

Внутри addPost.js определяем новый маршрут для представления Add Post. В $routeProvider есть метод when, который мы вызываем для создания маршрута к представлению addPost. Зададим templateUrl, которое будет выведено в index.html. Так же зададим controller (логику управления представлением) для новоиспечённого $scope представления addPost. В итоге, addPost.js будет выглядеть так:

'use strict';

angular.module('myApp.addPost', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/addPost', {
        templateUrl: 'addPost/addPost.html',
        controller: 'AddPostCtrl'
    });
}])

.controller('AddPostCtrl', ['$scope', function($scope) {

}]);

Включаем модуль myApp.addPost в app.js.

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register',
    'myApp.welcome',
    'myApp.addPost'     // Newly added module
])

Так же подключаем addPost.js в app/index.html.

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

Сохраняем изменения, перезапускаем сервер, отправляемся по адресу http://localhost:8000/app/#/addPost и видим страницу добавления нового поста.

Валидация полей формы добавления поста

Для начала необходимо текстовым полям добавить директиву ngModel для активации возможности двустороннего биндинга two-way data binding.

<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">

<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>

Для публикации поста потребуется ввести его название и текст. Нам необходимо установить валидацию на вышеупомянутые поля. Если все поля заполнены, то мы активируем кнопку публикации. Воспользуемся директивой ngDisabled для включения/выключения кнопки. Добавляем атрибут ngDisabled кнопке как показано ниже.

<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />

В результате ngDisabled отключит кнопку публикации статьи если поля не заполнены.

Реализация добавления поста

При клике по кнопке публикации, нам необходимо сохранить название и текст поста в Firebase. Для этого воспользуемся $push API.

Добавляем директиву ngController к телу addPost.html и ngSubmit форме в addPost.html.

<body ng-controller="AddPostCtrl">
<form class="form-horizontal" ng-submit="AddPost()">

Открываем addPost.js и добавляем новую функцию AddPost внутри AddPostCtrl:

.controller('AddPostCtrl', ['$scope', function($scope) {
    $scope.AddPost = function() {

      // Add Post logic will be here

    }
}]);

Для отправки данных в Firebase Db нам понадобится переменная $firebase, поэтому внедряем модуль $firebase в контроллер AddPostCtrl.

.controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) {

Создаём объект Firebase, воспользовавшись Firebase URL.

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

В результате в firebaseObj будет записан экземпляр $firebase с помощью которого мы сможем общаться с сервисом.

var fb = $firebase(firebaseObj);

Достаём название поста и текст из $scope.

var title = $scope.article.title;
var post = $scope.article.post;

Делаем запрос к Firebase с целью добавления данных.

fb.$push({
    title: title,
    post: post
}).then(function(ref) {
    console.log(ref);
}, function(error) {
    console.log("Error:", error);
});

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

Заключение

В данном уроке мы реализовали добавление нового поста. В следующем уроке осуществим вывод всех добавленных постов.

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

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


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

  • Расширяем возможности HTML за счёт создания собственных тегов

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

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

^ Наверх ^