Как использовать HTML-шаблон в ангулярном приложении?

Привет всем,

Надеюсь, у вас все отлично. Сегодня мы узнаем, как использовать HTML-шаблон в вашем angular-приложении. Иногда, когда вы начинаете разрабатывать приложения, вы не умеете создавать темы для вашего приложения. Так что вот вам выход.

Давайте начнем!

Во-первых, вам необходимо установить angular в вашей системе. Используйте команду в cmd

После этого вы можете создать новый проект в любой папке командой

Затем он запросит дополнительные опции, например, вы хотите добавить файл маршрутизации и CSS файл и т.д.

Дождитесь завершения создания проекта. Мы успешно создали новый проект angular. Вы можете открыть папку этого нового проекта в Visual Studio Code. Теперь нам нужно найти HTML-шаблон для нашего нового проекта. Для этого просто выполните поиск в Google HTML шаблонов, и он покажет вам множество результатов. Например.

Мы посетим первый результат, показанный Google. Это сайт https://www.free-css.com/free-css-templates .

Здесь вы найдете множество шаблонов, просто выберите один и скачайте его, после чего загрузится zip-файл. Распакуйте zip файл и вы найдете несколько папок и файлов.

Теперь нашим следующим шагом будет перемещение этих папок в наше приложение angular. Поэтому скопируйте все три папки и перейдите в ваше приложение angular. В папке src вы найдете папку assets, вставьте туда все три папки.

Также вам нужно запустить ваше приложение angular, для этого откройте терминал

Затем откройте терминал и выполните команду npm start. Она начнет компиляцию вашего ангулярного приложения и после компиляции вы можете проверить ваше запущенное приложение на http://localhost:4200/ . Вы найдете некоторые ссылки по умолчанию, предоставленные Angular.

Итак, наше ангулярное приложение запущено. Теперь вернитесь в VS Code и удалите весь код из app.component.html и создайте новый компонент, выполнив команду:-

ng g c home

Это создаст новую папку компонента с именем home, содержащую 4 файла. Теперь напишите <router-outlet></router-outlet> в файле app.component.html. Это отобразит созданные нами компоненты на экране. После этого в файле app.routing-module.ts напишите следующий код:-...

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path:'',component:HomeComponent},
  {path:'home',component:HomeComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Теперь сохраните все файлы, и после компиляции приложение будет перезагружено в браузере. В некоторых случаях, если вы не можете найти какие-либо изменения, вы можете нажать ctrl + f5

Перейдите по URL http://localhost:4200/home, но вы ничего там не найдете, потому что он пустой. Теперь вернемся к шаблону, который мы скачали, в index.html нам нужно скопировать код, написанный в теге <head></head>. Копируем весь код и вставляем в тег head файла index.html нашего ангулярного приложения.

Перейдите по URL localhost4200/home но вы ничего там не найдете потому что он пустой

Таким образом, наш index.html будет выглядеть следующим образом. Здесь есть одна вещь, которую нужно изменить, как вы видите, все три папки находятся в папке assets, поэтому вам нужно изменить путь, например :-.

пути в соответствии с загруженным html шаблоном

пути в соответствии с файлом index.html нашего ангулярного приложения

Теперь скопируйте весь код из файла html-шаблона index.html из тега <body></body> и вставьте в файл home.component.html нашего приложения.

Здесь снова необходимо изменить пути. Итак. нажмите ctrl + h

И замените путь all images/ на assets/images/.

Осталось последнее - вернуться в файл index.html шаблона html и скопировать код, написанный в теге <script></script>, и вставить его в тег index.html <head><head> нашего ангулярного приложения. Также измените путь js/ на assets/js/.

Файл index.html нашего ангулярного приложения будет выглядеть следующим образом:-

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <!-- <link rel="icon" type="image/x-icon" href="favicon.ico"> -->
  <!-- basic -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- mobile metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- site metas -->
  <title>Built Better</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- bootstrap css -->
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
  <!-- style css -->
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <!-- Responsive-->
  <link rel="stylesheet" href="assets/css/responsive.css">
  <!-- fevicon -->
  <link rel="icon" href="assets/images/fevicon.png" type="image/gif" />
  <!-- Scrollbar Custom CSS -->
  <link rel="stylesheet" href="assets/css/jquery.mCustomScrollbar.min.css">
  <!-- Tweaks for older IEs-->
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  <!-- owl stylesheets --> 
  <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" href="assets/css/owl.theme.default.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

  <!-- Javascript files-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/jquery-3.0.0.min.js"></script>
  <script src="assets/js/plugin.js"></script>
  <!-- sidebar -->
  <script src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="assets/js/custom.js"></script>
  <!-- javascript --> 
  <script src="assets/js/owl.carousel.js"></script>
  <script src="https:cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
</head>
<body>
  <app-root></app-root>
</body>
</html>

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

Примечание: Перенаправление со ссылок не было сделано в этой статье. Вам нужно сделать то же самое для других компонентов. Вы можете посетить официальный сайт angular для получения информации о маршрутизации.

Спасибо и желаю вам удачи!

Как использовать HTML-шаблон в ангулярном приложении?

Стоит ли изучать PHP в 2023-2024 годах?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

Приемы CSS-макетирования - floats и Flexbox

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

Концепция локализации и ее применение в приложениях React ⚡️

Пользовательский скаляр GraphQL