如何分离 Angular html 和脚本代码
我有一个角度前端项目，我有一个仪表板组件，里面有一个侧边栏，但代码的脚本标签和 html 在同一个文件中。我想将它们分开以减少代码。
我尝试将这些脚本与路径包含在我的 angular.json 中，但它没有被识别，而且我不知道我还可以尝试什么。我的 html 代码如下所示，我想将 Head 标签和 script 标签分开。
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Responsive sidebar template with sliding effect and dropdown menu based on bootstrap 3">
<title>Sidebar template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<moniesta-client-navbar></moniesta-client-navbar>
<body>
<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
<a href="#">pro sidebar</a>
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg"
alt="User picture">
holdtom1回答
-
牛魔王的故事
您需要安装这些软件包。这里你的脚本中有包。npm i jquerynpm i bootstrapnpm i @fortawesome/angular-fontawesomehttps://github.com/FortAwesome/angular-fontawesome并且不要忘记bootstrap在jqueryangular.json "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ]我建议您将代码分成不同的组件。这就是让你的代码更具可读性，并且可以更快地修复错误或找到你想要的东西。
随时随地看视频慕课网APP
相关分类
JavaScript