Всем привет. Я вернулся со вторым днем моего 100-дневного испытания кода. Сегодня мы узнаем о сервисах и директивах!
Что такое услуги?
Сервисы — это функции JavaScript, которые помогают нам выполнить задачу. Например, если у вас есть приложение, которому необходимо отправлять уведомления клиенту, у вас будет NotificationService. Сервисы можно использовать повторно, и это часть того, почему Angular так хорош. Мы можем просто продолжать повторно использовать наши услуги, чтобы нам не приходилось повторяться.
Как мы используем службы?
BY с помощью внедрения зависимостей. Внедрение зависимостей позволяет нам указать angular, к чему мы хотим, чтобы наши контроллеры имели доступ.
Допустим, у нас есть 500 различных сервисов в нашем приложении Angular, но мы хотим, чтобы наш контроллер имел доступ только к трем из них. Мы бы передали сервисы, которые нам нужны, в качестве параметров для нашего контроллера, например:
И наш сервис будет выглядеть примерно так:
Примечание о внедрении зависимостей и минимизации.
Если вы хотите использовать минимизацию при использовании внедрения зависимостей, вам придется сделать что-то немного другое. Если вы хотите сделать меньшую функцию, вам придется внедрить свои службы в контроллер. Если вы это сделаете, вы можете назвать параметры как угодно. См. код ниже:
Поговорим о директивах.
Что такое директива?
Директива — это «маркер» в HTML, который прикрепляет действие к HTML. Существует два типа директив — событийные и поведенческие. Директивы событий обрабатывают все события, которые может использовать HTML. Поведенческие директивы манипулируют DOM. Angular также поставляется с кучей встроенных директив!
Директивы на основе событий
Если у вас есть опыт работы с JavaScript, я уверен, что вы видели приведенный ниже код при создании прослушивателей событий.
Angular использует встроенный ng-click и устанавливает его равным «vm.myFunction()». vm перед вызовом функции не обязательно должен быть vm, это то, что я назвал своим. Это то, что вы назвали своим контроллером в своем ControllerAs. Ваша функция должна существовать внутри вашего контроллера.
Поведенческие директивы
Короче говоря, поведенческие директивы позволяют нам манипулировать DOM. Angular поставляется с множеством директив поведения при предварительной загрузке, что делает его очень простым.
В JavaScript, если бы я хотел перебрать массив объектов и отобразить их, вы бы сделали что-то вроде этого:
Это будет работать нормально, пока наш массив кошек не начнет получать новые объекты или мы не начнем удалять объекты. Это может сильно испортить наши данные. К счастью, Angular поможет вам! Мы можем использовать ng-repeatи следующий код в вашем HTML-файле:
и этот код в вашем контроллере:
ng-модель
Это еще одна распространенная директива, которая устанавливает значение ввода равным значению в контроллере.
Это заполнит наш ввод любым значением имени пользователя в нашем контроллере, тогда значение ввода будет использоваться для переназначения значения имени пользователя.
ng-класс
Если вам нужно динамически удалять или добавлять классы, директива ng-class для вас! ng-class принимает объект, где ключи — это класс, который вы хотите добавить динамически, а значение — выражение. Если выражение оценивается как истинное, класс будет добавлен. Если он оценивается как false, класс будет удален. Мы собираемся добавить ng-класс в наш пример ng-repeat.
ng-repeat="cat in vm.cats" сообщает Angular, что мы хотим выполнить итерацию по массиву cats и поместить значение каждого объекта в переменную, кот. Строка 5 выглядит сложной, но на самом деле она очень похожа на то, как мы пишем выражение в ванильном JavaScript. Это просто проверяет истинное значение cat.adopted. Если выражение возвращает истину, оно напечатает «Найдена семья», но если оно ложно, оно вернет «ищу семью :(».
ng-class=»{'adopted': cat.adopted}» проверяет наше значение cat.adopted и, если возвращает true, добавляет эту кошку в список принял класс.
Спасибо, что нашли время, чтобы прочитать мою запись в блоге! Подписывайтесь на меня, чтобы получать сообщения в блоге о руде!