AngularBlogTest

Тестовый блог на Angular

Публичная часть: https://angularblogtest-1b8f2.web.app/

Админка: https://angularblogtest-1b8f2.web.app/admin

Languages and Tools

Themes

1. Что такое Angular
2. Установка
3. Создание компонентов
4. Генерация компонентов
5. Добавление PWA
6. Как протестировать что сборка работает?
7. Деплой приложения

1. Что такое Angular

Angular - js библиотека, которая в ядре использует RXJS и TypeScript, служит для разработки сложных сайтов

Документация: https://angular.io/docs

2. Установка

1. Нужен node JS
2. Установка Angular npm install -g @angular/cli
3. Для генерации нового проекта нужно зайти в папку проекта ng new ng-basics
   1. Хотим ли добавить роутинг для проекта?
   2. Какой стиль использовать? Выбираю scss
   3. Происходит генерация проекта. В корне создается файл package.json, в котором прописаны все зависимости
4. Запуск приложения npm start

3. Создание компонентов

1. Создать в папке app папку. В ней создать файл .ts

4. Генерация компонентов

ng g c form --skipTests

--skipTests - не генерировать тесты
form - название компонента
c - сгенерировать компонент
g - сгенерировать

Метод bindings - служит для связки шаблона и компонента

Для байндинга атрибут нужно обернуть в квадратные скобки

Ивент байндинг - принимает пользовательские действия и дает команду самому компоненту

5. Добавление PWA

1. Остановить выполнение проекта (ctrl+C)
2. Запустить установку ng add @angular/pwa, подтвердить выполнение

   Появятся файлы (manifest.webmanifest, ngsw-config.json)

   В src\app\app.module.ts появляется ServiceWorkerModule, который регистрируется в imports

3. Отредактировать ngsw-config.json:

   Закэшировать шрифты:

   "files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
],
"urls": [
"https://fonts.googleapis.com/css?family=Roboto"
]

   На уровне "assetGroups" создать "dataGroups":

   "dataGroups": [
{
"name": "firebase-posts",
"urls": [
"https://angularblogtest-1b8f2-default-rtdb.firebaseio.com/**"
],
"cacheConfig": {
"maxSize": 5,
"maxAge": "3600"
}
}
]
4. Сделать production сборку
   ng build --prod
5. После чего в корне создалась папка dist

6. Как протестировать что сборка работает?

1. Установить http-server
   npm install -g http-server

2. Перейти в папку dist cd dist/.

   Перейти в папку AngularBlogTest cd AngularBlogTest/

   В папке проекта запустить проект http-server -p 4200

3. В консоли перейти по доступному адресу (например http://127.0.0.1:4200).

   В строке браузера добавить /index.html

4. В консоли Application -> Service Worker видим зарегистрированный Service Worker (Source ngsw-worker.js)
5. В Cache Storage можно увидеть закэшированные посты, значит Service Worker работает и приложение запускается быстрее, т.к. данные берутся из кэша

7. Деплой приложения

1. Зайти в firebase -> hoisting -> начать
2. Установить firebase-tools
   npm install -g firebase-tools
3. После установки пакета возвращаемся в firebase, нажимаем далее
4. firebase login
5. Если не было аккаунта, то откроется вкладка браузера, где можно выбрать аккаунт
6. firebase init
   

   Обязательно нужно находиться в корневой папке (cd.. - выйти из папки)

7. Выбрать Hoisting (выбрать пробелом -> enter)
8. Какой проект используем?

   Use an existing project

9. Выбрать проект
10. Какая директория является публичной? dist/AngularBlogTest
11. Необходимо ли конфигурировать данное приложение как single page application? - Y
12. Настроить автоматические сборки и развертывания с помощью GitHub? -
13. File dist/AngularBlogTest/index.html already exists. Overwrite? - n
14. firebase deploy