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

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

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

Стартуем

Результат прошедших уроков можно найти на GitHub.

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

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

cd AngularJS_Firebase_Part4
npm install

После этого можем запустить сервер:

npm start

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

Структурирование файлов в Firebase

Ранее, когда мы отправляли данные в Firebase, то просто указывали Firebase URL в результате чего данные оседали хаотично. Однако с ростом данных будет всё труднее и труднее управляться с ними, поэтому нам нужно выработать какую-то структуру.

Заходим в Firebase и отправляемся в раздел Manage App. Вы должны увидеть Firebase URL как показано ниже:

Кликаем на иконку плюса для создания нового URL (Articles). Значение поля value ставим 0 и кликаем на Add. После вставки вы должны наблюдать похожий результат:

Теперь все наши статьи будут располагаться отдельно от основного потока данных.

Откройте addPost.js и замените Firebase URL на https://blistering-heat-2473.firebaseio.com/Articles. Давайте так же добавим email ID пользователя связного с данным постом. Это значение можем извлечь из сервиса CommonProp. Подключаем сервис CommonProp в контроллер AddPostCtrl.

.controller('AddPostCtrl', ['$scope','$firebase','CommonProp',function($scope,$firebase,CommonProp) {
While pushing the data, include the email ID parameter also. Here is the modifiedAddPost function:
$scope.AddPost = function() {
    var title = $scope.article.title;
    var post = $scope.article.post;

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

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

Сохраняем изменения и перезапускаем сервер. Аутентифицируемся и создаём новый пост. Если сейчас заглянуть в Firebase, то наш пост будет располагаться в разделе Articles:

Вывод постов на главной странице

Теперь давайте воспользуемся компонентом Bootstrap для вывода постов на главной странице. Открываем app/welcome/welcome.html и внутри div-а с классом container, после приветствия, добавляем следующий код:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Title Heading</h4>
        <p class="list-group-item-text">Blog post content </p>
    </a>
</div>

Сохраняем изменения и перезапускаем сервер. Пробуем аутентифицироваться и на главной странице видим следующее:

Запрос данных из Firebase

Теперь давайте запросим данные от Firebase, используя URL https://blistering-heat-2473.firebaseio.com/Articles.

Открываем welcome.js и внутри контроллера WelcomeCtrl создаём объект Firebase, используя вышеупомянутый URL.

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

Воспользуемся объектом $firebase для извлечения данных из Firebase. Из документации:

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

var sync = $firebase(firebaseObj);

Для получения массива данных с которым мы сможем взаимодействовать в Angular следует воспользоваться методом $asArray. Давайте вызовем $asArray и запишем данные в глобальную область видимости $scope.

$scope.articles = sync.$asArray();

Добавьте элемент параграфа:

<p>{{articles}}</p>

Сохраните все изменения, и перезапустите сервер. Заходим на главную страницу и получаем данные в формате JSON в $scope.articles.

[{
    "emailId": "jim@jim.com",
    "post": "This is my first post on this platform.",
    "title": "Hello !!"
}, {
    "emailId": "jim@jim.com",
    "post": "Good night for tonight",
    "title": "GoodBye"
}]

Биндинг результатов запроса в AngularJS

Теперь когда у нас в переменной $scope.articles есть результат запроса к Firebase, можем передать данные в список постов на самой странице. Воспользуемся AngularJS директивой ngRepeat для вывода данных:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Title Heading</h4>
        <p class="list-group-item-text">Blog post content </p>
    </a>
</div>

Добавляем ngRepeat к основному div-у.

ng-repeat="article in articles"

В результате ngRepeat осуществит итерацию по всем элементам массива и выведет их в HTML:

<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>
    </a>
</div>

Сохраняем изменения, перезапускаем сервер, аутентифицируемся, и на главной странице видим список постов, которые добавляли через Add Post.

Отправляемся на http://localhost:8000/app/#/addPost и добавляем новый пост. Заходим на http://localhost:8000/app/#/welcome и видим его в списке.

Усовершенствование приложения

Автоматическое перенаправление после создания поста

После создания поста было бы неплохо отправить пользователя на главную страницу. Открываем app/addPost/addPost.js и внедряем объект $location в контроллер AddPostCtrl. При успешном fb.$push отправляем пользователя на страницу welcome.

fb.$push({
    title: title,
    post: post,
    emailId: CommonProp.getUser()
}).then(function(ref) {
    console.log(ref);
    $location.path('/welcome');
}, function(error) {
    console.log("Error:", error);
});

Добавляем ссылку на страницу Add Post

Открываем app/welcome/welcome.html и добавляем ссылку на раздел Add Post:

<a class="blog-nav-item " href="#/addPost">Add Post</a>

Сохраняем изменения, перезапускаем сервер, аутентифицируемся, создаём пост в результате чего перенаправляемся на главную страницу и видим новую запись в списке постов.

Итог

В этом уроке мы показали как осуществить вывод данных, которые хранятся в Firebase используя AngularFire. Так же нами были добавлены некоторые изменения для удобной работы с приложением.

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

Исходный код данного урока можно найти на GitHub.

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


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 6 Сентября 2015 13:06
    nahkar
    Слежу за этой серией уроков. Все как всегда понятно ясно, доступно. Спасибо за Ваш труд.
^ Наверх ^