Angular — это современный, компонентно-ориентированный фреймворк для разработки веб-приложений, созданный и поддерживаемый Google. Angular был полностью переписан и впервые выпущен в 2016 году под названием Angular 2, чтобы отличать его от предыдущей версии — AngularJS, выпущенной в 2010 году. С тех пор Angular развивается как отдельная экосистема, получая регулярные мажорные обновления (Angular 3 был пропущен, последующие версии: 4, 5, …, 17 и т.д.).

Основное назначение Angular

Angular предназначен для создания SPA (Single Page Applications) и крупных корпоративных приложений. Он включает:

• двустороннюю привязку данных (two-way data binding),

• модульную архитектуру,

• систему компонентов,

• DI (Dependency Injection),

• встроенные инструменты маршрутизации, форм, валидации, HTTP,

• поддержку серверного рендеринга (Angular Universal),

• тесную интеграцию с RxJS.

Отличие Angular от AngularJS

Ключевые технические различия

1. Язык разработки

Angular использует TypeScript — строготипизированное надмножество JavaScript. Это повышает надёжность кода, улучшает рефакторинг, автодополнение и статический анализ. AngularJS использовал обычный JavaScript, что делало сложные приложения трудными для поддержки.

2. Архитектура компонентов

В Angular всё строится на компонентах и иерархии модулей. Каждый компонент:

• имеет @Component декоратор,

• использует шаблон (HTML),

• связан с логикой (TS-класс),

• может использовать DI и стили.

Пример Angular-компонента:

@Component({
selector: 'app-user',
template: \`<p>{{ user.name }}</p>\`
})
export class UserComponent {
@Input() user: User;
}

В AngularJS компоненты были реализованы через директивы и контроллеры, что создавало путаницу и сложности с масштабированием.

3. Dependency Injection

Angular имеет встроенный, иерархически организованный DI-контейнер. Он позволяет определять зависимости через конструктор и инжектить сервисы во вложенных уровнях компонентов. В AngularJS DI был декларативным и более ограниченным (через массивы зависимостей и $inject).

constructor(private userService: UserService) {}

4. Улучшенная производительность

Angular применяет:

• AoT (Ahead-of-Time) компиляцию — преобразует Angular HTML + TS в нативный JS до запуска,

• Ivy-рендерер — эффективный движок обновления DOM,

• tree shaking — удаление неиспользуемого кода.

AngularJS обновлял DOM через $digest-циклы, что снижало производительность при большом объёме данных.

5. Работа с формами

Angular предлагает два подхода:

• Template-driven forms — декларативные формы через шаблон;

• Reactive Forms — программируемые формы через API и FormControl.

Пример Reactive формы:

form = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
});

В AngularJS использовался ng-model, что ограничивало кастомизацию и валидацию.

6. Routing

Angular имеет встроенную маршрутизацию с lazy loading, guards, resolve, params и вложенными маршрутами.

const routes: Routes = \[
{ path: 'home', component: HomeComponent },
{ path: 'users/:id', component: UserDetailComponent }
\];

В AngularJS роутинг реализовывался через ngRoute или стороннюю библиотеку ui-router.

7. Модули

Angular использует систему NgModules. Каждый функциональный блок приложения (auth, dashboard, admin) можно оформить как модуль. Это облегчает lazy loading и повторное использование.

@NgModule({
declarations: \[LoginComponent\],
imports: \[CommonModule, FormsModule\],
exports: \[LoginComponent\]
})
export class AuthModule {}

В AngularJS отсутствовала чёткая модульная структура.

8. RxJS и реактивность

Angular тесно интегрирован с RxJS. Все асинхронные потоки (HTTP-запросы, события, состояния) могут обрабатываться через Observable, Subject, BehaviorSubject, операторы (map, filter, mergeMap и т.д.).

this.http.get('/api/data').pipe(
map(response => response.items)
)

AngularJS использовал Promise или $http, не имел реактивной модели.

9. Инструменты и CLI

Angular CLI предоставляет:

• генераторы (ng generate component)

• запуск (ng serve)

• тестирование (ng test, ng e2e)

• сборку (ng build --prod)

• конфигурации окружений

AngularJS не имел официального CLI — сборка зависела от Grunt/Gulp/Webpack вручную.

10. Поддержка и жизненный цикл

• Angular активно поддерживается Google.

• AngularJS объявлен end-of-life с 31 декабря 2021 года — не получает обновлений и патчей безопасности.

• Angular имеет стабильный цикл релизов (2 мажорных версии в год) и долгосрочную поддержку LTS.