В первой части нашего учебника по мобильному угловому интерфейсу . Мы увидели, как начать работу с использованием функциональности SignIn . В этой части мы реализуем функциональность SignUp и интегрируем Ladda в наше приложение для улучшения его пользовательского интерфейса.
Начиная
Демонстрация приложения, которое мы будем создавать, доступна на Heroku . Исходный код доступен на GitHub .
Для начала клонируйте первую часть учебника и установите его, как показано ниже:
git clone https://github.com/sitepoint-examples/MobileAngularUIApp_Part_1.git cd MobileAngularUIApp_Part_1 npm install grunt Укажите в браузере http://localhost:3000/BucketApp и вы увидите приложение, созданное в первом уроке .
Создание экрана регистрации
Начните с создания нового signUp.html в папке BucketApp, как показано ниже:
<div class="scrollable"> <div class="scrollable-content section"> <form action="" id="" ng-submit="signUp()"> <div bs-panel title=""> <input bs-form-control type="email" ng-model="user.username" label="" label-class="col-xs-3 col-sm-2 col-lg-1" class="col-xs-10 col-sm-11 col-lg-12" placeholder="Email Id" /> <input bs-form-control type="password" ng-model="user.password" label="" label-class="col-xs-3 col-sm-2 col-lg-1" class="col-xs-10 col-sm-11 col-lg-12" placeholder="Password" /> <button type="submit" id="btnSignUp" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" class="btn btn-success"> <span>Sign Up</span> </div> </form> </div> </div>
Обратите внимание на функцию signUp ng-submit , которую мы объявим позже.
Директива ngDisabled используется для проверки адресов электронной почты и паролей и включения / отключения кнопки регистрации.
Определите маршрут для signUp.html в BucketApp.js как показано ниже:
$routeProvider.when('/signUp', { templateUrl: 'signUp.html' });
Перезапустите сервер и укажите в браузере http://localhost:3000/BucketApp . Нажмите ссылку « SignUp в правом углу, и вы должны увидеть страницу регистрации.
Определите функцию signUp внутри BucketApp.js как показано ниже:
$scope.signUp = function() { var email = $scope.user.username; var password = $scope.user.password; if (email && password) { // if non-empty email and password auth.$createUser(email, password) .then(function(user) { // do things if success console.log(user); }, function(error) { // do things if failure console.log(error); }); } }
Мы использовали функцию API createUser для создания нового пользователя. Перезагрузите сервер и попробуйте зарегистрироваться. После успешной регистрации пользовательский объект будет зарегистрирован в консоли браузера.
Затем включите компонент наложения мобильного углового интерфейса, чтобы показать пользователю сообщение об успешной регистрации. Внутри страницы signUp.html следующий HTML-код для наложения:
<div overlay="myOverlay"> <h4 id="statusMsg" class="overlay-title">{{signUpMessage}}</h4> <p toggle="off" bubble target="myOverlay"> <span class="btn btn-primary">Ok</span> </p> </div>
Внутри html-оверлея у нас есть переменная signUpMessage для установки всплывающего сообщения.
Нам понадобится служба rootScope для запуска наложения, поэтому вставьте это в контроллер.
app.controller('MainController', ['$scope', '$firebaseSimpleLogin', '$location', '$rootScope', function($scope, $firebaseSimpleLogin, $location, $rootScope) {}
В функции signUp успешное создание пользователя устанавливает сообщение наложения и запускает наложение, как показано ниже:
$scope.signUpMessage = "User Registration Successful. Please SignIn :)"; $rootScope.toggle('myOverlay', 'on');
В случае ошибки установите оверлейное сообщение, как показано ниже:
$scope.signUpMessage = "Error Occurred: Enter valid email id."; $rootScope.toggle('myOverlay', 'on');
При нажатии кнопки Ok нам нужно перенаправить пользователя на страницу входа, поэтому добавьте директиву ngClick на кнопку Ok.
<span ng-click="showSignIn()" class="btn btn-primary">Ok</span>
Определите showSignIn как показано ниже:
$scope.showSignIn = function() { //Reset the overlay $rootScope.toggle('myOverlay', 'off'); //Initialized the user object $scope.user = { username: "", password: "" }; //Redirected to Sign In page $location.path('/'); }
Теперь перезапустите сервер и просмотрите приложение. При успешной регистрации пользователя кнопка « OK возвращает вас на страницу входа.
Добавление индикатора загрузки Ladda
Далее мы добавим индикатор загрузки Ladda в наше приложение.
Мы будем создавать директиву AngularJS для использования Ladda в нашем приложении. Вот минималистичный код для нашей директивы ladda:
app.directive('uiLadda', [ function() { return { link: function(scope, element, attrs) { // Code logic will be here } }; } ]);
Измените кнопку signIn.html в signIn.html как показано ниже:
<button data-ui-ladda="login.loading" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" type="submit" id="btnSignIn" class="btn btn-primary segoe-ui-light ladda-button" data-style="expand-right"> <span class="ladda-label">Sign In</span> </button>
Мы применили директиву login.loading атрибутом login.loading . Мы добавили атрибут с именем data-style="expand-right" который определяет стиль для индикатора загрузки. Добавлены дополнительные классы segoe-ui-light ladda-button для стилизации кнопок ладды.
Затем включите файлы стиля и javascript из ladda dist в index.html как показано ниже:
<link rel="stylesheet" href="/BucketApp/assets/css/style.css" /> <script src="/BucketApp/assets/js/spin.min.js"></script> <script src="/BucketApp/assets/js/ladda.js"></script>
Чтобы узнать, когда запускать / останавливать индикатор загрузки login.loading , мы установим login.loading как true и false. В директиве uiLadda мы будем наблюдать login.loading для запуска / остановки индикатора. Поэтому внутри контроллера приложения добавьте новую переменную, как показано ниже:
var login={}; $scope.login=login;
Измените директиву uiLadda как показано ниже:
app.directive('uiLadda', [ function() { return { link: function(scope, element, attrs) { var Ladda = window.Ladda; ladda = Ladda.create(element[0]); // Watching login.loading for change scope.$watch(attrs.uiLadda, function(newVal, oldVal) { // if true show loading indicator if (newVal) { ladda.start(); } else { ladda.stop(); } }); } }; } ]);
Внутри функции $scope.signin установите для login.loading true. В случае успеха и неудачи установите значение login.loading как false.
Сохраните изменения, перезапустите сервер и попробуйте войти в систему. При нажатии на кнопку входа в систему он развернется вправо, показывая индикатор загрузки.
Измените кнопку регистрации, как показано ниже:
<button type="submit" data-ui-ladda="login.loading" id="btnSignUp" ng-disabled="user.username==undefined||user.username=='' || user.password=='' || user.password==undefined" class="btn btn-success segoe-ui-light ladda-button" data-style="expand-right"> <span class="ladda-label">Sign Up</span> </button>
А также установите login.loading как true в $scope.signUp . В случае успеха и неудачи сбросьте login.loading как false.
Вывод
В этом уроке мы реализовали функциональность регистрации с помощью Mobile Angular UI и firebase. Мы увидели, как добавить индикаторы Ladda в наше приложение. Мы использовали компонент наложения, чтобы показать всплывающие сообщения. Существует много других полезных компонентов, предлагаемых Mobile Angular UI, которые вы можете найти в официальных документах . Проверьте это и дайте нам знать ваши мысли в комментариях ниже.