Как перейти с jQuery на AngularJS? Мысли в стиле Angular для разработчика на jQuery

Главное отличие: работайте с данными, а не с DOM

В jQuery вы управляете страницей напрямую: нашли элемент, изменили его. В AngularJS вы управляете состоянием (данными), а фреймворк сам синхронизирует DOM. Забудьте про $('#id') — в AngularJS DOM — это просто отражение ваших данных.

Пример 1: Загрузка и отображение списка пользователей

jQuery-подход: вы сами формируете HTML и вставляете его.

AngularJS-подход: вы храните массив пользователей в $scope, а шаблон автоматически отображает его.

// Контроллер AngularJS
app.controller('UserController', function($scope, $http) {
    $scope.users = []; // данные

    $http.get('/api/users').then(function(response) {
        $scope.users = response.data; // просто обновляем данные
        // DOM обновится сам!
    });
});

<!-- Шаблон (HTML с директивами Angular) -->
<ul>
    <li ng-repeat="user in users">
        {{ user.name }} — {{ user.email }}
    </li>
</ul>

Всё! Никакого .html(). Директива ng-repeat сама создаст нужные <li> и обновит их, когда $scope.users изменится.

Пример 2: Показать/скрыть блок по клику

jQuery: $('#details').toggle();

AngularJS: используем переменную состояния и директиву ng-show или ng-if.

// Контроллер
$scope.isDetailsVisible = false; // начальное состояние

$scope.toggleDetails = function() {
    $scope.isDetailsVisible = !$scope.isDetailsVisible; // меняем данные
};

<!-- Шаблон -->
<button ng-click="toggleDetails()">Показать/скрыть детали</button>
<div ng-show="isDetailsVisible">
    <!-- Этот блок показывается, когда isDetailsVisible === true -->
    <p>Детальная информация...</p>
</div>

Вы меняете логическую переменную, а Angular сам добавляет/убирает CSS-класс ng-hide или удаляет элемент из DOM (если используете ng-if).

Ключевые принципы перехода с jQuery на AngularJS

• Не трогайте DOM вручную. В контроллерах и сервисах не должно быть document.getElementById или jQuery-селекторов. Вся работа с DOM — только через директивы.
• Думайте в терминах модели. Спросите себя: «Какие данные я хочу показать?» вместо «Какой элемент я хочу изменить?».
• Используйте директивы для поведения. Если нужно создать кастомный виджет (например, слайдер или датапикер), пишите директиву, а не jQuery-плагин. Директива может использовать jQuery внутри, но она должна работать с Angular-данными.
• Помните про двустороннее связывание. Изменения в модели автоматически обновляют представление, и наоборот (через ng-model).
• Избегайте ручных событий. Вместо $('#btn').on('click') используйте ng-click в шаблоне.

Что делать, если очень хочется использовать jQuery?

AngularJS не запрещает jQuery, но требует правильной интеграции. Если вам нужно подключить jQuery-плагин (например, для анимации), делайте это в директиве в функции link:

app.directive('myJqueryWidget', function() {
    return {
        link: function(scope, element, attrs) {
            // element — это jqLite (или jQuery, если подключён)
            element.myPlugin({
                onChange: function(value) {
                    // Обязательно сообщаем Angular об изменении
                    scope.$apply(function() {
                        scope.myValue = value;
                    });
                }
            });
        }
    };
});

Запомните: в AngularJS вы строите приложение из данных, а jQuery — это инструмент для низкоуровневых операций, который используется только в крайнем случае.

// jQuery: весь код в одном месте
$.getJSON('/data', function(data) {
    // ... обработка и отображение
});
$('#btn').click(function() { ... });

app.factory('UserService', function($http) {
    return {
        getUsers: function() {
            return $http.get('/api/users');
        }
    };
});

// В контроллере
app.controller('MainCtrl', function($scope, UserService) {
    UserService.getUsers().then(function(response) {
        $scope.users = response.data;
    });
});