Вторая неделя мода Angular завершена, и я все еще жив. Это была целая неделя с сумасшедшим рабочим графиком и постоянным искушением поиграть в Borderlands 3 (которому, признаюсь, я поддался раз или два 😁), но мне удалось собрать несколько ответов на вопросы инструктора этой недели. Имейте это!
- Обсудите словами то, что вы узнали на уроке сегодня или на этой неделе.
Прошедшая неделя была наполнена большим количеством новой информации. Три основных момента обучения:
Angular Routing → Хотя еще многое предстоит узнать о функциях маршрутизации в Angular, до сих пор я понял, что из app-routing.module.ts вы можете определять пути, добавляя их в массив маршрутов как таковой:
В примере из класса this week свойству пути присваивается строка, которая будет отображаться как часть URL-адреса. В данном случае мы передали динамический путь с именем ‘:status’. Свойству компонента был присвоен компонент (TodoComponent), который мы хотим отображать при активации маршрута. Второй определенный маршрут имеет путь только « », что означает, что когда URL-адрес не содержит дополнительных путей (например, myawesomesite.com), будет отображаться TodoComponent.
Чтобы использовать различные маршруты, которые стали возможными благодаря нашему динамическому пути :status, мы используем routerLinks, которым мы также присваиваем параметр «status».
Излучатели событий Angular → Честно говоря, излучатели событий все еще немного странные для моего мыслительного процесса. Основная идея проста — передать объект или данные от дочернего элемента/компонента родительскому. Однако реализация этой концепции временами кажется немного запутанной. Итак, вот что я знаю об генерировании событий.
Подобно тому, как вы можете передавать объекты/данные дочернему компоненту от родителя через привязку (например, ‹confirmation-modal [todo]='todo'›‹/confirmation-modal›), вы также можете передавать такие вещи из дочернего компонента, объявив переменную, которая является генератором событий в сочетании с декоратором @output().
Затем вы создаете функцию, которая выполняется при действии (например, при нажатии кнопки). В этой функции изменение передается родительскому элементу.
Затем вам понадобится функция в родительском компоненте, которая получает данные и выполняется при обнаружении изменения.
Angular знает, как выполнить эту функцию, когда вы привязываете переменную события к функции в теге дочернего компонента следующим образом:
И альт, вот и все — по крайней мере один способ генерации событий между дочерним и родительским компонентами!
Скрытие элемента → Если вы хотите скрыть содержимое до наступления определенного события, вы можете использовать директиву *ngIf, привязанную к логическому оператору.
Когда логическое значение изменится на true, элемент отобразится на странице. О чем следует помнить, когда обрабатывается изменение логического значения. Если это произошло после того, как страница была отрисована, вы не увидите изменения до тех пор, пока страница не будет отрисована снова, или, по крайней мере, так было в моем опыте работы над моим текущим проектом Todo List.
2. Объясните разницу между аннотацией и декоратором в Angular?
Путаница, возникающая между аннотациями Java и декораторами Angular, связана с тем, что они оба используют один и тот же синтаксис, символ «@». В Angular мы повсюду видим декоратор @component() (или @input() или @Output()). В Java вы видите то же самое, но вот так:
Однако то, что происходит, отличается между двумя вариантами использования «@». Декоратор в Angular говорит Typescript вызвать функцию component() и передать ей функцию, следующую за декоратором. Правильно, вы передаете функцию в функцию.
Аннотации Java, с другой стороны, не изменяют действия скомпилированной программы, но связывают метаданные с элементами программы (geekforgeeks.com). Они напоминают комментарии и принимают только те константы, которые могут быть разрешены во время компиляции (beyondjave.net). Таким образом, хотя есть сходство в том, что обе реализации синтаксиса @ способствуют АОП (аспектно-ориентированному программированию), декоратор Angular является более надежной и элегантной реализацией синтаксиса. В Java 8 есть возможность создавать декораторы или что-то похожее на них, но похоже, что это не обязательно норма.
3. Каковы строительные блоки Angular?
Существует несколько различных важных частей приложения Angular, однако, как сказала сама команда Angular, основными строительными блоками приложения Angular являются NgModules, которые обеспечивают контекст компиляции для компонентов ( angular.io). Модули в Angular — это разделы общего приложения, разделенные на отдельные части, внутри которых находятся связанные фрагменты кода и функциональности (компоненты).
Итак, внутри модуля у вас будут компоненты, определяющие представления. Эти компоненты используют другие строительные блоки angular, такие как сервисы и директивы. Службы — это фрагменты кода, которые могут не относиться к конкретным компонентам и, следовательно, могут использоваться различными компонентами. Они внедряются в компоненты через внедрение зависимостей. Директивы являются частью функции привязки данных/свойств, которую включает Angular. Если вы помните публикацию прошлой недели, существует 3 типа директив — Атрибут, Структура и Компонент. Еще один ключевой аспект Angular, который мы уже кратко обсуждали в этом посте, — это модуль маршрутизации, мощный инструмент не только для определения путей, но и для проверки внешнего интерфейса.
4. Пожалуйста, объясните разницу между Angular и jQuery?
Несколько различий между Angular и jQuery:
- Angular — это фреймворк SPA (одностраничное приложение), основанный на машинописном языке. jQuery, однако, является библиотекой javascript.
- Поскольку jQuery — это библиотека, а не целая структура, ее часто легче освоить быстрее, чем Angular.
- jQuery имеет однонаправленную привязку данных, поэтому изменения в данных можно отслеживать только в одном направлении. Angular имеет двунаправленную или двустороннюю привязку данных. Это означает, что при обновлении данных модели обновляется и DOM, а при обновлении DOM обновляется и модель.
- У обоих есть компоненты, но этот термин означает разные вещи в зависимости от того, о чем вы говорите. Мы знаем о компонентах Angular, но компоненты jQuery — это кураторские наборы пользовательского интерфейса (educba.com). Итак, это заранее созданный набор интерфейсов, эффектов, виджетов и т. д., которые были созданы с использованием jQuery.
- У них разные списки функций.
— jQuery легкий, предлагает манипулирование CSS и DOM, совместим с разными браузерами и поддерживает Ajax и JSONP.
— Angular надежен, предлагает директивы, двустороннюю привязку и внедрение зависимостей, поддерживает API-интерфейсы MVC и REST и проверку форм.
5. Что такое ngOnInit()? Для чего он нужен и что бы вы в него добавили?
Я помню, как впервые увидел ngOnInit(), когда работал над учебником Traversy Angular. Это было так странно для меня. Кроме того, мне было до странности приятно перебирать все возможные способы его произношения, делая ударение на разных слогах. На самом деле это функция жизненного цикла или хук, который вы можете переопределить в своем компоненте. Это дает вам возможность выполнять код при инициализации компонента или директивы. Это напоминает мне методы инициализации, которые я использовал для написания классов Ruby, хотя эти методы больше похожи на конструкторы, чем на обработчики жизненного цикла.
Итак, что бы мы поместили в этот крючок? Чтобы ответить на этот вопрос, давайте начнем с другого хорошего вопроса — в чем на самом деле разница между ngOnInit() и конструктором? На первый взгляд кажется, что они оба делают одно и то же. И в каком-то смысле они это делают. Однако конструктор обрабатывается для создания дерева компонентов или DOM, которое «регистрирует» структуру родительских/дочерних компонентов и их данные. Сначала это происходит, а затем Angular выполняет так называемую фазу обнаружения изменений, на которой он обновляет привязки и вызывает ngOnInit() для родительского и дочернего компонентов.
Поэтому лучше всего сделать конструктор как можно более компактным, в основном используемым для внедрения сервисов, сохраняя при этом логику инициализации для функции ngOnInit(). (blog.angularindepth.com)
ngOnFinished() {
const endOfPost = «Это все, что у меня есть на данный момент. Надеюсь, вам понравился поток знаний, и вы можете использовать его с умом».
this.goodbye = this.Cheers!
}
P.S. Новости о захватывающих возможных событиях могут появиться в ближайшее время….
