Получить профессию в Skypro
Передача параметров в контроллер AngularJS при создании
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для инициализации контроллера AngularJS с передачей ему параметров используйте свойство resolve в настройках маршрутизации. Если возникает потребность получить динамические значения из URL, к вашим услугам сервис $routeParams. Образец кода представлен ниже:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/user/:userId', {
resolve: {
userData: ['$route', 'UserService',
function($route, UserService) {
return UserService.getUser($route.current.params.userId);
}
]
},
controller: 'UserController'
});
}]);
app.controller('UserController', ['$scope', 'userData', function($scope, userData) {
$scope.user = userData;
}]);При таком подходе контроллер начнет работу уже с предварительно загруженными данными.
Удобный путь с ng-init
Для инициализации с передачей параметров можно использовать директиву ng-init:
<div ng-controller="MyController" ng-init="init('Эврика!')"></div>app.controller('MyController', ['$scope', function($scope) {
$scope.init = function(secretMessage) {
$scope.message = secretMessage;
};
}]);Однако использование ng-init рекомендуется ограничивать лишь созданием псевдонимов для сложных выражений и улучшения читаемости кода.
Продвинутые приемы с $attrs и $resource
Для большей контролируемости можно обращаться к атрибутам элементов с помощью $attrs и обрабатывать возможные ошибки при инициализации контроллера.
app.controller('MyController', ['$scope', '$attrs', function($scope, $attrs) {
if ($attrs.myParam) {
$scope.param = $attrs.myParam;
} else {
throw new Error('Требуется установить атрибут myParam.');
}
}]);Сервис $resource даст возможность оптимизировать API запросы при инициализации контроллера.
А как насчет module.value и Service?
Использование app.value() позволяет назначить начальные параметры, а сервисы облегчают процесс инициализации и его модуляризацию:
app.value('initialParam', 'Избранный');
app.service('InitService', ['initialParam', function(initialParam) {
this.data = initialParam;
}]);
app.controller('MyController', ['$scope', 'InitService', function($scope, InitService) {
$scope.init = function() {
$scope.param = InitService.data;
};
}]);Ручная инициализация с помощью angular.bootstrap
Если на странице несколько приложений AngularJS, используйте angular.bootstrap для их инициализации с передачей конфигурационных параметров:
angular.module('myApp', []);
var configData = { key: 'Приготовьтесь, вперед' };
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});Структурирование для успеха
Размещайте контроллеры в отдельных файлах, чтобы структура кода была более упорядоченной:
// app.js
angular.module('myApp', []);
// controller.js
angular.module('myApp').controller('MyController', [...]);Примените module.value или module.constant для инъекции редко изменяющихся параметров:
angular.module('myApp').value('configParam', 'Танцующий розовый единорог');Освоение инъекции зависимостей и повторного использования
Для создания модульного, удобного для поддержки и многоразового кода реализуйте инъекцию зависимостей:
app.controller('MyController', ['configParam', function(configParam) {
this.config = configParam;
}]);Хитрости с URL-параметрами и $routeParams
Используйте $routeParams для извлечения параметров из URL и $routeProvider для настройки маршрутов:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/item/:itemId', {
templateUrl: 'item.html',
controller: 'ItemController'
});
}]);
app.controller('ItemController', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.itemId = $routeParams.itemId;
}]);Визуализация
Внедрение данных в контроллер можно представить как добавление особого ингредиента в рецепт:
function RecipeController(ingredient) {
this.ingredient = ingredient;
}
let secretRecipe = new RecipeController('Секретная приправа бабушки');Сравнение:
До: 🥘 // Только сваренные овощи
После: 🥘🌶️ (С добавлением) // Овощи со специальной приправойДобавление параметров аналогично включению таинственного ингредиента в рецепт.
Полезные материалы
- Руководство разработчика AngularJS – Контроллеры — подробное руководство по контроллерам в AngularJS.
- Справочник API сервиса $controller в AngularJS — справочник по сервису
$controller. - Передача данных между контроллерами в AngularJS — статья по обмену данными между контроллерами.
- Понимание $scope и $watch в AngularJS — примеры работы с $scope и $watch.
- Реализация решателей маршрутов в AngularJS — советы по решению маршрутов и активации контроллеров.
- Фабрики, сервисы и провайдеры в AngularJS — разбор различий между фабриками, сервисами и провайдерами и примеры их использования.