Обычно я работаю над Angular и Node и разрабатываю различные проекты в них. Недавно я столкнулся со многими людьми, которые просили наилучшую структуру проекта для проектов Angular, с помощью которой они могут реализовать меры безопасности и конфиденциальности, чтобы максимально использовать Angular. Итак, это наше руководство по внедрению лучшего подхода в ваш проект, предназначенный только для Angular. В настоящее время я использую Angular v8.1 и Node v12.7.
Давайте начнем с создания нового проекта: «dummy-project» с помощью следующей команды:
Новый фиктивный проект — routing=true — skipTests=true — style=scss
Эта команда не запускает интерактивную фазу (запрашивая ввод данных пользователем при инициализации проекта), а напрямую создает и устанавливает модули узлов. Хотя, вот небольшое описание для каждого варианта:
- «-routing=true» включит маршрутизацию в проекте.
- «— skipTests=true» остановит создание файлов «spec.ts», если вы действительно хотите пропустить эти тестовые файлы.
- «—style=scss» установит стиль с использованием препроцессора scss.
Это хороший способ всегда перемещаться во вновь созданный основной каталог проекта, в нашем случае «dummy-project», иначе команды ng не будут работать, поскольку локальная схема Angular (или мы можем сказать, информация о командах) загружается в каталог «node_modules». и определяется в файле «package.json» в основной папке проекта.
Теперь, возвращаясь к нашей структуре, у нас будут следующие подстановочные каталоги для определенных файлов/папок:
- компоненты
- помощники
- модели
- Сервисы
Компоненты также будут разделены на разные части как общие/общие для часто используемых компонентов и других родительских компонентов.
Давайте создадим некоторые из наших первых компонентов. Для этого используйте следующую команду:
ng generate component component/common/login
ng generate component component/common/signup
ng generate component component/common/alert
ng generate component component/home
Обратите внимание, как мы создали определенные каталоги с помощью одной команды. Точно так же мы можем создавать другие компоненты в каталогах компонентов.
Теперь создадим помощников. Каталог Helpers будет содержать файлы машинописных текстов, которые будут использоваться на протяжении всего проекта с целью обеспечения хорошей безопасности и улучшения взаимодействия с пользователем. Мы будем генерировать-
- файл защиты для аутентификации использования при перемещении между маршрутами
- два перехватчика, т. е. перехватчик ошибок для просмотра и через удобочитаемую пользователем ошибку на экране, а также перехватчик JWT для создания локальных веб-токенов Java для конкретного пользователя.
- поддельный бэкэнд для входа и выхода пользователя
Используйте приведенную ниже команду для создания защиты аутентификации, она попросит вас выбрать интерфейс, используйте пробел, чтобы выбрать интерфейс «CanActivate», а затем нажмите Enter.
ng генерировать помощники охраны/аутентификацию — flat=true
Для перехватчиков нам нужно создать файлы HttpInterceptor следующим образом:
- jwt.interceptor.ts
- error.interceptor.ts
А для фейкового бэкенда создайте файл fake-backend.ts.
ng generate service services/authentication— flat=true
ng генерирует сервисные сервисы/предупреждения — flat=true
ng generate service services/user — flat=true
Нам также нужно создать один файл модели для пользователя, чтобы сопоставить данные пользователя, создать файл user.ts в каталоге моделей.
Это все люди.
Чтобы загрузить код, используйте эту ссылку Github.
