AngularJS - Введение в инъекцию зависимостей: Пособие для начинающих

Привет,野心勃勃ые программисты! Сегодня мы отправимся в увлекательное путешествие в мир AngularJS и одной из его наиболее мощных функций: инъекции зависимостей (DI). Не волнуйтесь, если эти термины сейчас кажутся вам непонятными - к концу этого руководства вы будете использовать их, как профессионал!

Что такое инъекция зависимостей?

Прежде чем мы углубимся в детали, давайте поймем, что такое инъекция зависимостей. Представьте, что вы готовите蛋糕. Вместо того чтобы собирать все ингредиенты самостоятельно, не было бы замечательно, если бы кто-то handed вам exactly то, что вам нужно, когда вам нужно это? Именно это делает инъекция зависимостей в программировании - она предоставляет компоненты (ингредиенты), которые вашему коду (蛋糕) нужно для правильной работы.

Теперь давайте рассмотрим различные способы реализации инъекции зависимостей в AngularJS.

Значение (Value)

Значение - самая простая форма инъекции зависимостей. Это как передать один ингредиент вашей функции для выпечки蛋糕.

var app = angular.module('myApp', []);

app.value('playerName', 'LeBron James');

app.controller('PlayerCtrl', function($scope, playerName) {
$scope.name = playerName;
});

В этом примере мы создаем значение 'playerName' и инъектируем его в наш контроллер. Контроллер может использовать это значение, как если бы это была локальная переменная.

Фабрика (Factory)

Фабрика - это как тесто для蛋糕а - это функция, которая создает и возвращает объект. Она сложнее, чем Значение, но предоставляет больше гибкости.

app.factory('playerFactory', function() {
return {
name: 'Stephen Curry',
team: 'Golden State Warriors',
getInfo: function() {
return this.name + ' играет за ' + this.team;
}
};
});

app.controller('PlayerCtrl', function($scope, playerFactory) {
$scope.playerInfo = playerFactory.getInfo();
});

Здесь мы создаем фабрику, которая возвращает объект с свойствами и методами. Контроллер может использовать эту фабрику для доступа к информации о игроке.

Сервис (Service)

Сервис аналогичен Фабрике, но вместо того чтобы возвращать объект, он возвращает экземпляр функции. Представьте это как специализированную пекарню, которая делает только один тип蛋糕а.

app.service('PlayerService', function() {
this.name = 'Kevin Durant';
this.team = 'Phoenix Suns';
this.getInfo = function() {
return this.name + ' играет за ' + this.team;
};
});

app.controller('PlayerCtrl', function($scope, PlayerService) {
$scope.playerInfo = PlayerService.getInfo();
});

Основное различие между Фабрикой и Сервисом - это как они инстанцируются. Сервис всегда singleton - в вашей программе существует только один экземпляр.

Провайдер (Provider)

Провайдер - самая сложная форма инъекции зависимостей в AngularJS. Это как иметь полностью оборудованную пекарню, которая может сделать любой тип蛋糕а, с любыми ингредиентами, любым способом, как вы хотите.

app.provider('playerProvider', function() {
var defaultName = 'Giannis Antetokounmpo';

return {
setName: function(name) {
defaultName = name;
},
$get: function() {
return {
getName: function() {
return defaultName;
}
};
}
};
});

app.config(function(playerProviderProvider) {
playerProviderProvider.setName('Luka Doncic');
});

app.controller('PlayerCtrl', function($scope, playerProvider) {
$scope.playerName = playerProvider.getName();
});

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

Константа (Constant)

Константа аналогична Значению, но может быть инъектирована на этапе конфигурации вашего приложения. Это как иметь рецепт, который вы всегда seguir exactamente, независимо от того, какой蛋糕 вы готовите.

app.constant('GAME_DURATION', 48);

app.config(function(GAME_DURATION) {
console.log('Баскетбольный матч длится ' + GAME_DURATION + ' минут');
});

app.controller('GameCtrl', function($scope, GAME_DURATION) {
$scope.duration = GAME_DURATION;
});

Константы полезны для значений, которые никогда не изменяются в течение всего приложения.

Пример: Создание менеджера баскетбольной команды

Теперь, когда мы рассмотрели все типы инъекции зависимостей, давайте соберем все вместе в более сложном примере.

var app = angular.module('basketballApp', []);

// Константа
app.constant('MAX_PLAYERS', 15);

// Значение
app.value('teamName', 'Angular All-Stars');

// Фабрика
app.factory('PlayerFactory', function() {
var players = [];
return {
addPlayer: function(name) {
players.push(name);
},
getPlayers: function() {
return players;
}
};
});

// Сервис
app.service('CoachService', function() {
this.name = 'Coach Angular';
this.motivate = function() {
return this.name + ' говорит: Давайте выиграем этот матч!';
};
});

// Провайдер
app.provider('gameProvider', function() {
var venue = 'Home Court';

return {
setVenue: function(v) {
venue = v;
},
$get: function() {
return {
getVenue: function() {
return venue;
}
};
}
};
});

app.config(function(gameProviderProvider) {
gameProviderProvider.setVenue('Angular Arena');
});

app.controller('TeamCtrl', function($scope, MAX_PLAYERS, teamName, PlayerFactory, CoachService, gameProvider) {
$scope.teamName = teamName;
$scope.maxPlayers = MAX_PLAYERS;
$scope.players = PlayerFactory.getPlayers();
$scope.coachMotivation = CoachService.motivate();
$scope.gameVenue = gameProvider.getVenue();

$scope.addPlayer = function(playerName) {
if ($scope.players.length < MAX_PLAYERS) {
PlayerFactory.addPlayer(playerName);
$scope.playerName = '';
} else {
alert('Команда полна!');
}
};
});

Вывод

Когда вы запустите это приложение, у вас будет полностью функциональный менеджер баскетбольной команды. Вы можете добавлять игроков в свою команду (до максимально разрешенного количества), видеть мотивацию тренера и знать, где состоится матч.

Вот таблица, резюмирующая различные типы инъекции зависимостей, которые мы рассмотрели:

Тип	Описание	Сценарий использования
Значение	Простейшая инъекция значения	Для инъекции простых значений
Фабрика	Возвращает объект	Для создания сервисов с сложной логикой
Сервис	Возвращает экземпляр функции	Для singleton сервисов
Провайдер	Конфигурируемый сервис factory	Для сервисов, которые требуют настройки до запуска приложения
Константа	Незменяемое значение, инъектируемое в config	Для константных значений, используемых по всему приложению

Помните, ключ к maîtriser инъекции зависимостей - это практика. Начните с простых инъекций и постепенно переходите к более сложным сценариям. Before you know it, вы будете создавать модульные, поддерживаемые приложения AngularJS, как профессионал!

Счастливого кодирования, будущие мастера AngularJS!

Credits: Image by storyset