Понимание продвинутых структур. В каком порядке контроллеры, директивы, css, сервисы выполняются в Angular.js?

Question

В каком порядке выполняются контроллер, директива, css, службы, фабрики и т. Д. В Angular.js, когда вы наблюдаете вывод консоли / журнала / браузера? Я наблюдаю проект телевизионного потокового приложения под углом в моей нынешней компании, и мне трудно понять, как и когда все эти части исполняются и как они соединяются. Я предполагаю, что это линейный синхронный процесс, но как.

Есть ли визуальное объяснение того, как это работает в деталях? Я видел много диаграмм концепции двухсторонней привязки данных, но она очень поверхностна и не проясняет, как каждый компонент кода влияет на остальное. Например, если я изменяю переменную в контроллере, на что это влияет и как остальная часть кода теперь знает, как обрабатывать эти данные?

Я привык к небольшим приложениям JavaScript, которые выполняются синхронно. Я могу установить контрольные точки и наблюдать, что и когда выполняется. Но с Angular (и также реагировать) кажется, что все происходит одновременно и не может понять, что происходит, когда и где. Это похоже на подавляющую сетку соединений с небольшим количеством документации о том, когда / как / почему.

Когда и где выполняются различные угловые секции / компоненты? Я ищу объяснение, аналогичное this , но в отношении всех компонентов Angular (также React) или вообще для большинства фреймворков.

Answer 1

Как уже упоминалось в другом ответе, «волшебная вещь», на которую вы должны обратить внимание - это цикл AngularJs Digest.

1. Angular использует события в пользовательских директивах, таких как ng-click или ng-keyup
2. Событие обрабатывается Angular Context ($ scope), в котором есть наблюдатели, чтобы проверить, изменилось ли какое-либо свойство.
3. Angular делает это с помощью $ digest, который проходит через все наблюдатели

Весь этот процесс называется циклом дайджеста.

Официальные документы: https://docs.angularjs.org/guide/scope

Для более наглядного подхода вы можете следить за тремя видеороликами Digest Cycle на Coursera: https://www.coursera.org/lecture/single-page-web-apps-with-angularjs/lecture-14-part-1-digest-cycle-DeEZV

Answer 2

Основное отличие этих платформ от обычных Plain JS заключается в том, что они абстрагируют обновления DOM и привязки данных. Теперь это может показаться простым делом, но делать это правильно и с высокой производительностью не так-то просто в синхронном режиме, так как приложение будет зависать, когда что-то обновляется, и целое приложение обновляется сразу.

В AngularJS существует специальный пакетный цикл обновления, называемый $digest цикл, который выполняет все проверки DOM, наблюдает за изменениями переменных и обновляет все привязки данных. Он активируется при взаимодействии с пользователем (щелчок, зависание, прокрутка и т. Д.), Сетевых запросах и периодически.

Суть того, как это работает:

• Событие происходит.
• AngularJS запускает новый цикл.
• Ваш код JS работает.
• AngularJS запускает diff для ваших переменных области видимости, чтобы найти изменения и обновить DOM, если это необходимо.

Это означает, что код может обрабатываться нелинейным образом и в пакетном режиме, и, таким образом, это позволяет сделать так, чтобы данные обновлялись одновременно.

Если вы хотите узнать больше о компиляции и глубже погрузиться во внутренности AngularJS, это хорошая отправная точка https://code.angularjs.org/1.6.0/docs/api/ng/service/$compile, а также https://code.angularjs.org/1.6.0/docs/guide/scope