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

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

В предыдущей части данной серии мы создали страницу регистрации, настроили маршрутизатор, а так же организовали валидацию полей через AngularJS. В этом уроке мы реализуем функционал регистрации через AngularJS и Firebase. Так же подправим механизм входа в систему, согласно новому Firebase API.

Стартуем

Начнём с клонирования второй части кода из предыдущего урока GitHub.

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

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

cd AngularJS_Firebase_Part2
npm install

Теперь можно запустить сервер.

npm start

Отправляемся по адресу http://localhost:8000/app/ и видим запущенный проект.

Подключение Firebase

Недавно вышла последняя версия Firebase и FirebaseSimpleLogin для организации входа пользователя в систему. Открываем app/index.html и вставляем следующие строки подключения:

<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

Реализуем вход пользователя в систему

Отправляемся app/home и открываем home.js. Убираем $simplefirebaselogin из контроллера и передаём $firebaseAuth. Используем его для создания loginObj.

.controller('HomeCtrl', ['$scope', '$firebaseAuth', function($scope, $firebaseAuth) {
    var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");
    var loginObj = $firebaseAuth(firebaseObj);
}));

В новом Firebase API есть метод $authWithPassword для аутентификации, используя email и пароль. Заменяем метод логина на $authWithPassword в функции SignIn:

$scope.SignIn = function(e) {
    e.preventDefault();
    var username = $scope.user.email;
    var password = $scope.user.password;
    loginObj.$authWithPassword({
            email: username,
            password: password
        })
        .then(function(user) {
            //Success callback
            console.log('Authentication successful');
        }, function(error) {
            //Failure callback
            console.log('Authentication failure');
        });
}

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

Реализация регистрации

Будем использовать Firebase, метод createUser для создания нового пользователя, используя email и пароль. Поскольку валидация была реализована в прошлом уроке, сейчас всё что осталось сделать, привязаться к клику по кнопке. Добавляем атрибут ngClick:

<button type="button" ng-click="signUp();" ng-disabled="!user.email || !user.password" class="btn btn-lg btn-primary btn-block">Register</button>

Открываем register.js, редактируем RegisterCtrl, пишем новую функцию signUp.

.controller('RegisterCtrl', ['$scope', function($scope) {
    $scope.signUp = function() {

        // Sign up implementation would be here !!

    };
}]);

В функции signUp проверяем валидность данных формы:

$scope.signUp = function() {
    if (!$scope.regForm.$invalid) {
        console.log('Valid form submission');
    }
};

Добавляем атрибут ngController к body и register.html.

<body ng-controller="RegisterCtrl">

Перезагружаем сервер и обновляем страницу. Нажимаем на кнопку Register после ввода данных. Если заглянуть в консоль, то там должно быть сообщение Valid form submission.

Перед тем как использовать Firebase API для создания нового пользователя, нужно передать объект firebase в само приложение. Открываем register.js и добавляем модуль firebase.

angular.module('myApp.register', ['ngRoute','firebase'])

Далее нам нужно передать $firebaseAuth в контроллер регистрации.

