Skip to content

Instantly share code, notes, and snippets.

@LimarenkoDenis

LimarenkoDenis/0 - About Lector

Last active March 11, 2020 21:23
Show Gist options
  • Save LimarenkoDenis/afdee57363272b269a55d6782e073758 to your computer and use it in GitHub Desktop.
Save LimarenkoDenis/afdee57363272b269a55d6782e073758 to your computer and use it in GitHub Desktop.
Download ZIP
Programm, homeworks, final project
Raw
0 - About Lector
[Lector Profile!](https://www.linkedin.com/in/limarenkodenis)
Raw
1 - Programm
Angular pro
TypeScript, Знакомство и обзор фреймворка Angular
Typescript, базовым синтаксис, базовые и продвинутые типы, tslint
Быстрый старт с angular-cli
Обзор архитектуры
Разбор модулей
Разработка простого компонента
Специфика синтаксиса шаблонов Angular, отображение данных
Компоненты
Знакомство с компонентами
Вложенные компоненты
Общение данными между компонентами
Директивы, Пайпы
Применение директив из коробки (ngIf, ngClass, ngFor..)
Создание своей атрибутной директивы
Pipe и фильтрация данных
Реактивное программирование и RxJs
Обзор библиотеки Rxjs
Observables: создание и использование
Subjects: применение и типы
Сервисы и внедрение зависимостей (Dependency injection)
Принцип Dependency injection
Общение компонент через сервисы
HTTPClient
Взаимодействие с API
Работа с формами
Модель формы и FormControl
Простые(template-driven) и реактивные формы
Валидация данных
Асинхронный валидаторы
Навигация и маршрутизация
Обзор и конфигурация
События состояний
Вложенные состояния
Защита путей. Ограничение доступа через роутер guards
Ленивая загрузка модулей
Другие модули, ngRx - реактивное расширение для Angular
ngRx - реактивное расширение для Angular
Основы Redux
ngRx Store
ngRx Effects - для работы с асинхронными событиями
ngRx Selectors для более удобной работы со Store
ngRx Entity
Другие модули
Анимация Angular
Интернационализация и локализация
AngularFire, Angular Material, ng-bootstrap
Raw
2 - Homeworks
1 - https://github.com/LimarenkoDenis/GL-ts-lesson
Создать проэкт на своем гитхаб профайле и работать в нем
PS
Используйте строгий tslint или ts правила (рекомендую https://github.com/LimarenkoDenis/ithillel-angular-course/blob/master/tslint.json)
Установите tslint расшерение для редактора, увидел подсвечивали красным правила некоторые
Залейте решение на свой гитхаб
--------------------------------------
- Создать проэкт с angular-cli
- https://drive.google.com/open?id=1Tw3xXN8UMcR8N-2ZZsUB3TkJfOTc1Q20
- https://photos.app.goo.gl/8WrzXyGsbUrfAGCE6
- Разбить на компоненты
- app-hotels (модуль и главная компонента)
- list
- weather component
- profile component
- Можем добавить компоненты по желанию
- header
- footer
- nav bar for feature navigation
- подключить и поиспольовать компоненты angular material
--------------------------------------
1) app-hotels - здесь данные
damn component, ничего не знают о данных, в них только @Input, @Output
2) list - пробросить список и с ngFor отрисовать
3) weather component - @Input decorator, прибайндить данные и отобразить их там (данные о погоде)
4) profile component - прибайндить данные и отобразить их там (данные с профайла)
5) протипизировать
6) Кликаем по одному элементу отеля и перерисовываются данные других виджетов, @Output() (selectedHotel, или selectedHotelId - в app.component )
примерное демо https://limarenkodenis.github.io/ng2weatherwidget/
Пример
<weather [weather]="hotel.weather">
Данные
public hotels: Hotel[] = [
{
id: 0,
title: 'Universal Cabana',
address: 'Orlando',
description: 'Best one!',
phone: '+3242353434',
picture: 'assets/images/1.jpg',
photos: [
'assets/images/res.jpg',
'assets/images/r1.jpg'
],
weather: {
temperature: 12,
wind: 11,
icon: 'sun'
},
profile: {
followers: 112,
following: 11,
photo: 'assets/images/b1.jpg'
},
stars: 3
},
{
id: 1,
title: 'Kharkov plaza',
address: 'Kharkov',
description: 'Five Stars',
phone: '+3242353434',
picture: 'assets/images/2.jpg',
photos: [
'assets/images/res.jpg',
'assets/images/r1.jpg'
],
weather: {
temperature: 5,
wind: 4,
icon: 'rain'
},
profile: {
followers: 12,
following: 111,
photo: 'assets/images/b2.jpg'
},
stars: 4
},
{
id: 2,
title: 'Hotel name',
address: 'Orlando',
description: 'Lorem ipson0',
phone: '+3242353434',
picture: 'assets/images/3.jpg',
photos: [
'assets/images/res.jpg',
'assets/images/r1.jpg'
],
weather: {
temperature: -2,
wind: 2,
icon: 'cloud'
},
profile: {
followers: 45,
following: 78,
photo: 'assets/images/b3.jpg'
},
stars: 5
}
];
--------------------------------------
- pipe, фильтрация hotels
- инпут поле - поиск по title и description
- вместо | Hotel | Fishing | Tours | Weather | - сортировку по звездам (можно All | *** | **** | *****)
- и чтобы они вместе работали
- добавить компоненту favorites hotels
- данные в app-hotels, на том же уровне где и hotels, selectedHotel
- отображает список
- в список к каждому элементу добавить кновпу +Add to favorites (можно под двемя картинками в списке)
- при клике на +Add to favorites добавляется элемент в favorites hotels
- удалить элемент из favorites, кликаем на [x] - удаляем hotel из списка favorites
- для advanced
- нотификации
- 'Добавлено в favorites!'
- 'Удалено из favorites!'
- Если элемент уже есть в списке favorites
- или попап что уже добавлен
- или считать колличетсво нажатий (voted - IFavoriteHotel расширить полем от IHotel)
- сделать загрузку hotels асинхронной (setTimeout, 3 sec) -
- для advanced - можно сделать спискок this.hotels$ = of(mockedHotels).pipe(delay(3000))
- для advanced - кастомная директива, навешиваем на hotels list, пока гдузиться сделать оверлей над списком
- Loading... текст вместо директивы - попроще
- подсвечивать четные отели другим цветом (зебра)
RXJS
- Посмотреть офиц доку
- Курсы
- Видео
Services
Создать Service
- перенести все хардкод данные из родительского компонента в сервис
- реализовать общение данных через сервис (убираем многовложеные Input, Output)
- методы (getHotels, getFavorites, addToFavorites, deleteFavorite, ...)
Advanced level
- Сделать так, чтоб методы возвращали Observable (желательно все)
- Сделать свойства компонентов Observable (hotels$, favorites$, ...) и использовать async pipe в шаблоне
Services, http client, api
- продолжаем в той же репе проэкта отелей
- https://github.com/typicode/json-server - часто используется пока нет бека и потом лечго подменяется на существующий
- сделать и запустить фековый сервер из json (данные что и были), паралельно запущен и фронт и api
- изучить постман(кто не знает) и поиграться, поделать запросы, получить, обновить, удалить данные (crud)
- Реализовать через сервис
- GET /hotels?_page=myPage&_limit=MyLimit - получение списка отелей и расширить пагинацией
(angular material paginator можно взять как компонентту - но все через запросы потом)
используем angular params
можно подобавлять больше отелей данных
- POST /favorites
- Если уже есть отель в favorites то
PATCH /favorites/:id - обновить колличетво голосований
- DELETE /favorites/:id - удалить
- url выносим в environment файлы (пробуем запускать в dev и prod моде)
В итоге мы убираем все захардкодженые данные - они выносятся на фейковый сервер иделаем запросы через сервис
Сортировка и пайпы пока остануться работать только с данными что загрузились - можно оставить или подумать как переделать
Advanced
- добавить админа (в локалстородж ложим token)
- добавить кнопку Удалить отель
- скрываем для тех пользователей у который нет токена в локалсторадже (структурная директива)
- через сервис дергаем DELETE /hotels/:id но перед этим вытаскиваем токен и отправляем в http headers 'Authorization' (angular headers)
- добавить Angular Interseptor и перехватываем каждый запрос и к каждому запросу накивем Authorization headers с токеном
- Запровайдить url с Injector Token и инджектив в сервис
angular router and navigation
- главное меню (hotels, About this project, users, Contacts us )
- страница списка отелей и фаворитс
- при клике на елемент (из hotel list) - переходи на стр hotel-detail и берез id param из url
- hotel-detail - загрузить инфо об отеле и 2е вложеные навигации
- comments
- contacts
- страница 'About this project' с любой инфой
- users (добавить AuthGuard)
- есть 'token' в локалстторадж - то отображаем пункт меню и даем возможность перехода
- нет 'token' в локалстторадж - скрываем директивой и guard (если руками вбиваем в url)
- страница Contacts us
- флажок editMode и если editMode true - то не давать уходить с этой страницы и показать попап
- если editMode false - то даем возможность покинуть стр
через canDeactivate
- сделать hotels, Contacts us, users модулями и реализовать ленивую загрузку
- при клике на пагинацию обновлять query params в url (поделиться ссылкой)
Advanced
- расширить данные (fake json server json)
- добавить comments и свзятьать по id с hotels
- на стр hotel detail - comments - загружать коменты конкретного отеля
Формы (Reactive forms)
Предлагаю форму регистрации на отдельной странице
- name
- surname
- email
- password
- confirm Password
- Дата рождения - select options (невозможность выбора 30 февраля и тд)
- radio button (мужчина, женщина)
- Классические валидации
- Валидации на password, confirm Password на совпадение и на классические правила 8 символов и тд
- Глазик фича, показать/скрыть пароль
- Стилизация и сообщения с ошибками (динамическая, по покиданию поля, конкретные ошибки по каждому правилу)
Форма опросник через formArray
- добавить/удалить варианты ответа
Advanced:
- Добавить вопрос
- добавить вариант ответа
- удалить вариант ответа
Redux, Ngrx
- Переделать на ngrx
- загрузка отелей
- добавление/удаление отелей в favorites
Или добавить Ngrx не трогая предыдущий функционал:
- Bookmarks - как и favorites - но с ngrx флоу (как с Cart на занятии - синхронно)
- Или Добавить Users модуль - C Effects async, флоу загрузки
Advanced ngrx
- Добавить ngrx Router store
Raw
3 - Final Project
Придумать и реализовать свой ‘pet project’ или стартап (можно общий командой)
Предлагаю:
- простой интернет магазин, список продуктов с сортировкой, корзина(список, +- увеличить/уменьшить количество, общая сумма), навигация на форму с различными валидациями - оформления, данных отправки и тд, простая авторизация, для админа - попап добавления нового продукта
(https://github.com/LimarenkoDenis/ngx-strore/blob/master/data.json) - data
- GMAIL, Twitter, Instagram простая копия
- Google Keep, Notes
Можно использовать любое
API или
https://jsonplaceholder.typicode.com/
или свой фейковый сервер из json https://github.com/typicode/json-server или
https://github.com/toddmotto/public-apis
Можно использовать Angular Material
Raw
Materials
https://learn.javascript.ru/screencast/angular - классный скринкаст
https://ngrx.io/guide/store
https://www.ngxs.io/
https://github.com/datorama/akita
https://github.com/angular/angularfire
Raw
Коротко по занятиям
--------------------------------------
Введение:
Необходимые инструменты для старта: Git, Node, npm, VSCode(WebStorm)
Мои плагины: TsLint, AutoImport
--------------------------------------
Typescript, базовым синтаксис, базовые и продвинутые типы, tsconfig, tslint, сторонние библиотеки
- Мотивация, зачем - https://basarat.gitbook.io/typescript/getting-started/why-typescript
- Достоинства (можно погуглить)
- Базовым синтаксис, типы, продвинутые типы - https://www.typescriptlang.org/docs/handbook/basic-types.html
- Линтер (набор правил для консистентности кода) - https://palantir.github.io/tslint/
- Typescript не понимает браузер, поэтому нужно транспилировать в JS. Но бывают много опций для транспиояции
(в какой стандарт, в какую папку результат, типы из библиотек и тд)
Для этого нужен tsconfig - определет область транспиляции с конфигурацией -
https://www.typescriptlang.org/docs/handbook/compiler-options.html
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
- Откуда же беруться типы - устанавливаем npm i typescript - и в node_modules/typescript находим файлы определения
Что возвращает - различные методы, протипизированиые обьекты и тд
- Нужно разделять реализацию и типизацию
Например let a: number = 1 // number - это тип, а 1 значение
Напримаер библиотека Lodash(https://lodash.com/)
- устанавилвам npm i lodash - но типов нет
- устанавиваем типы для билиотеки npm i @types/lodash
- Обычно пакеты с типами называются @types/имя-библиотеки
- Можем проваливаться и видеть что возращают/принимают различные методы
- Мы можем запускать typescript код без транспиляции в JS
Например библиотека ts-node (https://github.com/TypeStrong/ts-node)
--------------------------------------
Обзор фреймворка Angular
- Можно почитать - https://habr.com/ru/post/348818/
--------------------------------------
Angular-cli - инструмент который позволяет создавать готовое ангулар приложение (стартер)
Сейчас это лидер и все его используют
- https://cli.angular.io/
- Установка на комп и команды для генерации/билда/запуска и тд - https://github.com/angular/angular-cli/wiki
- Так же позволяет генерировать сущности(компоненты/сервисы) - https://github.com/angular/angular-cli/wiki/generate
- В разеле Stories https://github.com/angular/angular-cli/wiki/stories
- Можно прочитать как настроить assets(публичные данные - картинки, стили и тд)
- Hot Module Replacement (перезагрузка только модуля изменений - без перезагрузки браузера)
- Global Lib, Scripts, Styles
- Про библиотеки - Material, Flex, AngularFire и тд
- Proxy (как перенаправить запрос на другой адрес)
- Интернационализация
- Deploy to gh-pages
- Application Environments
- Universal Rendering
- и тд (все все по ссылке Stories)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment