- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 如何进行管理Angular项目，有哪些方法
如何进行管理Angular项目，有哪些方法
Admin 2022-10-29 群英技术资讯 775 次浏览
这篇文章主要讲解了“如何进行管理Angular项目，有哪些方法”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。伴随着新功能的发布，Web apps 的体积越发大。在公司 DevOps 的过程中，这种发布变更每天都发生。在如此高速的发布周期中，代码很快会变得笨拙。特别是基于 JavaScript 开发的项目，比如 NextJS 或者 Angular。下面是我们在管理 Angular 项目中 5 个最好的实践，以达到最大的可读性，可维护性和可扩展性。
1. 准守单一职责原则
很多单应用程序核心是具有臃肿类的代码库。从本质上讲，这些臃肿的程序很难维护。从某种意义上讲，他们很脆弱，脆弱到更改一行代码可能对到整个程序产生灾难的影响。single responsibility principle 能阻止这些问题。
单一职责原则意味着组件有且仅有一个功能。
使用这种方法构建应用程序会产生一个模块化框架，其中应用程序是通过这些代码块串联在一块的。
使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。
为了确保你的代码能够满足这种要求，你可以问自己一个问题：这代码是干什么的？如果自己的回答包含 and 这个关键字，那么你需要将你的代码重构为单一职责的代码。
构建 Angular 应用程序并对其扩展是一种持续性的练习。在不断的练习中，使用单一职责原则组织你的项目，将使你的应用程序干净，可读和可维护。
2. 绑定代码到模块中
Angular 中的 modules 是单一原则的实施。在 Angular 中，每一个模块代表一个分离的和独立的功能。
Angular 中提供了几种类型模块去指定如何对它们进行逻辑分组或组织。
Core
Core 模块是一个 NgModule，用来实例化应用并加载全局使用的核心功能。
所以，任何单例服务都应该在核心模块中实现。页头，页脚或者导航栏都是这种类型的模块。
每个应用程序有且只有一个实例的所有服务（单例服务）都应该在核心模块实现。例如鉴权服务或者用户服务。
Feature
功能模块代表构建应用程序功能的代码。比如，在一个线上购物的应用中，我们会有将商品添加到购物车的功能和用于付款的单独模块。
Shared
共享模块由可以被组合以创建新功能的模块组成。比如，搜索函数在平台中可以被用于多个功能。
以这种方式构建代码使事情更加容易定位并增加代码可重用性的机会。
3. 组织 SCSS 文件
如果不遵循通用结构，样式文件很快就会变得杂乱无章。一般最佳实践的模式 7-1 模式，该模式使用 7 个文件夹和 1 个文件，如下所示：
App - 项目的主要文件夹
Abstract - 抽象部分，包含所有变量、混合和类似的组件
Core - 包含整个站点的排版、重置和样板代码
Components - 包含要为一个网站创建的所有组件的样式，例如按钮、选项卡和模式
Layout - 包含定义站点布局所需要的文件，例如页头和页脚
Pages - 包含每个特定页面样式
Vendors - 这个可选文件夹适合项目的使用的引导框架，比如
bootstrap
为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。
4. 将私有服务放到组件中
许多服务都被设计全局范围内运行。然后，在某些情况下，一个组件需要一个服务。传统的编码组件实践推荐单一责任原则。
在这种方法下，服务和组件被编写为单独的项目。
但是，考虑下入锅删除这些服务的组件会发生什么？你最终得到的是死代码，只会使得仓库变得更加混乱。在这种情况下，最佳实践是将服务放在组件内部。
这样，维护组件和服务就更加容易了。
5. 简化导入的 Angular 最佳实践
嵌套文件结构本质上比将所有代码文件都放在一个目录中的平面文件系统更加容易导航。
然而，随着项目的方法，项目的文件结构可能变得相当复杂。虽然这使得定位代码变得更加容易，但是当它在编写导入语句时提出了挑战。
当一个目录结构开始超过三个或者四个级别的时候， import 语句就会变得非常长并且难以阅读。
解决这个问题的，我们可以在 tsconfig.json 文件中配置路径的别名。在这个文件中，有个名为 compilerOptions 的数组。这个是你在应用程序中配置路径别名。
当代码编译后，在该数组中定义的路径别名会替换成真实的路径。每个路径的值是一个包含实际路径和别名的键值对对象。
构建 Angular 应用程序并对其进行扩展是一项持续的练习。
本文为译文，采用意译的形式。
原文地址：https://www.adservio.fr/post/how-to-organize-angular-project-top-5-tips
“如何进行管理Angular项目，有哪些方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
JS可枚举属性怎样判断？枚举性的作用是什么？
今天给大家分享的是关于JS可枚举属性的内容，我们知道在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。接下来我们就一起来了解一下怎么判断属性是否可枚举和枚举性的作用。
-
Vue3进行列表界面数据展示的方法及操作是什么
这篇文章主要介绍了Vue3 列表界面数据展示，文章主要详介绍的内容就是做的就是把打到页面的数据，带样式，也就是说好看点显示,需要的朋友可以参考一下
-
用JS如何制作弹性导航，步骤过程是什么
这篇文章主要为大家详细介绍了JavaScript实现弹性导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
如何使用ThreeJS创建场景以及相机，方法及过程是什么
ThreeJS从创建场景到使用功能实例详解 目录 前言 创建场景以及相机 创建一个平面 添加图片 创建线 添加轴线 缩放.定位.以及旋转 添加文字 正交摄像机和透视摄像机的区别 总结 前言 最近公司要做一个2.5D插件,然后自己学旋转角度不太好,然后就使用了THREEJS, 用起来还是比较繁琐的,整体支持不太好,整体都是自己研究,看到写的不好地方勿怪 创建场景以及相机 首先,要创建一个场景,以及一个相机(相机分为透视相机和正交摄像机,区别在后面会解释),代码如下 export default class ThreeComponent ex
-
jQuery替换掉所有的类名的方法是什么？
这篇文章主要给大家分享jQuery替换掉所有的类名的方法，小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的很详细，感兴趣的朋友接下来一起跟随小编学习一下吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
