Последняя версия популярного JavaScript-фреймворка Angular содержит некоторые новые функции и улучшения, в том числе компоненты на основе MDC, обновления материалов angular и т. д.
Angular 15 был выпущен 16 ноября 2022 года. Последняя версия Angular содержит десятки доработок, улучшений и улучшений.
С этими изменениями Angular v15 — это еще один шаг вперед в повышении эффективности и простоты использования фреймворка. Разработчики могут начать работу с последней версией Angular, обновив свои существующие проекты или создав новые с помощью интерфейса командной строки Angular.
Предварительная версия для разработчиков для автономных API
В angular v14 мы представили автономные API, которые теперь доступны для публичного использования. После нескольких месяцев предварительной версии для разработчиков мы рады сообщить, что новые автономные API теперь доступны для всех разработчиков и теперь являются частью стабильной поверхности API.
Новые автономные API обеспечивают более простой и эффективный способ доступа к данным и службам Google. Теперь разработчики могут получать доступ к данным и службам из одного API, а не из нескольких API. Это упрощает разработку приложений, работающих с данными и сервисами Google.
С помощью этого автономного API вы сможете загрузить угловое приложение, используя только один компонент таким образом…
import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: ` ... <image-grid [images]="imageList"></image-grid>`,
})
export class PhotoGalleryComponent {
// component logic
}
bootstrapApplication(PhotoGalleryComponent);
Автономные API-интерфейсы с поддержкой дерева для маршрутизатора
Angular 15 уже здесь, а вместе с ним новые функции и обновления! Одним из самых захватывающих дополнений являются новые автономные API-интерфейсы для маршрутизатора в последней версии angular.
Что это значит для разработчиков? Что ж, с этими новыми API теперь вы можете создавать небольшие автономные маршрутизаторы, которые можно легко использовать в любом приложении Angular. И самое главное, они полностью многоразовые!
Вы можете создать приложение, которое использует автономные API-интерфейсы маршрутизатора с функцией множественного маршрута, которая позволяет объявить корневой маршрут!
Для этого используйте следующее объявление:
export const appRoutes: Routes = [
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes').then(routes =>
routes.lazyRoutes)
}
];
И объявление этого lazyRoutes:
import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
И повторно зарегистрируйте маршруты с помощью providerRouter в bootstrapApplication, API-интерфейс providerRouter — это API-интерфейс с поддержкой дерева, и это мощный способ управления вашей маршрутизацией.
Он предоставляет чистый декларативный способ определения ваших маршрутов и простой API для доступа к ним. API-интерфейс providerRouter прост в использовании и упрощает управление вашими маршрутами.
Вот как мы включаем его в API providerRouter.
bootstrapApplication(AppComponent,
{
providers: [ provideRouter(appRoutes) ]
});
Это огромный шаг вперед для Angular, который значительно облегчит разработчикам создание мощных и эффективных приложений.
Поэтому, если вы хотите создать маршрутизатор в Angular 15, обязательно ознакомьтесь с этими новыми API!
Выпуск на основе MDC для компонентов до стабильной версии
Объявлен новый выпуск компонентов на основе MDC (компоненты материального дизайна для веб-сайтов) в стабильную версию, рефакторинг выполнен сейчас. Благодаря этой функции angular позволяет ему лучше соответствовать спецификации материала и коду восстановления.
Это отличная новость для тех, кто ждал новых функций и улучшений, внесенных в угловой материал.
Есть много изменений для компонентов, которые были обновлены со стилем и структурами DOM и другими новыми вещами в угловом материале.
Здесь Вы можете посмотреть список всех изменений компонентов.
Предыдущая реализация всех компонентов теперь устарела. Вы по-прежнему можете получить доступ к устаревшему импорту, используя модуль, имеющий устаревшее слово, подобное этому:
import {MatLegacyButtonModule} from @angular/material/legacy-button';
вместо
import {MatButtonModule} from '@angular/material/button';
Новые улучшения в компонентах
Команда Angular решила 4-ю по количеству голосов проблему — поддержку выбора диапазона в ползунке
Ползунок диапазона — одна из новых функций в Angular Material. Это позволяет лучше контролировать, как пользователи выбирают значение из заданного диапазона.
Вот как вы можете использовать этот ползунок ввода диапазона:
<mat-slider min="200" max="500"> <input value="300" matSliderStartThumb> <input value="500" matSliderEndThumb> </mat-slider>
Ползунок диапазона углового материала:
Можно указать плотность по умолчанию
Этот выпуск решает еще одну популярную проблему Github. Теперь вы можете указать плотность по умолчанию для всех компонентов в приложении, настроив тему.
С помощью этой функции вы можете получить доступ к широкому спектру улучшений, вы получаете улучшенную семантику ARIA, вы можете настроить пользовательские коэффициенты контрастности, а размеры сенсорных целей увеличены в этом выпуске.
@use '@angular/material' as mat;
$theme: mat.define-light-theme((
color: (
primary: mat.define-palette(mat.$red-palette),
accent: mat.define-palette(mat.$blue-palette),
),
typography: mat.define-typography-config(),
density: -2,
));
@include mat.all-component-themes($theme);
Маршрутизатор разворачивает импорт по умолчанию
Здесь вы можете сделать маршрутизатор более простым, уменьшить шаблон в импорте маршрутизации с помощью этой классной функции angular v15,
позвольте мне показать вам пример:
Когда мы лениво загружали автономный компонент, мы использовали импорт компонента следующим образом:
{
path: 'lazy',
loadComponent: () => import('./lazy-file').then(m => m.LazyComponent)
}
Но теперь вы можете сделать так:
{ path: 'lazy', loadComponent: () => import('./lazy-file'), }
Оптимизация изображений с помощью API композиции Angular Image Directive
Angular v15 API композиции директив изображения позволяет разработчикам динамически компоновать изображения в своих приложениях Angular. API предоставляет способ динамического изменения URL-адреса изображения, что позволяет загружать разные изображения в зависимости от условий в приложении.
Это может быть полезно для отображения изображений, характерных для пользователя, или для загрузки различных изображений в зависимости от используемого устройства.
API композиции Directive Image прост в использовании и может быть реализован в любом приложении Angular.
import { NgOptimizedImage } from '@angular/common';
// Include it into the necessary NgModule
@NgModule({ imports: [NgOptimizedImage], })
class AppModule {}
// ... or a standalone Component
@Component({
standalone: true,
imports: [NgOptimizedImage]
})
class MyStandaloneComponent {}
Директива NgOptimizedImage — это директива изображения, которая включает API композиции. Он позволяет динамически изменять источник, размер и другие свойства изображения без перезагрузки страницы.
Это можно использовать для улучшения взаимодействия с пользователем за счет сокращения времени, необходимого для загрузки страницы.
Список CDK
Angular v15 выпустил `cdk-listbox`, это отличный способ предоставить список опций пользователю в Angular. Он прост в использовании и может быть настроен в соответствии с потребностями любого приложения.
`cdk-listbox` имеет несколько функций, которые делают его идеальным выбором для использования в приложениях Angular. он прост в использовании и может быть настроен в соответствии с потребностями любого приложения.
Он поддерживает множественный выбор, что означает, что пользователь может выбрать более одного варианта из списка.
Модуль @angular/cdk/listbox предоставляет способ настроить взаимодействие на основе шаблона списка WAI ARIA, где вы можете использовать все ожидаемое поведение и опыт.
- поддержка двунаправленного текста
- взаимодействие с клавиатурой
- выделение элемента
Функциональная защита маршрутизатора
Функциональная защита маршрутизатора — это новая функция в Angular v15. В этом выпуске шаблонный код сокращает работу с API автономного маршрутизатора с поддержкой дерева.
Это обеспечивает более гибкий способ управления доступом к маршрутам, чем традиционный угловой маршрутизатор. Вы можете использовать функциональные средства защиты маршрутизатора для управления доступом к маршрутам на основе любых критериев, которые вы хотите.
Давайте разберемся с функциональной защитой маршрутизатора на примере:
Ранее
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}
const route = { path: 'somePath', canActivate: [MyGuardWithDependency] };
А теперь:
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};
Улучшения Angular Cli
API автономного компонента Angular теперь стабилен, и вы можете создать свой автономный компонент с помощью этой команды:
Компонент ng g — автономный
Мы обновили конфигурацию, удалив test.ts, polyfills.ts и среды. на этот раз вы можете указать файл polyfill непосредственно в angular.json в разделе polyfills.
"polyfills": [ "zone.js" ]
Заключение
В заключение, эта последняя версия Angular (Angular v15) включает в себя ряд новых функций и улучшений, включая функциональные средства защиты маршрутизатора. Эта новая версия Angular обеспечивает более эффективный способ обработки маршрутизации, упрощая разработчикам управление большими приложениями.
Кроме того, последняя версия angular включает в себя ряд других улучшений, таких как более эффективный компилятор и улучшенная обработка ошибок.
новые функции и усовершенствования в Angular v15 определенно заслуживают внимания. Так что вперед и обновите свою версию Angular уже сегодня!
Похожие статьи
Как создать автономные компоненты Angular (ngModule не требуется) в angular.
Топ-7 малоизвестных функций Angular, о которых должен знать каждый разработчик.
Первоначально опубликовано на https://www.akashminds.com.
