В предыдущей части этого руководства мы увидели, как начать создавать приложение Bucket List с использованием IONIC и Firebase . Мы реализовали функциональность входа в систему, используя Firebase в качестве серверной части. В этой части мы реализуем функцию регистрации и дадим пользователям возможность добавлять пожелания в свой список после входа в систему. Исходный код из этого учебного руководства доступен на GitHub .
Начиная
Клонировать исходный код из предыдущей части руководства.
git clone https://github.com/sitepoint-editors/iBucketListApp_Part1 После завершения клонирования перейдите в каталог проекта и установите необходимые зависимости.
cd iBucketListApp_Part1 npm install
Запустите ionic serve для запуска приложения в веб-браузере.
Создание экрана регистрации
Начните с создания экрана регистрации. Перейдите в папку www/templates и создайте файл с именем signup.html . Внутри signup.html добавьте следующий код:
<ion-view title="iBucketList"> <ion-content> <div class="list list-inset"> <label class="item item-input"> <input type="email" placeholder="Email Address" ng-model="login.email"> </label> <label class="item item-input"> <input type="password" placeholder="password" ng-model="login.password"> </label> </div> <div class="padding"> <button ng-click="signup()" class="button button-block button-assertive"> Sign Up </button> </div> </ion-content> </ion-view>
Откройте www/js/app.js и добавьте новое состояние для страницы регистрации.
.state('signup', { url:'/signup', templateUrl:'templates/signup.html', controller:'SignUpCtrl' })
Затем создайте контроллер для представления регистрации. Откройте www/js/controller.js и добавьте контроллер SignUpCtrl .
.controller('SignUpCtrl', ['$scope', function($scope){ // Code will be here }])
Сохраните вышеуказанные изменения, откройте http: // localhost: 8100 / # / signup в вашем браузере, и вы должны увидеть экран регистрации.
Затем нам нужно добавить кнопку на экран входа, чтобы перейти на экран регистрации и наоборот.
Добавьте следующий код в home.html после запуска элемента ion-view .
<ion-nav-buttons side="secondary"> <button class="button" ng-click="showSignUp()"> Sign Up </button> </ion-nav-buttons>
Как вы можете видеть в приведенном выше коде, мы установили side="secondary" что означает справа. Мы прикрепили директиву ngClick для вызова функции showSignUp которую мы определим далее в функции HomeCtrl .
$scope.showSignUp = function(){ $state.go('signup'); }
Сохраните вышеуказанные изменения и загрузите домашнюю страницу приложения. Вы должны иметь ссылку «Регистрация» в правой части заголовка. Нажмите на нее, чтобы перейти на страницу регистрации.
Добавьте кнопку « Back на страницу регистрации, чтобы вернуться на страницу входа.
<ion-nav-buttons side="primary"> <button class="button" ng-click="showSignIn()"> Back </button> </ion-nav-buttons>
Добавьте оставшийся код для функции SignUpCtrl контроллер SignUpCtrl .
.controller('SignUpCtrl', ['$scope','$state', function($scope,$state){ $scope.showSignIn = function(){ $state.go('home'); } }])
Реализация регистрации
Чтобы реализовать функцию регистрации с использованием SignUpCtrl модуль $firebaseAuth SignUpCtrl контроллер SignUpCtrl .
.controller('SignUpCtrl', ['$scope','$state','$firebaseAuth', function($scope,$state,$firebaseAuth)
Создайте функцию с именем signup в контроллере SignUpCtrl . Мы уже добавили директиву ngModel в поля ввода на странице регистрации. Используя значения поля ввода, вызовите API-интерфейс firebase createUser для создания нового пользователя.
$scope.login={}; var firebaseObj = new Firebase("https://burning-fire-1723.firebaseio.com"); var loginObj = $firebaseAuth(firebaseObj); $scope.signup = function(){ var email = $scope.login.email; var password = $scope.login.password; loginObj.$createUser(email, password) .then(function() { // do things if success console.log('User creation success'); $state.go('home'); }, function(error) { // do things if failure console.log(error); }); }
Сохраните вышеуказанные изменения и попробуйте зарегистрироваться. Если создание вашего пользователя прошло успешно, вы будете перенаправлены на страницу входа.
Добавление желания
Как только пользователь войдет в систему, мы отобразим сообщение об успехе на его домашней домашней странице и отобразим список добавленных пожеланий. Но сначала нам нужно создать интерфейс для пользователя, чтобы добавлять пожелания.
Создайте страницу с именем templates/addWish.html .
<ion-view title="iBucketList"> <ion-nav-buttons side="primary"> <button class="button" ng-click="showUserHome()"> Back </button> </ion-nav-buttons> <ion-content> <div class="list list-inset"> <label class="item item-input"> <input type="text" ng-model="user.wish" placeholder="Enter Wish" > </label> </div> <div class="padding"> <button ng-click="add()" class="button button-block button-balanced"> Add Wish </button> </div> </ion-content> </ion-view>
В js/app.js определите состояние страницы добавления желаний.
.state('addWish', { url:'/addWish', templateUrl:'templates/addWish.html', controller:'AddWishCtrl' })
Создайте контроллер для страницы «добавить желание» в js/controller.js . Внутри AddWishCtrl добавьте метод с именем showUserHome чтобы вернуться к домашней showUserHome пользователя.
.controller('AddWishCtrl', ['$scope','$state', function($scope,$state){ $scope.showUserHome = function(){ $state.go('userHome'); } }])
Сохраните вышеуказанные изменения и для просмотра страницы «добавить желание» откройте браузер по адресу http: // localhost: 8100 / # / addWish .
Далее давайте реализуем функциональность для страницы «добавить желание». Мы уже определили ng-model="user.wish" для элемента ввода. Давайте определим функцию add прикрепленную к кнопке Add Wish в AddWishCtrl .
$scope.add = function(){ var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com/MyWish"); var fb = $firebase(firebaseObj); // Adding code will be here }
Как видно выше, мы использовали URL /MyWish /MyWish , войдите в панель управления Firebase и нажмите значок плюса рядом с URL-адресом Firebase.
Убедитесь, что вы AddWishCtrl $firebase AddWishCtrl в AddWishCtrl .
.controller('AddWishCtrl', ['$scope','$state','$firebase', function($scope,$state,$firebase)
Далее мы будем использовать push API для записи данных в firebase.
fb.$push({ wish: $scope.user.wish }).then(function(ref) { console.log(ref); }, function(error) { console.log("Error:", error); });
Чтобы определить желание, созданное конкретным пользователем, мы добавим адрес электронной почты пользователя вместе с его желанием, создав службу AngularJS для хранения адреса электронной почты пользователя при входе. Добавьте службу SessionData в controller.js файл.
.service('SessionData', function() { var user = ''; return { getUser: function() { return user; }, setUser: function(value) { user = value; } }; });
Вышеуказанный сервис имеет две функции getUser и setUser для получения и установки пользовательских данных соответственно.
SessionData сервис SessionData в HomeCtrl .
.controller('HomeCtrl',['$scope','$firebaseAuth','$state','SessionData', function($scope,$firebaseAuth,$state,SessionData)
При signin функции signin в signin мы установим имя пользователя в сервисе SessionData .
SessionData.setUser(username);
В функции add AddWishCtrl нажмите адрес электронной почты вместе с конкретным желанием. SessionData в AddWishCtrl .
.controller('AddWishCtrl', ['$scope','$state','SessionData','$firebase', function($scope,$state,SessionData,$firebase){
Вот полная функция добавления в AddWishCtrl .
$scope.user = {}; $scope.add = function(){ var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com/MyWish"); var fb = $firebase(firebaseObj); var user = SessionData.getUser(); fb.$push({ wish: $scope.user.wish, email: user }).then(function(ref) { console.log(ref); $state.go('userHome'); }, function(error) { console.log("Error:", error); }); }
Далее давайте добавим кнопку меню в строку заголовка на домашней странице пользователя, чтобы включить навигацию на странице «добавить желание». Добавьте следующий код выше ion-content в userHome.html .
<ion-nav-buttons side="secondary"> <button class="button" ng-click="showAddWish()"> Add Wish </button> </ion-nav-buttons>
Внутри UserHomeCtrl добавьте функцию showAddWish чтобы перейти на страницу добавления желаний.
.controller('UserHomeCtrl', ['$scope','$state','$firebase', function($scope,$state,$firebase){ $scope.showAddWish = function(){ $state.go('addWish'); } }])
Сохраните изменения и попробуйте войти в приложение. Находясь на домашней странице пользователя, вы сможете увидеть кнопку « Add Wish в заголовке. Нажмите на нее, и она перейдет на страницу добавления желаний.
Список желаний на домашней странице пользователя
На домашней странице пользователя мы отобразим все пожелания, добавленные в firebase. Мы извлечем все элементы, добавленные в виде массива, и свяжем его с переменной $scope . Внутри UserHomeCtrl добавьте следующий код:
var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com/MyWish"); var sync = $firebase(firebaseObj); $scope.wishes = sync.$asArray();
Как видно выше, мы создали объект Firebase, используя наш уникальный URL-адрес Firebase. Затем мы передали firebaseObj в $firebase который возвращает данные в виде массива. Для отображения данных на домашней странице пользователя мы будем использовать директиву ngRepeat . В userHome.html , внутри ion-content , добавьте следующий код:
<ul class="list"> <li class="item" ng-repeat="wish in wishes"> {{wish.wish}} </li> </ul>
Сохраните изменения, и все пожелания должны быть указаны на домашней странице пользователя.
Вывод
В этом уроке мы реализовали функцию регистрации, используя Firebase в качестве бэкенда. Мы научились читать и записывать данные в Firebase. Я надеюсь, что это руководство послужит полезным ресурсом для начинающих, чтобы начать работать с IONIC Framework .
Дайте нам знать ваши мысли, предложения и любые проблемы, встречающиеся в комментариях ниже.