.controller('RegisterCtrl', ['$scope','$firebaseAuth', function($scope,$firebaseAuth) {

Используя Firebase URL мы можем получить объект Firebase и использовать его для создания объекта $firebaseAuth. Далее мы воспользуемся объектом $firebaseAuth для обращения к API. Добавьте следующий код в register.js.

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

Теперь нам нужно получить email и пароль из $scope и вызвать метод createUser. Преобразуем метод signUp.

$scope.signUp = function() {
    if (!$scope.regForm.$invalid) {
        var email = $scope.user.email;
        var password = $scope.user.password;
        if (email && password) {
            auth.$createUser(email, password)
                .then(function() {
                    // do things if success
                    console.log('User creation success');
                }, function(error) {
                    // do things if failure
                    console.log(error);
                });
        }
    }
};

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

Перезагружаем сервак и отправляемся по адресу http://localhost:8000/app/#/register. Пробуем зарегистрировать нового пользователя, используя email и пароль. Проверяем консоль после клика по кнопке. Если всё прошло успешно, то вы увидите соответствующее сообщение.

Далее отправляемся по адресу http://localhost:8000/app/#/home и пробуем войти, используя свои данные.

Обработка регистрации в колбэках

Создание колбэка для обработки успешной регистрации пользователя

После успешной регистрации пользователя нам нужно отправить его на страницу входа. Для этого можем задействовать AngularJS сервис $location. Делаем как показано ниже:

.controller('RegisterCtrl', ['$scope','$location','$firebaseAuth', function($scope,$location,$firebaseAuth) {

Теперь используем в функцию auth.$createUser и перенаправляем пользователя.

$location.path('/home');

Сохраняемся, перезагружаем сервер и пробуем зарегистрировать нового пользователя. После этого вы должны попасть на страницу входа в систему.

Создание колбэка для обработки неудачной регистрации пользователя

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

<p style="color:red;" ng-show="regError">{{regErrorMessage}}</p>

Как видно из примера мы воспользовались атрибутом ngShow для отображения ошибки в случае если regError будет равно true. Сообщение будет отображено согласно переменной regErrorMessage. Добавьте следующий код в колбэк createUser.

$scope.regError = true;
$scope.regErrorMessage = error.message;

Вот функция signUp со всеми изменениями:

$scope.signUp = function() {
    if (!$scope.regForm.$invalid) {
        var email = $scope.user.email;
        var password = $scope.user.password;
        if (email && password) {
            auth.$createUser(email, password)
                .then(function() {
                    // do things if success
                    console.log('User creation success');
                    $location.path('/home');
                }, function(error) {
                    // do things if failure
                    console.log(error);
                    $scope.regError = true;
                    $scope.regErrorMessage = error.message;
                });
        }
    }
};

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

Создание главной страницы

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

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

</head>

<body ng-controller="WelcomeCtrl">

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

            </nav>
        </div>
    </div>
    <div class="container">
        <div class="page-header">
            <h1>AngularJS & Firebase App</h1>
        </div>
        <p class="lead">Welcome home !!</p>

    </div>

    <footer class="footer">
        <div class="container">
            <p class="text-muted"></p>
        </div>
    </footer>

</body>

</html>

В welcome.js сконфигурируем маршрут. Воспользуемся $routeProvider для создания маршрута к представлению welcome. При создании нового маршрута воспользуемся templateUrl который будет направлять на index.html. В то же время мы создадим контроллер. Вот как будет выглядеть welcome.js:

'use strict';

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

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

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

}]);

Теперь открываем app/app.js и добавляем новый модуль.

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

Так же открываем app/index.html и подключаем скрипт register.js.

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

Перенаправляем пользователя на главную в случае успешного входа в систему. Открываем app/home/home.js и передаём $location в HomeCtrl.

.controller('HomeCtrl', ['$scope','$location','$firebaseAuth',function($scope,$location,$firebaseAuth) {

Воспользуемся объектом $location для перенаправления пользователя на главную страницу. В home.js, внутри функции SignIn, в случае успеха выполняем следующий код:

$location.path('/welcome');

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

Доступ к $scope между контроллерами

Теперь давайте отобразим email вошедшего пользователя. Тут есть один нюанс: во время входа пользователя все его данные доступны в HomeCtrl, но после перенаправления объект $scope HomeCtrl не доступен в WelcomeCtrl. Для того чтобы это стало возможно воспользуемся AngularJS сервисом.

Используя сервисы мы можем осуществлять доступ к каким-то ресурсам. Внутри home.js создаём сервис CommonProp.

.service('CommonProp', function() {
    var user = '';

    return {
        getUser: function() {
            return user;
        },
        setUser: function(value) {
            user = value;
        }
    };
});

В сервисе CommonProp создаём переменную под названием user, куда запишем email пользователя. Теперь можем получить эти данные из любого контроллера.

Теперь передаём CommonProp в HomeCtrl:

.controller('HomeCtrl', ['$scope','$location','CommonProp','$firebaseAuth',function($scope,$location,CommonProp,$firebaseAuth) {

При успешной аутентификации задаём переменную user через сервис CommonProp.

CommonProp.setUser(user.password.email);

Так же передаём CommonProp в WelcomeCtrl welcome.js.

.controller('WelcomeCtrl', ['$scope','CommonProp', function($scope,CommonProp) {

В welcome.html преобразуем сообщение.

<p class="lead">Welcome home <b>{{username}}</b> !!</p>

Теперь в WelcomeCtrl записываем в $scope.username значение из сервиса CommonProp, используя метод getUser.

$scope.username = CommonProp.getUser();

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

Заключение

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

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

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

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

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.

^ Наверх ^