如何通过VS代码转换Angular项目中的现有项目？

Question

我已经用 HTML、CSS、JS 和 SCSS 创建了一个前端项目。不，我想将 t 转换为 Angular 项目。我知道在哪里添加 HTML 和 CSS 代码，但是，我在哪里可以在 Angular 文件结构中添加 JS、SCSS 和 lib 文件？

Answer 1

将传统前端项目转换为 Angular 项目涉及几个步骤。以下是有关如何将现有前端代码集成到新的 Angular 项目中的分步指南：

1. 创建一个新的 Angular 项目： 如果您还没有准备好，请首先使用 Angular CLI 创建一个新的 Angular 项目：

   ng new your-project-name
   

2. 集成SCSS:

   • 如果您在创建项目时没有使用 SCSS 设置 Angular 项目（

     ng new your-project-name --style=scss

     ），您可以手动将

     angular.json

     中的样式配置从

     "styles": ["src/styles.css"]

     更改为

     "styles": ["src/styles.scss"]

     。
   • 然后，将 SCSS 文件移至 Angular 项目中。您可以将全局样式放入

     src/styles.scss

     文件或

     src/

     目录中的任何其他位置，然后将它们导入到

     styles.scss

     。

3. 集成JS:

   • 如果你的JS文件是库或插件，最好将它们放在

     src/assets/

     文件夹中，或者你可以将它们添加到

     scripts

     中的

     angular.json

     数组中。
   • 如果您的 JS 文件包含自定义逻辑，建议将该逻辑集成到 Angular 组件、服务或模块中。将 JS 转换为 TypeScript 并利用 Angular 基于组件的架构。

4. 集成 HTML 和 CSS:

   • 将 HTML 内容划分为逻辑组件，并使用 CLI（

     ng generate component component-name

     或

     ng g c component-name

     ）为每个逻辑组件创建 Angular 组件。
   • 将每个组件的关联 CSS 移至其相应组件的

     .scss

     文件中。

5. 集成库:

   • 如果您有库文件，可以将它们存储在

     src/assets/lib/

     目录中（您可能需要创建

     lib

     目录）。
   • 如果这些是 JS 库，您还可以在

     scripts

     文件中的

     angular.json

     数组中添加它们的路径，以便将它们与您的应用程序捆绑在一起。
   • 对于CSS库或样式，将它们添加到

     styles

     中的

     angular.json

     数组中。

6. 更新index.html:

   • 在

     src/index.html

     中添加必要的元标记、样式和脚本。
   • 请记住，Angular 会在构建过程中将

     angular.json

     中指定的脚本和样式添加到此文件中，因此您无需手动添加它们。

7. 路由： 如果您的项目有多个页面，请考虑设置 Angular 的 RouterModule 来处理不同组件之间的导航。

8. 将 JS 重构为 TypeScript： 了解 Angular 使用 TypeScript 至关重要。虽然您可以运行纯 JavaScript，但您可能希望利用 TypeScript 的静态类型和功能。如果你的 JS 代码很复杂，这一步可能会有点复杂。

9. 测试您的应用程序： 集成所有内容后，使用以下命令运行 Angular 开发服务器：

   ng serve
   

   这将编译您的项目并启动本地开发服务器。打开浏览器到

   http://localhost:4200/

   查看您的 Angular 应用程序。

请记住，仅仅复制和粘贴可能还不够，尤其是对于 JavaScript 部分。 Angular 有自己的生命周期，直接操作 DOM（在基于 jQuery 的项目中经常这样做）可能会与 Angular 的更改检测发生冲突。考虑使用 Angular 的内置指令、服务和其他功能来重构 JavaScript，使其更加以 Angular 为中心。