ng best practices
1.0.0
该项目的目的是通过基于Angular项目的具体示例来浏览前端开发（Web/Mobile）的最佳实践的教程的支持示例。
要查看教程，您可以在这里投票。
该项目是我在帮助初创企业和更传统行业（在金融和航空空间中）定义和开发其前端项目（Web和Mobule）的经验的结果。
我注意到，每次推出产品时最困难的部分之一就是定义最佳实践，并找到最佳的工具来实现开发工作流程。
因此，我决定创建这个项目，以成为准备好开箱即用的最佳实践，这可能会节省开发人员和刺耳的技术领导/技术架构数天甚至数月的辛勤工作，以找到并定义其项目的最佳工作流程。
这个项目/教程的主要重点是开发最佳实践。因此，从一开始，它将不包括与连续集成或应用程序部署有关的任何材料。
注意1：该项目中存在的许多最佳实践都是前端开发甚至一般开发（不仅是前端）的一般最佳实践，因此，即使您不在项目中使用Angular，也可以浏览它以获取一些有趣的想法。
注意2：您可以看到不同项目的内容对项目的演变以及添加/添加/包含特定工具，库或模式的步骤有所了解。
该项目是通过Angular CLI版本7.3.1生成的。
对于这个项目，我主要使用纱线。但是您可以使用NPM运行相同的脚本/命令。
例如，要使用yarn启动项目，您可以运行yarn start 。要使用npm做同样的事情，您可以运行npm run start 。
为了能够启动此项目，您需要安装：
npm来运行不同的脚本。 （选修的）在启动项目之前，您必须安装不同的依赖关系/库。这样做：
# if npm
npm install
# if yarn
yarn
这是您通常需要的项目开发的可选工具列表：
您可以找到最新工作和测试代码的主要分支是主分支。
您可以关注开发分支机构的日常工作和开发。
标记系统将随着项目的不同升级和发布。
为开发服务器运行yarn start 。导航到http://localhost:4200/ 。如果您更改任何源文件，该应用将自动重新加载。
运行ng generate component component-name以生成新组件。您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。
运行yarn build以构建项目。构建工件将存储在dist/目录中。使用--prod标志进行生产构建。
实际上，默认的Angular-CLI生成的项目使用Karma工具进行单元测试。业力的问题（在某些情况下可能是一个优势），它需要启动浏览器来运行一个测试，在许多情况下，该测试并非必要，同时延长了测试执行时间。此外，您可能会在您可以使用浏览器的环境中运行的开发/交付过程集成不断集成。
Karma有一个有趣的选择。它使其更快，更容易编写测试。不需要浏览器。它具有内置的嘲笑和断言能力。此外，JOST并行同时运行测试，提供更顺畅，更快的测试运行。
JEST-PRESET-ANGULAR：用于使玩笑配置更容易。实际使用的版本为6.0.2，因此该库的未来版本的文档和配置将有所不同。
运行yarn test:all可以通过整个项目的嘲笑执行单元测试。
如果您想在特定项目中运行单元测试，例如connection项目运行yarn test:connection 。不要忘记将所需的脚本添加到您的package.json文件中添加到匹配的嘲笑配置文件中，以便能够在新库上启动测试。您可以举一个为connection库完成的示例。
您还可以启动测试，并通过运行Exmaple yarn test:all:watch 。
VS代码和Jest Debug：如果您使用VS代码，则可以通过在.vscode文件夹下添加launch.json文件来调试基于开玩笑的单位测试（您可以在实际库中找到一个示例文件）。调试器将使用内置节点调试器。可以在这里喜欢更完整的文档。
运行yarn e2e ，通过量角器执行端到端测试。
如果要从connection库导入组件，我们可以使用@connection注释。
示例： import { ConnectionModule } from '@connection' ;
由于将paths属性添加到tsconfig.json文件中，这是可能的。
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
...
},
...
}如果我们想更具体地了解该路径（例如，在循环依赖的情况下），我们可以在tsconfig.json文件中添加其他路径，如下所示：
"compilerOptions" : {
...,
"paths" : {
"@connection" : [
" projects/connection/src/public_api "
],
"@connection/*" : [
" projects/connection/src/* "
]
...
},
...
}它将允许导入组件或其他角出口功能，例如以下示例：
示例： import { ConnectionComponent } from '@connection/lib/modules/main/pages'; ;
为了确保开发人员在提交和推动代码时遵循精确的工作地道，以便您不必进行验证并手动运行脚本，以下工具非常有用：
在package.json中。
" scripts " {
"commit" : " git-cz " ,
...
}因此，当您运行yarn commit时，使用cz-cli 。因此，不再有直接的git commit 。
cz-cli插件。在package.json中。
"config" : {
"commitizen" : {
"path" : " node_modules/cz-customizable "
},
"cz-customizable" : {
"config" : " path/to/custom/cz-config.js "
}
},
...如果您在配置（ config.cz-customizable.config ）中不提供任何自定义文件，则将使用该项目根部存在的.cz-config.js文件。
注意：为了能够使用VS代码编辑git提交注释或其他文件操作任务，而不是默认的vim ，您可以运行git config --global core.editor "code --wait" condiction condiction vs vs code可以从命令行可用（您可以通过运行code --help进行检查）。
更多信息在这里。
在package.json的根部添加husky配置。JSON文件：
"husky" : {
"hooks" : {
"pre-commit" : " yarn lintstaged " ,
"prepush" : " yarn prod "
}
}如果要跳过蜂槽，只需将--no-verify标志添加到您的git命令中即可。示例： git push --no-verify
因此，对于已经定义的husky Hooks配置，您可以添加commit-msg钩子：
"husky" : {
"hooks" : {
...,
"commit-msg" : " commitlint -E HUSKY_GIT_PARAMS "
}
} commit-msg钩子允许您在创建之前提交皮棉。
您可以在项目的根部添加commitlint.config.js文件，以定义伸长规则/约定。
commitlint.config.js示例：
module . exports = {
// we use the default @commitlint/config-conventional rules.
// you have to install @commitlint/config-conventional library to be able to use it.
extends : [ '@commitlint/config-conventional' ] ,
// Any rules defined here will override rules from @commitlint/config-conventional
// => custom rules
rules : {
'header-max-length' : [ 2 , 'always' , 100 ] ,
'subject-case' : [
2 ,
'never' ,
[ 'sentence-case' , 'start-case' , 'pascal-case' , 'upper-case' ]
] ,
...
}
} ;注意：如果您想重试提交，这样您就不必再次重新输入相同的信息，只需运行yarn commit:retry 。
使用了Angular的Routermodule。 Angular的文档非常完整，我建议您看看它。
在这个项目中，我选择了app （独立）项目，我使用直接路由/加载。另一方面，对于主应用程序（root应用），模块已懒惰，它会影响路由的工作方式。
要查看如何处理Lzay加载，您可以查看定义懒惰加载模块的src/app/lazy Directory。然后，这些模块是在src/app/app-routing.module.ts文件中加载的“真的”懒惰。对于每个懒惰的负载模块，都定义了一个路径。此路径必须先于原始模块中定义的所有路径。
示例：假设您在Orignal模块中您可以通过URL Localhost访问page-one内容localhost:4200/page-one直接加载它（例如在App/standalone Project中）。同时，您定义的懒负载的路径相同的模块是my-lazy-loaded-path 。因此，要访问相同的内容/页面，您应该使用url localhost:4200/my-lazy-loaded-path/page-one 。
在这里，为了使我的模块在懒惰的加载或直接加载时起作用，使用了加载模块和环境变量上的forRoot方法的组合。
在操纵形式方面，在Angular中，您可以选择反应性形式和模板驱动的形式。
在官方的角文档中，您可以找到：
反应性形式更强大：它们更可扩展，可重复使用和可测试。如果表格是应用程序的关键部分，或者您已经在使用反应性模式来构建应用程序，请使用反应性表单。
模板驱动的表单对于将简单表单添加到应用程序（例如电子邮件列表注册表单）很有用。它们很容易添加到应用程序中，但是它们不像反应性形式那样扩展。如果您的表单要求和逻辑非常基本，可以仅在模板中管理，请使用模板驱动的表单。
您可以在此处找到一个关键差异的表。
对于此项目，我选择使用反应性形式来实现其带来的所有优点，例如拥有strcuted数据模型或利用模板（view/html）和您的控制器（组件类/模型）之间的同步性。此外，通常，在大型项目中，您可能会有复杂的形式，而reactive forms使任务为您更容易构建它们。
当您启动项目时，您可以首先将其基于已经存在的样式库。它可以帮助您节省应用程序时的时间。
以下是您可以使用的一些库的示例：
实际上，对于此项目，它是使用的bootstrap （而不是ng-boostrap ）。
大多数图书馆（例如React，Angular等）都是为组件内部管理其状态而无需外部库或工具而构建的。对于几个组件的应用程序，它的功能很好，但是随着应用程序的增长，跨组件共享的管理状态变成了一件琐事。
在组件之间共享数据的应用程序中，实际上知道州应在哪里居住，可能会感到困惑。理想情况下，组件中的数据应仅存在一个组件中。因此，在兄弟姐妹组件之间共享数据变得困难（来源）。
国家管理库的工作方式很简单。有一个中央商店持有整个应用程序状态。每个组件可以访问存储状态，而无需将道具从一个组件发送到另一个组件。
例如，对于最常用的状态管理库之一，REDUX是REDUX。并且使用React-Redux软件包使其更加容易。当然，您还有其他州管理库， react Facebook的Flux。因此，请选择最适合您更适合redux的flux ，因为它不在react上，并且可以与任何其他视图库一起使用。
对于angular您有许多国家管理的选择，例如：
对于Angular ，在研究了不同的选项后，我发现ngxs是最好的选择。它首先是为Angular编写的，因此可以按照Angular的代码样式实现，并符合Angular提供的Dependency Injection 。另外，它比其他库少。由于这些原因，我们已经选择在与我合作的许多公司中使用它。您可以在这里找到有关为什么使用ngxs完整说明。
此存储库的使用ngxs插件：
立面模式是一种在面向对象的编程中常用的软件设计模式。类似于建筑中的立面，立面是一个对象，它用作面向前的接口，掩盖了更复杂的基础或结构代码。立面可以：
尽管这似乎是一个相当微不足道的变化（并且是一个额外的层），但立面对开发人员生产力产生了巨大的积极影响，并且在视图层中产生的复杂性明显较小（来源）。
另一个优点是它使您的控制器（例如，角度组件），独立于您选择使用的状态管理库。
对于国际化，您有两个选择：
1-使用Angular的I18N系统
2-使用NGX-翻译库。
我不会详细介绍，但是该项目的选择以及许多其他类似项目的制作是使用ngx-translate 。主要原因是，为了相同的结果，使用和开发与Angular i18n更易于使用，并且迫使您通过语言构建应用程序，并且可以重新加载语言更改的应用程序。
要在Angular CLI上获得更多帮助，请使用ng help或查看Angular CLI读数。
如果使用VS代码，则可能会发现以下插件非常有用：
@haythem-ouenderni的版权。所有项目来源均根据Apache许可证发布。
