Понимание связки firebase, angular, html - NashaLeptaChallenge/nasha_lepta GitHub Wiki

Данная связка – самая сложная часть логики сайта.

1. Редактирование текста основано на использование 3rd party скрипта ckeditor (public/scripts/ckeditor). Эту часть кода мы пока менять не будем. Скрипт используется почти таким, как он был выкачан из npm, исключение public/scripts/ckeditor/config.js, public/scripts/ckeditor/plugins/widgettemplatemenu/plugin.js и нескольких стилей, можете сами просмотреть в истории изменения папки public/scripts/ckeditor. Последние изменения направлены в основном на добавление пред заготовленных шаблонов совместимых с bootstrap – для responsive поведения сайта (= подстройку под любой экран). Можете сами просмотреть, как редактируются статьи - https://www.youtube.com/watch?v=ukpa67KPPLo&feature=youtu.be .
2. Текущая логика предпросмотра и сохранения– в public/scripts/controllers/updateTemplate.js. Скрипт смотрит за состоянием редактируемого текста в зависимости от нажатой кнопки в UI.
3. public/scripts/directives/compile.js отвечает за превращение редактируемой статьи в корректный html для предпросмотра или для отражения, если html содержит другие angular directives. Используется в public/templates/directives/nl-article.html.
4. Подгрузка статьи организована через директиву public/scripts/directives/nlArticle.js, её template - public/templates/directives/nl-article.html, директива вызывается в public/scripts/appRoot.js, public/scripts/appEvenings.js, public/scripts/appExposition.js, public/scripts/appRequests.js (в чём между ними разница?)
5. nlArticle.js использует url полученый в строке template: nl-article data="'+appRootRoutes.views[template].url+'" auth="auth" public/scripts/appRoot.js:28 url приходят из файлов в папке public/data. :collision: Ещё не запутались?)) Пользуйтесь интерактивными возможностями Webstorm ctrl + click по элементу перенесёт Вас к нужному файлу-объекту. Да и, конечно, определяем нужно ли показывать опции редактирования на основе объекта auth.
6. Используя полученный url, организована логика выкачивания html строки из Firebase. var receivedValue = $firebaseObject(ref); ( public/scripts/directives/nlArticle.js:21)
7. Описание логике в блоке if: eсли полученный html содержит другие зависимые angular директивы, то напрямую вставить как html не получится, поскольку angular не подхватит логику. Поэтому используется scope.toShowCompile, который докомпилирует объект. Остальной html текст можно вставить напрямую. Такое разграничение помогает сделать сайт чуточку быстрее.

Весь функционал построен на уроках CodeSchool за исключением ckeditor, на codeschol предлагали использовать вместо него markdown. Не сильно заморачивайтесь, чтобы понять полностью всё, что здесь происходит = не все, кто ездит на автомобиле, знают, как он устроен. Вот и вам достаточно понимать, только как это можно использовать в следующих заданиях.