Угловая схема: ngMomentum

Angular Schematics - довольно новая разработка в экосистеме Angular. С помощью Angular Schematics вы можете преобразовать свой код с помощью шаблонов и функций изменения кода, которые можно интегрировать в любой проект Angular и соответствующим образом преобразовать ваш проект.

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

В будущих публикациях мы рассмотрим код нашей новейшей схемы Angular и способы создания собственных схем. Но теперь пора представить…

ngMomentum

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

С чего начать с ngMomentum

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

Для этого мы рекомендуем начать с создания нового проекта Angular с помощью интерфейса командной строки.

Боковое примечание: Если вам нужна помощь в запуске Angular из командной строки, просмотрите следующую ссылку о Angular CLI.

С установленным Angular CLI нам просто нужно создать новый проект.

$ cd to/wherever/you/are/putting/your/project
$ ng new my-momentum-project

Это создает новый проект Angular с использованием схем, созданных командой Angular.

Это мило. Мы можем начать делать все, что необходимо для нашего приложения. Однако мы обнаружили, что эта структура плохо масштабируется, и есть еще несколько функций, которые потребуются большинству крупномасштабных приложений. Добавление ngMomentum в ваш проект придаст вашему приложению структуру, лучше подходящую для крупномасштабных приложений.

$ ng add ng-momentum

Когда вы добавляете ngMomentum в свой проект, мы формируем структуру папок и добавляем функции, которые мы сочли полезными при создании крупномасштабных приложений. Вы можете отказаться от этих дополнительных функций, таких как функции PWA и Angular Material.

В следующих примерах показано, как исключить эти функции.

# skips PWA features
$ ng add momentum --includePwa=false
# uses bootstrap instead of Material
$ ng add momentum --uiFramework=bootstrap
# uses basic HTML, no framework
$ ng add momentum --uiFramework=basic

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

Мы предоставляем базовый контент, который поможет вам начать работу (домашнее представление и представление «страница не найдена»), а также создадим отдельные основные и общие модули. Вы увидите, что мы также интегрировали Материал (или выбранную вами платформу пользовательского интерфейса) и сценарии PWA (если они выбраны), а также подготовили все ваши модульные тесты и базовую структуру папок для будущих дополнений.

Добавить функции PWA

Мы добавили кое-что, чтобы упростить PWA, но вам потребуются некоторые настройки из официальной схемы @angular/pwa. Чтобы использовать его, просто добавьте в схему.

$ ng add @angular/pwa

Хорошо, хватит настройки, пора быстро выплюнуть много хорошего кода!

Я надеюсь убрать этот шаг, вызвав напрямую @ angular / pwa. В настоящее время существует проблема с git вокруг этой функции / проблемы. Способ освобождения @ angular / pwa мешает мне сделать этот шаг таким же плавным, как @ angular / material. В скором времени я могу отказаться от этого шага и удалить этот подраздел.

ngMomentum: CRUD

Когда строительные леса готовы и ваш проект готов, следующее, на чем вам нужно сосредоточиться, - это создать свой проект. Часто нам необходимо создать операции CRUD (или варианты операций CRUD) для службы, чтобы пользователи могли правильно администрировать ресурс. Почему бы не пропустить все усилия и монтажные работы вашего проекта и не выплюнуть код за вас? Что ж, ngMomentum может позаботиться об этом за вас.

В следующем примере мы показываем, как вы можете указать ngMomentum URL-адрес, чтобы он обрабатывал все остальное за вас. Если у вас нет URL-адреса, мы покажем вам, как ввести обозначение объекта дальше.

Просто попробуйте следующую команду:

$ ng g ng-momentum:crud 
    --name=heros \
    --url=http://localhost:3000/superheros.json

ТАКОЕ много кода выплевывают. Представления на основе материалов (или bootstrap, или vanilla HTML), сервисы, маршрутизаторы, проверки ввода и средства защиты вместе с каждым модульным тестом, на который вы могли когда-либо надеяться. Все готово для использования / изменения / развертывания. А взгляды? Неплохо, если я так говорю.

С помощью одного звонка вы позаботились о нескольких днях работы, набора текста, разочарования и тестирования. Нет службы, чтобы ударить? Попробуйте немного отрегулировать ту же команду.

