Hack Frontend Community

Разница между AngularJS и Angular

Кратко: AngularJS vs Angular

ХарактеристикаAngularJS (v1.x)Angular (v2+)
Год релиза20102016
ЯзыкJavaScriptTypeScript
ПодходMVC / MVVMКомпонентно-ориентированный
АрхитектураКонтроллеры, директивы, $scopeКомпоненты, модули, сервисы
ИнструментыБез встроенного CLICLI для генерации и управления проектами
ПроизводительностьНижеНамного выше
ПоддержкаУстаревшаяАктивно поддерживается

Основные отличия

Язык программирования

  • AngularJS: написан и использует JavaScript.
  • Angular: основан на TypeScript (надстройка над JavaScript с типами).

TypeScript делает код более предсказуемым, самодокументируемым и легко поддерживаемым.

Архитектура

  • AngularJS использует MVC/MVVM: контроллеры, шаблоны и $scope.
  • Angular построен на компонентах и модулях — каждый блок UI изолирован, переиспользуем и масштабируем.

Инструментарий и сборка

  • В AngularJS нет встроенной системы сборки — нужно всё настраивать вручную.
  • В Angular есть мощный CLI для генерации компонентов, сервисов, тестов и запуска сборки (ng build, ng generate, ng serve).

Производительность

  • AngularJS использует двустороннее связывание данных (two-way binding) и dirty checking, что может замедлять большие приложения.
  • Angular использует однонаправленный поток данных + ChangeDetectionStrategy, что значительно ускоряет рендер.

DI (Внедрение зависимостей)

  • AngularJS поддерживает DI, но не так гибко.
  • Angular имеет мощную систему DI на уровне классов, модулей и компонентов.

Поддержка

  • AngularJS считается устаревшим — Google прекратил официальную поддержку 31 декабря 2021 года.
  • Angular — активно развивается, регулярно обновляется (v16, v17 и далее).

Пример: разный синтаксис

AngularJS (v1.x)

<div ng-app="app" ng-controller="MainCtrl">
  <p>{{ message }}</p>
</div>

<script>
  angular.module("app", []).controller("MainCtrl", function ($scope) {
    $scope.message = "Hello from AngularJS";
  });
</script>

Angular (v2+)

@Component({
  selector: 'app-root',
  template: `<p>{{ message }}</p>`,
})
export class AppComponent {
  message = 'Hello from Angular';
}

Важно:

AngularJS больше не рекомендуется для новых проектов. Angular (v2+) — полностью новая платформа, созданная с нуля.