Поделиться через

Создание приложения Angular с помощью API Azure Cosmos DB для MongoDB. Создание приложения Express Node.js

Область применения: MongoDB

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

Часть 2 руководства основана на введении. Здесь рассматриваются следующие задачи:

  • установка Angular CLI и TypeScript;
  • создание нового проекта с помощью Angular;
  • создание приложения с помощью платформы Express;
  • Тестирование приложения в средстве тестирования HTTP

Видеоруководство

Необходимые компоненты

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

Для работы с этим руководством также требуется следующее:

  • Node.js версии 8.4.0 или более поздней;
  • Средство тестирования HTTP
    • Рекомендуется бессонница, curlVisual Studio или Invoke-RestMethod
  • Visual Studio Code или любой другой редактор кода.

Совет

В этом руководстве изложены пошаговые инструкции по созданию приложения. Готовое приложение можно скачать из репозитория angular-cosmosdb на GitHub.

установка Angular CLI и TypeScript;

  1. Откройте командную строку Windows или окно терминала Mac и установите Angular CLI.

    npm install -g @angular/cli

  2. Введите следующую команду в командной строке, чтобы установить TypeScript.

    npm install -g typescript

Создание проекта с помощью Angular CLI

  1. В командной строке укажите папку, в которой требуется создать новый проект, а затем выполните приведенную ниже команду. Эта команда создает новую папку и проект с именем angular-cosmosdb и устанавливает компоненты Angular, необходимые для нового приложения. Она использует минимальные настройки (--minimal) и указывает, что в проекте используется SASS (CSS-подобный синтаксис с флагом ---style scss).

    ng new angular-cosmosdb --minimal --style scss

  2. После выполнения команды перейдите в папку src/client.

    cd angular-cosmosdb

  3. Затем откройте папку в Visual Studio Code.

    code .

Создание приложения с помощью платформы Express

  1. В Visual Studio Code в области Обозреватель щелкните правой кнопкой мыши папку src, выберите пункт Создать папку и присвойте новой папке имя server.

  2. В области Обозреватель щелкните правой кнопкой мыши папку server, выберите Создать файл и присвойте новому файлу имя index.js.

  3. Вернитесь в командную строку и введите указанную ниже команду, чтобы установить средство синтаксического анализа текста. Это поможет нашему приложению проанализировать данные JSON, передаваемые через API-интерфейсы.

    npm i express body-parser --save

  4. В Visual Studio Code скопируйте приведенный ниже код в файл index.js. Этот код выполняет следующие действия.

    • ссылается на платформу Express;
    • вызывает средство синтаксического анализа текста для чтения данных JSON в тексте запросов;
    • использует встроенную функцию path;
    • задает переменные для корневого каталога, чтобы было проще найти расположение кода;
    • задает порт;
    • запускает платформу Express;
    • указывает приложению, как следует использовать ПО промежуточного слоя, которое будет применяться для обслуживания сервера;
    • отображает все содержимое папки dist (статическое содержимое);
    • обслуживает приложение и отображает файл index.html для запросов GET, не найденных на сервере (для прямых ссылок);
    • запускает сервер с помощью команды app.listen;
    • использует стрелочную функцию для проверки активности порта.
    const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));

  5. В Visual Studio Code в области Обозреватель щелкните правой кнопкой мыши папку server и выберите пункт Создать файл. Присвойте новому файлу имя routes.js.

  6. Скопируйте приведенный ниже код в файл routes.js. Этот код выполняет следующие действия.

    • ссылается на маршрутизатор Express;
    • получает элементы hero;
    • отправляет данные JSON для определенного элемента hero.
    const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

  7. Сохраните все измененные файлы.

  8. В Visual Studio Code нажмите кнопку Отладка , а затем — кнопку с шестеренкой . В Visual Studio Code откроется новый файл launch.json.

  9. В 11-й строке файла launch.json замените "${workspaceFolder}\\server" на "program": "${workspaceRoot}/src/server/index.js" и сохраните файл.

  10. Чтобы запустить приложение, нажмите кнопку Начать отладку .

    Приложение должно запуститься без ошибок.

Проверка конечных точек HTTP приложения

  1. Теперь используйте средство тестирования HTTP для выдачи GET запроса http://localhost:3000/api/heroes.

  2. В ответе показано, что приложение выполняется локально.

Следующие шаги

В этой части руководства мы выполнили следующую задачу:

  • создали проект Node.js с помощью Angular CLI;
  • Тестировало приложение с помощью средства тестирования HTTP

Теперь можно перейти к следующей части руководства, чтобы создать пользовательский интерфейс.

создание пользовательского интерфейса с помощью Angular;

Если вы планируете ресурсы для миграции в Azure Cosmos DB, Для планирования ресурсов можно использовать сведения об имеющемся кластере базы данных.