Прежде чем я начну, я хочу поблагодарить команду Angular за предоставление очень хорошего инструмента, который экономит много времени на каждом новом проекте ... Также, пожалуйста, ознакомьтесь с этой отличной статьей автора Томасу Траяну за лучшие практики и советы по angular
Что мы собираемся узнать
- Добавление глобальных стилей, переменных и миксина медиа-запросов
- Получение всех конфигов перед инициализацией приложения
- Пропуск HTTP-перехватчика для HTTP-вызовов
- Настройка сервера JSON для тестирования
- Добавление compodoc для создания документов
1. Добавление глобальных стилей и переменных
Рекомендуется хранить в проекте глобальный файл со всеми вашими переменными SASS, миксинами и т. Д. И вместо импорта этого глобального файла в каждый компонент мы можем использовать 'includePaths' из конфигурации 'stylePreprocessorOptions'. в angular.json, чтобы определить глобальный путь, как показано ниже.
Если вы хотите добавить в свой проект начальную загрузку, например простые медиа-запросы, вам будет очень полезен этот фрагмент кода.
2. Получение конфигов / настроек перед инициализацией приложения
Это распространенный сценарий при разработке приложений. При инициализации приложения ему может потребоваться получить с сервера начальные конфигурации, такие как константы API или токены сторонних сервисов. Для этого angular предоставляет токен внедрения под названием «APP_INITIALISER» в @ angular / core. A функция, которая будет выполняться при инициализации приложения.
Как описано ниже, хранение его в отдельном модуле будет лучше с точки зрения дизайна.
а) Создайте модуль загрузчика конфигурации и импортируйте его в основной модуль приложения.
б) Создайте класс обслуживания angular для получения конфигурации с сервера.
c) Создайте заводские функции, которые будут вызываться модулем загрузчика конфигурации при инициализации приложения. Используйте геттеры, чтобы получить ценность от услуг.
Для получения более подробной информации см. эту статью от Rich
3. Пропуск HTTP-перехватчика
Проблема: внедренный перехватчик в модуле приложения перехватывает все HTTP-вызовы из приложения. Но я хочу перехватывать вызовы только в определенном модуле или хочу пропустить перехват в определенном сценарии.
Решение для вышеуказанного сценария может быть выполнено двумя способами:
а) добавление заголовка в запрос и на основе этого заголовка определение запросов, которые следует пропустить.
б) Используйте HTTPClient, передав обработчик HttpBackend.
Путем внедрения внутреннего обработчика http в HttpClient заставит http-клиент отправлять все запросы непосредственно на серверную часть, не проходя через цепочку перехватчиков, так что все HTTP-вызовы будут пропущены. . (Я считаю, что это самый простой и чистый способ выполнить эту работу)
4. Настройка J SON Server для тестирования.
Это полезно, когда мы хотим смоделировать серверную службу REST для доставки некоторых данных в формате JSON во интерфейсное приложение и убедиться, что все работает должным образом.
Мы можем использовать пакет JSON Server, который поможет нам очень быстро настроить операции Restful CRUD. Чтобы интегрировать это с приложением angular cli, нам нужно создать сервер JSON и добавить конфигурации прокси, как показано ниже:
а) Создайте файл JSON server и data.json.
б) Создайте файл конфигурации прокси и передайте его в качестве аргумента в ng serve
c) Используйте одновременно для одновременного выполнения команд cli и сервера JSON. Создайте сценарии mock-server, dev-proxy и dev в package.json, как показано ниже. одновременно используется для одновременного запуска нескольких сценариев npm.
// package.json
......
"scripts": {
"mock-server": "node ./src/json-server/server.js",
"dev-proxy": "ng serve --proxy-config proxy.conf.json",
"dev": "concurrently --kill-others \"npm run mock-server\"
\"npm run dev-proxy\" "
}
.....
5. Настройте compodoc для документации.
Этот инструмент поможет вам сгенерировать документацию вашего углового проекта за секунды.
// package.json
......
"scripts": {
"doc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
}
.....
Полный исходный код доступен в этом репозитории. Наслаждайтесь кодированием !!!!!!
