Nano Hash - криптовалюты, майнинг, программирование

Угловые несколько проектов

Я делаю доказательство концепции со следующими критериями:

введите здесь описание изображения

  1. Разрешить каждому элементу меню находиться в другом проекте Bitbucket.
  2. Создавайте один компонент, не ломая остальные.
  3. Компоненты могут общаться друг с другом.
  4. Если один из компонентов обновляется, все приложения автоматически должны видеть последнюю версию этого компонента.
  5. All teams will be using the following versions:
    • Angular CLI: 7.0.7
    • Узел: 10.13.0
    • Угловой: 7.0.4

Я сделал пример, используя элементы Angular, расширяя HTML.
Каждая команда Angular выполняет развертывание, создавая файл JavaScript (team1.js, team2.js, team3.js) путем регистрации своего тега.

Пример:

<team1> </ team1>  customElements.define("team1", ....); 
<team2> </ team2>  customElements.define("team2", ....); 
<team3> </ team3>  customElements.define("team3", ....);

Основное приложение Angular, имеющее меню, импортирует файлы JavaScript (team1.js, team2.js, team3.js), и при нажатии на каждое меню тег динамически создается внутри основного элемента div.

menu team1 >> this.renderer.createElement ("team1")
menu team2 >> this.renderer.createElement ("team2")
menu team3 >> this.renderer.createElement ("team3")

Если какой-либо команде требуется доступ к веб-службе, например, для заполнения таблицы, таблица отображается раньше.
Поэтому я делаю запрос в веб-службе, затем динамически создаю тег таблицы и передаю параметр в Popular.
В проекте Angular это нормально работает без этой необходимости. Но с элементами Angular у меня получилось так:

this.data = data returned from webservice
const element = this.renderer.createElement ("component-table");
this.renderer.setProperty (element, "data", this.data);

Все это работает, но мне сложно работать с createElement.

Я мог бы сделать этот запрос веб-сервиса в основном проекте и пройти через параметр:

<team1 data = "data"> </ team1>

При этом все запросы к вебсервису будут в основном проекте и всем командам придется писать код в этом проекте.

  1. Есть ли другие возможности?
  2. Можете ли вы продолжать делать это таким же образом, но менее сложным способом?

  • Вы видели это: nrwl.io/nx/guide-nx-workspace Они Я проделал большую работу в этой области и разработал полностью продуманное решение с использованием библиотек Angular. 18.12.2018

Ответы:


1

Задача заключалась в создании отдельных приложений пользовательского интерфейса, которые можно было бы разрабатывать и развертывать независимо друг от друга, но при этом объединять в единое целое для развертывания. Вот как мы это сделали.

Вам понадобится установленный Angular CLI, создайте рабочее пространство Angular:

ng new my-app --routing

затем запустите его:

cd my-app

ng serve -o

Создайте свои дополнительные приложения

Функциональность нескольких приложений теперь встроена непосредственно в Angular CLI, поэтому этот пост будет посвящен этому. Вместо использования ng new для создания рабочей области мы хотим использовать ng generate application. Это создаст новое приложение, расположенное рядом с приложением по умолчанию:

ng generate application app1 --routing

ng generate application app2 --routing

Вероятно, это похоже на то, что вы ожидаете от проекта Angular:

  • e2e: для сквозных тестов
  • node_modules: все пакеты, которые необходимо было установить для запуска приложения.
  • src: исходный код основного приложения.
  • src/app: Основной код приложения.
  • src/assets: папка с ресурсами для основного приложения.
  • src/environments: Конфигурации среды

Каталог проектов включает в себя:

app1: исходный код вашего первого пользовательского подприложения.

  • app1/app: исходный код приложения app1.
  • app1/assets Активы для app1.
  • app1/environments: Конфигурации среды для app1.
  • app1-e2e: Сквозной тест для app1.
  • app2: исходный код вашего второго пользовательского подприложения.
  • app2/app: исходный код приложения app2.
  • app2/assets Активы для app2.
  • app2/environments: Конфигурации среды для app2.

Чтобы запустить одно из подприложений, вы просто используете аргумент проекта для ng serve, например:

ng serve –-project app1

вся статья находится здесь

19.04.2019
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..