Главная JavaScript Топ-7 малоизвестных функций Angular, которые должен знать каждый разработчик | Акашминды
Angular — это фреймворк JavaScript, который используется для создания веб-приложений. Это один из самых популярных фреймворков, который используется многими крупными компаниями. Angular имеет множество функций, которые делают его отличным выбором для веб-разработки.
Однако есть некоторые менее известные функции, о которых должен знать каждый разработчик.
Это может помочь нам, сделав наш код более удобным для сопровождения и тестирования. Это также может помочь нам улучшить производительность наших приложений. Angular предоставляет очень классную функцию, которую мы можем использовать в нашем приложении, но есть некоторые менее известные функции angular, о которых многие из нас не знают.
Каждый разработчик знает, что Angular — мощный фреймворк. Однако есть некоторые менее известные функции Angular, о которых должен знать каждый разработчик.
1. Автономный компонент
Это одна из многих последних функций Angular, которые предлагает Angular. Автономный компонент позволяет создать автономный модуль, который можно использовать в любом приложении Angular. Это одна из новых функций angular
Это чрезвычайно мощная функция, которую можно использовать для создания повторно используемых компонентов.
Автономный компонент не требует добавления ngModule, но он может работать без модуля. это основная особенность автономного компонента. Вот полное руководство по автономным компонентам для справки.
Наряду с автономным компонентом существуют также автономные пайпы и директивы.
@Component({
selector: 'app-book-list',
standalone: true,
imports: [CommonModule, RouterModule, MatButtonModule],
template: `
<section>
<div class="grid-container">
<ng-container *ngFor="let book of bookService?.books; let i = index">
<div class="grid-item" [routerLink]="'/details/' + i">
<h3>{{ book?.name }}</h3>
<img width="200" height="200" [src]="book?.imageUrl" [alt]="book?.name"/>
<div class="">
<button mat-raised-button>Add to cart</button>
</div>
</div>
</ng-container>
</div>
</section>
`,
styles: [
],
})
export class BookListComponent implements OnInit {
constructor(readonly bookService: BooksService) { }
ngOnInit(): void { }
}2. множественное число
Ngplural — это директива Angular, которую можно использовать для отображения различного контента в зависимости от количества элементов в коллекции.
Например, вы можете использовать ngplural для отображения сообщения типа «Нет элементов», если коллекция пуста, или «Есть 1 элемент», если коллекция содержит только один элемент.
В дополнение к отображению различного контента в зависимости от количества элементов в коллекции, ngplural также может использоваться для множественного числа текста. Например, если вы хотите отобразить сообщение «У вас есть 5 сообщений», вы можете использовать ngplural для множественного числа слова «сообщение».
В целом, ngplural — полезная директива, которая может помочь сделать ваши приложения Angular более удобными для пользователя.
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html' }) export class AppComponent { count :number = 5; }<span [ngPlural]="count"> <ng-template ngPluralCase="2">there are 2 items.</ng-template> <ng-template ngPluralCase="one">there is one item.</ng-template> <ng-template ngPluralCase="=4">there are four items.</ng-template> <ng-template ngPluralCase="many">there are many items.</ng-template> <ng-template ngPluralCase="5">there are five items.</ng-template> <ng-template ngPluralCase="no">there are no items.</ng-template> </span>
3. Свойство документа Javascript
Если вы работаете с Angular, вам может понадобиться доступ к объектной модели документа (DOM). Свойство документа — это глобальный объект, представляющий HTML-документ.
Вы можете использовать свойство документа для запроса и управления DOM.
import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
constructor(@Inject(DOCUMENT) documet: Document) {
console.log(document)
}
renderImageElement() {
this.document.getElementById("image")
}4. Метатеги в angular
Мета-теги являются важной частью SEO (поисковая оптимизация), потому что они помогают поисковым системам понять, о чем веб-страница.
Включая релевантные ключевые слова в метатеги, веб-мастера могут повысить свои шансы на высокий рейтинг на страницах результатов поисковых систем (SERP).
Хотя метатеги не гарантируют высокий рейтинг в поисковой выдаче, они по-прежнему являются ценным инструментом для SEO в angular. Помимо помощи в исследовании ключевых слов, метатеги также могут помочь повысить рейтинг кликов (CTR) из поисковой выдачи.
Хорошо оптимизированный метатег может привлечь пользователей на ваш веб-сайт и побудить их нажать на ваше объявление.
import { Meta } from "@angular/platform-browser"
@Component({
...
})
export class TestComponent implements OnInit {
constructor(private meta: Meta) {}
ngOnInit() {
meta.updateTag({name: "title", content: "My title"})
meta.updateTag({name: "description", content: "My page descripton"})
meta.updateTag({name: "image", content: "./assets/profile.jpg"})
meta.updateTag({name: "site", content: "My Site content"})
}
}5. AppInitializer в angular
AppInitializer — это служба, предоставляемая Angular, которая позволяет разработчикам запускать код инициализации после загрузки приложения. Это особенно полезно для обеспечения постоянной загрузки определенных модулей и для настройки глобального состояния перед запуском приложения.
Инициализаторы приложений регистрируются в Angular с помощью токена APP_INITIALIZER. Когда AppInitializer выполняется, он получает инжектор в качестве своего первого аргумента. Этот инжектор можно использовать для разрешения зависимостей, необходимых коду инициализации.
Как только все AppInitializers будут выполнены, Angular начнет запуск процесса начальной загрузки приложения.
function runOnInitilization() {
...
}
@NgModule({
providers: [
{ provide: APP_INITIALIZER, useFactory: runOnInitilization }
]
})6. Строго типизированные формы
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
})
export class UserComponent {
profileForm = new FormGroup({
firstName: new FormControl('Akash'),
lastName: new FormControl('chauhan'),
mobile: new FormControl('099909888'),
address: new FormGroup({
street: new FormControl('32 street'),
city: new FormControl('chandigarh'),
state: new FormControl('Punjab'),
zip: new FormControl('160019'),
}),
});
populateName() {
this.profileForm.controls.firstName.setValue('Akashminds');
}7. Интерполяция шаблона
Интерполяция шаблонов — это функция angular, которая позволяет вставлять переменные в ваши HTML-шаблоны. Это может быть полезно для отображения данных из вашей базы данных или для того, чтобы сделать ваш шаблон более динамичным.
Чтобы использовать интерполяцию шаблона, вам сначала нужно создать переменную в классе вашего компонента.
Затем вы можете вставить эту переменную в свой шаблон, используя синтаксис двойных круглых скобок. (( переменная )) вместо фигурных скобок, как мы обычно используем. {{ переменная }}.
@component({
selector: "app"
interpolation: ["((","))"],
template: '
<hello name="(( name ))"> </hello>
',
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
}Заключение
В заключение, каждый разработчик Angular должен использовать менее известные функции фреймворка для создания более надежных и безошибочных приложений.
Использование этих функций поможет разработчикам избежать распространенных ошибок и сделать их код более читабельным и удобным в сопровождении.
Angular включает в себя множество функций, которые упрощают и ускоряют разработку.
С выпуском Angular 14 было много разговоров о его функциях. Фреймворк включает в себя множество функций, которые могут помочь нам в разработке, таких как автономные компоненты, строго типизированные формы и автозаполнение Angular CLI.
Первоначально опубликовано на https://www.akashminds.com.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
