Что такое templateUrls и styleUrls в Angular?

Изучите основы рендеринга HTML и CSS на примере Angular

Используя Angular, вы можете разделять страницы, диалоги или другие разделы вашего приложения на компоненты. Компоненты в приложении Angular в основном состоят из HTML, CSS и файлов TypeScript

В файле TypeScript можно добавить любую логику, необходимую для работы пользовательского интерфейса, например, получение данных с сервера

Вы также можете отобразить HTML и CSS компонента с помощью TypeScript, указав атрибуты шаблона и стиля. Вы можете использовать templateUrl или styleUrls для ссылки на внешние файлы HTML или CSS

Что такое шаблон и templateUrl в Angular?

Когда вы создаете свой собственный компонент в Angular, вы можете отобразить HTML для него с помощью шаблона. Существует два способа написания шаблона HTML:

В новом компоненте можно установить атрибуты ‘template’ или ‘templateUrl’ в зависимости от того, где вы пишете свой HTML

1. Создайте новое приложение Angular.
2. В терминале вашего приложения выполните команду ng generate component для создания нового компонента. Назовите новый компонент ‘about-page’.ng generate component about-page
3. В файле app.component.html замените текущий код тегами для вашего нового компонента:<app-about-page></app-about-page>
4. Откройте файл about-page.component.ts. Если у вас не так много HTML-кода, вы можете использовать атрибут шаблона для записи его непосредственно внутри файла TypeScript. Замените декоратор @Component на следующий:@Component({
selector: 'app-about-page',
template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
})

5. Если вы хотите включить многострочный шаблон, вместо него можно использовать кавычки с обратным тиком:@Component({
selector: 'app-about-page',
template: `<h2>About Page</h2>
<br>
<p>This is rendering the HTML from the TypeScript file!</p>`
})
6. В терминале введите ng serve, чтобы скомпилировать ваш код и запустить его в веб-браузере. Откройте свое приложение на сайте http://localhost:4200/. Ваш HTML-код из файла TypeScript будет отображен на странице.
7. В файле about-page.component.ts замените ‘template’ на ‘templateUrl’. Включите ссылку на внешний HTML-файл компонента. Вы можете использовать ‘templateUrl’, если у вас более сложный HTML-код, требующий собственного файла.@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html'
})
8. Добавьте HTML-код в файл about-page.component.html:<h2>About Page</h2>
<p>This is rendering the HTML from the HTML file!</p>
9. Вернитесь в браузер или повторно запустите ng serve для повторной компиляции кода. Откройте ваше приложение по адресу http://localhost:4200/. Теперь браузер отображает HTML из файла about-page.component.html.

Что такое стили и styleUrls в Angular?

Аналогично HTML, вы можете использовать либо ‘style’, либо ‘styleUrls’, в зависимости от того, где вы решили хранить свой CSS

Вы можете включить CSS в код TypeScript, если у вас очень простые объявления CSS. В противном случае можно использовать ‘styleUrls’, чтобы связать файл TypeScript с внешним CSS, который содержит больше стилей

1. В ранее созданном приложении Angular откройте файл about-page.component.ts. Добавьте атрибут ‘styles’ к компоненту. Внутри ‘styles’ добавьте стили CSS для страницы:@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styles: ['h2 {color:red}','p {color:green}']})
2. В терминале введите ng serve, чтобы скомпилировать код и запустить его в веб-браузере. Откройте ваше приложение по адресу http://localhost:4200/, чтобы просмотреть стилизацию, заданную в файле TypeScript.
3. Если у вас много CSS, используйте ‘styleUrls’ вместо ‘styles’, чтобы связать файл TypeScript с внешним файлом CSS. В файле about-page.component.ts замените декоратор @Component на следующий:@Component({
selector: 'app-about-page',
templateUrl: './about-page.component.html',
styleUrls: ['./about-page.component.css']})
4. Добавьте некоторые CSS-стили в файл about-page.component.css:h2 {
color: blue
}
p {
color: darkorange
}
5. Вернитесь в браузер или повторно запустите ng serve для повторной компиляции кода. Откройте ваше приложение по адресу http://localhost:4200/, чтобы просмотреть стили, используемые из внешнего файла CSS.

Рендеринг HTML компонента в Angular

Теперь вы знаете различные способы рендеринга содержимого HTML и CSS в приложении Angular. Вы можете определить, какой подход вы хотите использовать, исходя из сложности ваших HTML и CSS

Если интересно, вы можете изучить, как передавать данные между HTML и TypeScript файлами компонента Angular