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

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

В первой части данной серии мы начали с того, что создали простое приложение на AngularJS и Firebase. Нами была создана страничка входа и реализован механизм аутентификации через Firebase.

Сегодня мы пойдём ещё дальше: создадим страницу регистрации и посмотрим как осуществить валидацию форм в AngularJS.

Стартуем

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

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

После того, как код скачан, не забудьте переключиться на папку проекта и установить нужные зависимости.

cd AngularJS_Firebase_Part1
npm install

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

npm start

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

Создание странички регистрации

Начнём с создания страницы для регистрации новых пользователей.

Начнём с создания страницы для регистрации новых пользователей. Отправляемся в AngularJS_Firebase_Part1/app и создаём папку под названием register. Внутри папки register создаём файлы register.html и register.js. Вот и содержимое файла register.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="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign In</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
      </form>

    </div>

</body></html>

Как видно из примера, мы используем Bootstrap.

В register.js мы определим маршруты для доступа к представлению с формой регистрации. У объекта $routeProvider есть метод when, с помощью которого можно создать новый маршрут. В качестве параметров необходимо передать templateUrl, который будет задействован в index.html. В то же время мы определим контроллер controller для новой области видимости $scope представления регистрации. В контроллере будет располагаться логика, которая управляет представлением. Содержимое:

'use strict';

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

// Declared route
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/register', {
        templateUrl: 'register/register.html',
        controller: 'RegisterCtrl'
    });
}])

// Register controller
.controller('RegisterCtrl', [function() {

}]);

Теперь открываем app.js и включаем новый модуль myApp.register.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register'  // Newly added register route
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home

    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

Для отображения страницы регистрации нам необходимо подключить register.js в основном HTML шаблоне приложения. Открываем index.html и добавляем следующее:

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

Перезагружаем сервер и отправляемся по адресу http://localhost:8000/app/index.html#/register. В результате мы должны увидеть следующее:

Теперь давайте создадим ссылку, по которой пользователь сможет открыть страницу регистрации. В home.html и register.html добавляем якоря sign up и sign in соответственно.

В home.html:

<a href="#/register"> Sign Up<a/>

В register.html:

<a href="#/home"> Sign In<a/>

Валидация форм в AngularJS

Теперь нам необходимо организовать проверку данных, введённых пользователем в форму. Во-первых, предоставленный электронный адрес должен быть правильного формата; во-вторых, пароль должен содержать как минимум определённое количество знаков.

В AngularJS есть FormController, который используется при работе с формами.

В FormController есть несколько свойств: $pristine, $dirty, $invalid, $valid, и т.д. Далее мы их рассмотрим более детально, а некоторые из них применим для валидации формы регистрации.

Для начала нам нужно немного преобразовать наш HTML и добавить сообщения об ошибках валидации. В register.html добавляем следующий HTML код.

<form class="form-signin" name="regForm">
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p>Enter a valid email.</p>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password">
        <p>Min password length is 8 characters.</p>
    </div>
    <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>

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

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

В AngularJS есть специальное средство ngShow, которое предназначено для отображения какого-то HTML в зависимости от условий (простыми словами это средство представлено в виде атрибута). Таким образом благодаря ngShow мы отобразим сообщение об ошибке, если электронный адрес будет неподходящего нам формата. А как же нам определить, правильный email или нет? В FormController есть свойство $invalid, которое будет равно True в случае если значение поля неверно. Таким образом regForm.email.$invalid будет содержать true, если email неподходящего формата. Если использовать в паре $invalid и ngShow, то можно добиться нужного нам результата:

<p ng-show="regForm.email.$invalid">Enter a valid email.</p>

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

Для нужного нам функционала можем воспользоваться атрибутом ng-minlength. Зададим минимальное количество символов и далее воспользуемся ngShow, как это было сделано в предыдущем примере:

<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">

Далее измените элемент, где находится сообщение об ошибке:

<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>

Если пользователь введёт пароль из меньшего количества символов, чем мы указали, то regForm.password.$error.minlength будет равно "true" и сообщение об ошибке всплывёт.

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

Теперь неплохо было бы как-то выделить сообщения об ошибках. Сделать это можно с помощью ngClass, отталкиваясь от того же свойства $invalid. Добавляем ngClass прямо в родительский div полей email и password.

<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>

<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
    <label>Password</label>
    <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
    <p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
</div>

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

На данный момент кнопка Register включена даже если данные в форме не верны. Давайте отключим её до тех пор, пока пользователь не устранит все недочёты. В AngularJS есть атрибут ngDisabled, который деактивирует элементы в зависимости от условий. Если email и password не верны, то значения в user.email и user.password не будут заданы. Поэтому мы можем использовать данные поля для определения активности кнопки. Измените кнопку регистрации:

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

В результате значение ng-disabled будет равно true если user.email и user.password не равны false.

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

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

Теперь давайте немного преобразуем форму входа пользователя в систему и добавим валидацию. Сначала сами можете попробовать, а затем посмотрите готовое решение в home.html:

<form class="form-signin" name="signinForm" role="form">
    <div class="form-group" ng-class="{ 'has-error' : signinForm.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p class="help-block" ng-show="signinForm.email.$invalid">Enter a valid email.</p>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : signinForm.password.$invalid }">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3">
        <p class="help-block" ng-show="signinForm.password.$error.minlength">Min password length is 8 characters.</p>
    </div>
    <label class="checkbox">
        <a href="#/register"> Sign Up</a>
    </label>
    <button ng-disabled="!user.email || !user.password" type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>
</form>

Заключение

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

В следующей части мы реализуем функционал регистрации пользователя. Исходный код можно найти на GitHub.

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

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.

^ Наверх ^