$ ng g ng-momentum:crud \ 
    --name=heros \
    --obj="{\"id\":\"number\",\"name\":\"string\"}"

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

ngMomentum: Просмотр

Это будет полу-спорным, но такое разграничение оказалось успешным для крупных проектов. Разработчики часто путаются, когда начинают создавать компоненты в Angular, оставляя папку components/, чтобы она стала свалкой визуальных элементов. Были шаблоны, такие как атомный дизайн, который пытается различать компоненты - только для того, чтобы разработчики пытались решить, является ли компонент атомом, молекулой или организмом. Со временем некоторые компоненты постепенно усложняются и изменяют свою область видимости, что приводит к еще большей путанице в кодовой базе.

Я это упрощаю. У вас либо Просмотры, либо Компоненты. Представления - это, в частности, визуальный компонент, к которому есть путь. Компоненты могут быть любыми визуальными компонентами (кроме представлений). Вот и все. У одного есть путь к нему, у другого его нет. Это значительно упрощает описание \, и когда вы переходите либо в папку component/, либо в папку views/, вы знаете, чего ожидать.

Примечание. Ваша views/ папка должна быть структурой вашего приложения, а вложенные представления и пути должны быть вашей вложенной структурой папок.

После настройки этой информации ngMomentum обрабатывает создание представлений за вас. Вы уже видели этот процесс на ng-momentum:crud операции.

Если вы хотите создать новые компоненты, Angular Schematic уже сделает это за вас. Если вы хотите создать представление с маршрутизацией, охраной, модульными тестами, практически всем, тогда вы используете ngMomentum. Вот пример:

$ ng g ng-momentum:view \ 
    --name=edit-hero --template=form \
    --eager=false --skipVo=true --skipService=true \
    --vo=hero --voPath=/src/app/vos/hero \
    --service=heros --servicePath=/src/app/services/heros

Это создаст новое представление «формы», которое лениво загружается с именем «герои» с использованием Hero VO и HerosService, которые вы создали ранее.

Вы можете выбирать из нескольких шаблонов, свойств uiFramework, vo и других функций. Опять же, документация - лучшее место, чтобы увидеть все варианты.

ngMomentum: Сервис

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

ng g ng-momentum:service --name=shoe --operations=crudl

Это создаст новую службу с именем ShoesService, которая включает операции create, update, list, read и delete вместе с модульными тестами в папке services/. Как и в других разделах, здесь много опций, и я рекомендую ознакомиться с документацией.

ngMomentum: Модель

Это также раздел, который вы можете или не можете использовать на самом деле, но он может быть полезен в правильной ситуации. Если вам нужны данные в централизованном хранилище и несколько компонентов взаимодействуют с этими данными, тогда вы захотите использовать Модель. После внедрения модели в несколько компонентов многие области вашего приложения могут быть всегда связаны с истиной. В ngMomentum модели бывают разных форматов. ngMomentum создает для вас либо basic модель (без внутренних функций), list модель (загружает коллекцию данных), либо selected object модель (может создавать, обновлять, удалять и загружать определенный объект данных). Модели также можно использовать для кэширования ваших данных и большего контроля. Однако вы можете не найти их вообще полезными. Так что решать вам. Вот один из примеров того, как его использовать.

ng g ng-momentum:model --name=cars --template=list

Это создаст CarsModel, который может загрузить список Car ВО. Наряду с моделью это создаст сервис и VO, необходимые для того, чтобы это работало, и все модульные тесты, которые вам нужны. Опять же, пожалуйста, ознакомьтесь с документацией.

Используйте ngMomentum!

Мы надеемся, что вы действительно используете ngMomentum и дадите нам свой отзыв. Прямо сейчас мы рады поделиться им, так как ngMomentum основан на многолетнем опыте разработки приложений для предприятий и магазинов. Мы считаем, что если вы решите использовать его, он сослужит вам хорошую службу. Как упоминалось ранее, проверьте официальное расположение на github и дайте нам знать, что вы думаете.

Придумывая угловые схемы

Если вы последуете за мной, то в следующих нескольких статьях вы увидите, что мы углубимся в Схемы дальше, чем некоторые другие. Учитесь на страданиях, которые я перенес, и начните создавать что-нибудь удивительное. И если вы используете ngMomentum в своих проектах, дайте мне знать. Я хотел бы получать отзывы и расширять их, чтобы они были еще более полезными.