Всем привет. Я вернулся со вторым днем ​​моего 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, добавляет эту кошку в список принял класс.

Спасибо, что нашли время, чтобы прочитать мою запись в блоге! Подписывайтесь на меня, чтобы получать сообщения в блоге о руде!