Создание приложения для блогов с использованием Angular и MongoDB: Компонент авторизации

Создание приложения для блогов с использованием Angular и MongoDB: Компонент авторизации

От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». Angular — это универсальный фреймворк для создания мобильных и веб-приложений с использованием одного и того же многократно используемого кода. Используя Angular, вы можете разделить все приложение для блогов на компоненты многократного использования, что упрощает обслуживание и повторное использование кода.

В этой серии статей вы узнаете, как приступить к созданию веб-приложения с использованием Angular с MongoDB в качестве back-end. Для запуска сервера мы будем использовать Node.js.

Вся эта серия будет посвящена созданию приложения для блоггинга с использованием Angular, Node.js и MongoDB. В этой статье вы узнаете, как начать работу по настройке приложения и созданию компонента Login.

Приступим к работе

Давайте начнем с установки Angular CLI.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

После установки Angular CLI создайте папку проекта AngularBlogApp.

В папке проекта, используя следующую команду, создайте новое приложение Angular:

После создания клиентского приложения перейдите в папку проекта и установите необходимые зависимости с помощью Node Package Manager (npm).

Запустите клиентский сервер, используя npm.

У вас должно запуститься приложение по адресу http://localhost:4200/.

Настройка приложения

Ваше веб-приложение будет содержать корневой компонент. Создайте папку с именем root внутри папки src/app. Создайте в ней файл с именем root.component.html и добавьте в него следующий HTML-код:

Создайте еще один файл root.component.ts и добавьте в него следующий код:

Удалите файлы app.component.html, app.component.ts, app.component.scss и app.component.spec.ts. У вас будет только один файл с именем app.module.ts внутри папки src/app. Импортируйте RootComponent в файле app.module.ts.

Включите RootComponent в ngModules и загрузите его.

Сохраните изменения и перезапустите сервер. При загрузке приложения будет отображаться RootComponent. В нашем приложении для маршрутизации мы будем использовать Angular Router. Поэтому импортируйте связанные с маршрутизацией зависимости в новом файле с именем app.routing.ts внутри папки src / app.

Экспортируйте маршруты для создания модуля со всеми провайдерами маршрутов.

Вот как должен выглядеть файл app.routing.ts:

Как видно из приведенного выше кода, мы еще не создали LoginComponent. Импортируйте класс ROUTING в файле app.module.ts.

Включите его в импорт NgModule.

Поместите RouterOutlet на странице root.component.html. Здесь отображается компонент маршрута.

Создайте папку с именем login в папке src/app. В папке login создайте файл login.component.ts и добавьте в него следующий код:

Создайте файл login.component.html и добавьте в него следующий код:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

Создание приложения для блогов с использованием Angular и MongoDB: Компонент авторизации

Создание компонента авторизации

При настройке приложения мы уже задали основу для LoginComponent. Давайте создадим представление для LoginComponent с помощью Bootstrap. Загрузите и включите стили CSS Bootstrap в папке assets и включите соответствующую ссылку на странице src/index.html.

Оберните app-root на странице index.html следующим образом.

Добавьте следующий HTML-код на страницу login.component.html.

Создайте в папке login файл login.component.css и добавьте в него следующие стили CSS.

Измените декоратор @Component, чтобы включить стили CSS.

Сохраните приведенные выше изменения и попробуйте загрузить приложение. У вас будет отображаться элемент LoginComponent с представлением входа в систему.

Создание приложения для блогов с использованием Angular и MongoDB: Компонент авторизации

Создание службы авторизации

LoginComponent необходимо взаимодействовать с базой данных, чтобы проверить, существует ли пользователь, пытающийся войти в систему. Таким образом, он должен будет выполнять вызовы API. Часть, относящуюся к взаимодействию с базой данных, мы сохраняем в отдельном файле login.service.ts.

Импортируйте LoginService в LoginComponent и добавьте его в качестве провайдера в декораторе компонентов.

Добавьте метод с именем validateLogin в файл login.service.ts, который осуществляет вызов API. Вот как это выглядит:

Как видно из приведенного выше кода, он возвращает наблюдаемый объект, который будет подписан в файле login.component.ts. Вот как должен выглядеть файл login.service.ts:

Реализация валидации авторизации в системе

Добавьте директиву ngModel к элементам ввода данных в login.component.html.

Добавьте событие click для кнопки входа.

Вот как должен выглядеть измененный файл login.component.html:

Определите и инициализируйте пользовательскую переменную в файле login.component.ts.

Модель User определяется в папке src/app/models. Вот как она выглядит:

Определите метод с именем validateLogin, который будет вызываться при нажатии кнопки. Вот как выглядит это метод:

После ввода имени пользователя и пароля метод validateLogin подписывается на метод LoginService для выполнения валидации.
Вот как выглядит файл login.component.ts:

Заключение

В этой части серии статей о блогинговом приложении на Angular вы узнали, как начать работу по созданию веб-приложения с помощью Angular. Мы создали базовую структуру приложения Angular и LoginComponent, который позволит пользователю вводить имя пользователя и пароль. В следующей части серии мы напишем API REST для валидации входа в систему и создадим компонент главной страницы. Исходный код этого руководства доступен на GitHub.

Автор: Roy Agasthyan

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree