Начните работу с простым веб-приложением Angular 6, запущенным локально на вашем компьютере, менее чем за 5 минут.
Вступление
Это будет начало серии сообщений в блоге, в которых объясняется, как настроить аутентификацию Azure B2C в приложении Angular 6.
Если вы не знаете, что такое Azure B2C, не волнуйтесь. Я объясню все это позже в серии. А пока, если вы хотите узнать, как создать простое приложение Angular 6 менее чем за 5 минут, продолжайте читать.
Подождите, подождите, подождите… У вас установлен NODE?
Если вы не знаете, что такое узел, и не установили его на свой компьютер, то далеко не уедете.
So…
Вот как вы устанавливаете узел для Mac
Если вас не беспокоит чтение этих статей, то вкратце выполните следующие команды (одну за другой) для установки Homebrew и узла на вашем компьютере.
Приносим извинения всем пользователям, не использующим Mac. В этом разделе предполагается, что вы используете Mac. Альтернатива Windows для Homebrew - Chocolatey. Документацию можно найти здесь.
Первая команда (устанавливает homebrew на ваш компьютер):
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Вторая команда (здесь используется homebrew для установки узла на ваш компьютер):
brew install node
хорошо… теперь мы в порядке.
Шаг 1. Установите Angular CLI
Вы используете Angular CLI для создания проектов, генерации кода приложений и библиотек, а также для выполнения множества текущих задач разработки, таких как тестирование, комплектация и развертывание.
Чтобы установить CLI с помощью npm (диспетчера пакетов узлов), откройте окно терминала / консоли и введите следующую команду:
npm install -g @angular/cli
Вам будет предложено ввести информацию о функциях, которые следует включить в исходный проект приложения, например:
Хотите добавить маршрутизацию Angular? (Д / Н): Д
Какой формат таблицы стилей вы хотите использовать ?: CSS
Примите значения по умолчанию, нажав клавишу Enter или Return.
Шаг 2. Создайте рабочее пространство и начальное приложение
Измените каталог туда, где вы хотите, чтобы ваше приложение размещалось. Затем запустите команду CLI ng new в том же терминале и укажите имя для вашего приложения, например, b2c-basic-app, как показано здесь:
ng new b2c-basic-app
примечание: теперь создано приложение с именем ‘b2c-basic-app’ в любом каталоге, в котором вы запускали команду. Angular CLI устанавливает необходимые пакеты Angular npm и другие зависимости. Это может занять несколько минут.
Первоначально создаваемое приложение представляет собой очень простой проект, содержащий готовое к запуску «приветственное приложение».
Шаг 3. Обслуживайте ваше приложение локально
Angular включает в себя сервер, так что вы можете легко создавать и обслуживать свое приложение. Чтобы запустить приложение, выполните следующие действия:
- Перейдите в папку рабочей области (b2c-basic-app).
- Запустите сервер, выполнив команду CLI
ng serve --open
3. Команда ng serve запускает сервер, наблюдает за вашими файлами и перестраивает приложение по мере того, как вы вносите изменения в эти файлы.
4. Параметр --open (или просто -o) автоматически открывает в вашем браузере http://localhost:4200/.
Теперь вы должны увидеть прекрасное приложение Angular 6, работающее локально на вашем компьютере. Легкий лимонный сок.
Необязательный шаг 4. Добавление кнопки входа и регистрации в ваше приложение
Я собираюсь добавить в приложение две кнопки. Один разрешает пользователям входить в систему, а другой разрешает пользователям регистрироваться.
- Откройте файл app.component.html, который находится в / app.
- Вставьте следующий код в файл app.component.ts.
2. Теперь вам нужно связать методы входа и регистрации в файле .html с файлом .ts. Откройте файл app.component.ts и замените следующим кодом:
Обратите внимание, как я добавил два метода login() и signup(). Оба метода вызывают простое предупреждающее сообщение для пользователя.
Теперь вы сможете загрузить свое приложение и нажать обе кнопки. Каждый из которых запускает описанные выше методы. Не волнуйтесь, мы добавим магию аутентификации позже в этой серии. На данный момент подойдет всплывающее окно с предупреждением.
Ваше приложение должно выглядеть так:
Вот и все. Очень простое приложение на Angular 6, готовое к развитию. Надеюсь, у тебя все заработало.
Если вам понравилась эта статья, пожалуйста, дайте мне аплодисменты, она сделает мой день немного лучше.
Следующая статья? Щелкните здесь, чтобы настроить службу Azure B2C
Код GITHUB: https://github.com/sambowenhughes/5-minute-angular-app
