为了账号安全,请及时绑定邮箱和手机立即绑定

如何分离 Angular html 和脚本代码

如何分离 Angular html 和脚本代码

holdtom 2023-07-06 14:52:16
我有一个角度前端项目,我有一个仪表板组件,里面有一个侧边栏,但代码的脚本标签和 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">
查看完整描述

1 回答

?
牛魔王的故事

TA贡献1830条经验 获得超3个赞

您需要安装这些软件包。这里你的脚本中有包。


npm i jquery

npm i bootstrap

npm i @fortawesome/angular-fontawesome

https://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"

 ]

我建议您将代码分成不同的组件。这就是让你的代码更具可读性,并且可以更快地修复错误或找到你想要的东西。


查看完整回答
反对 回复 2023-07-06
  • 1 回答
  • 0 关注
  • 153 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信