Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Создание приложения блога на Angular и MongoDB: Вход

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

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

На протяжении всего этого урока вы будете создавать приложение для ведения блога, используя Angular, Node.js и MongoDB.

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

Начинаем

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

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

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

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

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

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

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

Ваше Angular веб-приложение будет иметь корневой компонент. Создайте папку с именем 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 и добавьте следующий код:

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

Login Component - Blogging App

Создание компонента Login

Вы уже заложили основу для LoginComponent при настройке приложения. Давайте создадим представление для LoginComponent с использованием Bootstrap.

Загрузите и включите стиль bootstrap CSS в папке assets и добавьте ссылку на него на странице src/index.html.

Поместите обертку вокруг app-root на странице index.html.

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

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

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

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

Login Screen Angular Blogging App

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

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

Создайте файл login.service.ts и добавьте следующий код:

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

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

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

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

Добавьте директиву ngModel в инпуты файла login.component.html.

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

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

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

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

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

Когда введено имя пользователя и пароль, метод validateLogin подписывается на метод LoginService для проверки входа пользователя.

Вот как выглядит файл login.component.ts:

Заключение

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

В следующей части серии учебников вы напишете REST API для проверки правильности входа в систему и создадите компонент home.

Исходный код этого учебника доступен на GitHub.

Сообщите нам свои мысли и предложения в комментариях ниже.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.