Передача параметров в контроллер 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;
}]);

При таком подходе контроллер начнет работу уже с предварительно загруженными данными.

Кинга Идем в IT: пошаговый план для смены профессии

Удобный путь с ng-init

Для инициализации с передачей параметров можно использовать директиву ng-init:

HTML

Скопировать код

<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('Секретная приправа бабушки');

Сравнение:

Markdown

Скопировать код

До: 🥘                   // Только сваренные овощи
После: 🥘🌶️ (С добавлением) // Овощи со специальной приправой

Добавление параметров аналогично включению таинственного ингредиента в рецепт.

Полезные материалы

Руководство разработчика AngularJS – Контроллеры — подробное руководство по контроллерам в AngularJS.
Справочник API сервиса $controller в AngularJS — справочник по сервису $controller.
Передача данных между контроллерами в AngularJS — статья по обмену данными между контроллерами.
Понимание $scope и $watch в AngularJS — примеры работы с $scope и $watch.
Реализация решателей маршрутов в AngularJS — советы по решению маршрутов и активации контроллеров.
Фабрики, сервисы и провайдеры в AngularJS — разбор различий между фабриками, сервисами и провайдерами и примеры их использования.

Свежие материалы

Видео уроки по C#

6 сентября 2024

Как использовать Google Authenticator для двухфакторной аутентификации в Fortnite

6 сентября 2024

Видео уроки по JavaScript

6 сентября 2024