角的最佳实践和安全性

< / >节
角的最佳实践和安全性

角, 由谷歌重写角JS开发, 是构建动态规划结构的最强大的框架. 角的主要构建块是模块, 组件, 元数据, 模板, 数据绑定, 服务, 指令, 和依赖注入. 它拥有广泛的其他内部平台,用于使用HTML设计单页面应用程序, CSS, 和打印稿. 类型script是JavaScript框架的上标 <一个href="http://www.purlyarn.com/software-development-technology/Angular-development-Services" rel="noreferrer noopener" target="_blank">开发角度应用程序. 通过使用角技术,九五至尊vi老品牌值得信赖可以创建更兼容、更健壮的UI应用. 因为这些功能, 角在2022年仍然是最受欢迎的前端框架之一.

这个富有洞察力的博客旨在聚焦所有重要的最佳实践 角有 将确保最佳执行 使用 角项目提供更好的性能和健壮的安全性.

角开发的最佳实践

1. 使用角CLI

<一个href="http://角.io/cli" rel="noreferrer noopener" target="_blank">角CLI 角命令行接口是一个端到端帮助初始化的工具, 发展, 维护, 测试甚至调试角应用. CLI简化了整个过程,还可以快速完成日程安排. So, 当你在自己的角应用中使用CLI时, 你必须了解角CLI的基本功能. 

几乎所有版本的角都支持这个方法,只是做了一些小改动,但这些改动是主要步骤.

所以,如果你想使用NPM包安装CLI,那么你必须使用NPM包 NPM install -g @角/cli

  • 现在,如果您想创建一个新的应用程序,那么您可以使用 ng新  并且可以立即启动一个功能齐全的应用程序.
  • 如果您想在组件开发中使用测试外壳, 路线, 服务, 只有一个命令的管道你可以使用"ng创建
  • 对于本地开发并需要在开发阶段进行测试的应用程序,您可以使用 “ng服务” 测试并发现错误.
  • 对于运行本地单元测试或端到端测试,最常用的命令是 “ng测试” command.
  • 要创建一个代码亮点,可以使用 ng线头.
  • 然后,当你想要设置一个角 服务 worker时,输入 ng添加@角 / pwa.

您可以使用它来使用CLI初始化应用程序开发过程. 这是开发人员理解代码的最简单方法之一, 即使其他开发人员已经在做了. 这减少了大量的成本,增加了开发人员的时间.

2. ES6的使用特性

ES6代表ECMAScript 6,它提供了新的语法和特性,使代码更现代、更清晰. 它不断现代化,具有新的功能和特点. ES6特性,比如Let和Const, 箭头功能, 对象文字字符串插值使JavaScript编程更容易.

3. 和ngFor一起使用trackBy

Using only *ngFor directive 与out trackBy 函数 in an 角 application will remove all the DOM elements and 然后 it will recreate the DOM elements again in the DOM tree. 所以即使使用相同的数据, 当有大量数据时,它会降低应用程序的性能. 这就是为什么把trackBy和*ngFor指令一起使用是好的.

在组件.ts文件:

trackByBookCode(指数: 数量,: 任何): 字符串 {
返回 书.code;
}

在组件.html文件:

*ngFor='let 书 of 书s; trackBy:trackByBookCode'>

4. 使用延迟加载

惰性加载只是一个加载不同模块(如文档)的过程, JS, CSS, 视频, 图片, 等. 它通过将应用程序分成多个包并根据请求加载它们来提高应用程序的加载速度, 而不是使用其他函数来加载 惰性加载模块,延迟加载在加载大型应用程序时很有用.

延迟加载只在被使用时才加载. 九五至尊vi老品牌值得信赖可以很容易地使用惰性加载函数来loadChildren,而不是在AppRoutingModule的路由配置中加载组件. A distinct app feature can be lazy loaded or loaded on demand rather than when application starts 这 is one of the best 角 practices to follow..

常量 路线: 路线 = [
  {
    路径: “配置文件”,
    loadChildren: () => 进口('./模块/配置文件/资料.模块的).然后(m => m.ProfileModule)
  }
];

5. 使用索引.ts

使用索引.Ts文件不是必须的,但九五至尊vi老品牌值得信赖使用它是因为它有助于将所有相关的文件保存在一个单一的位置. 现在不用记多个源文件名了, 有一些小的导入语句可以实现这个目的.

例如,九五至尊vi老品牌值得信赖必须测试/测试/指数.Ts分量,它看起来像下面的截图.

出口 *'./测试.模型”;
出口 *'./测试.服务”;
出口 { 测试组件 }'./测试.组件的;

现在九五至尊vi老品牌值得信赖可以使用导入所有文件

进口 { 测试, 测试Service }'../测试”;

6. 避免任何的类型

避免使用“任何”类型可以潜在地减少意外问题的数量. 此外,在九五至尊vi老品牌值得信赖的应用程序中不使用任何类型将使重构变得简单. 可以通过输入特定的变量并将其他变量拒之门外来限制问题.

7. 防止角可观察对象中的内存泄漏

九五至尊vi老品牌值得信赖从一个组件导航到另一个组件时, 销毁第一个组件,初始化另一个组件. 第一个组件被订阅到Observable中,现在这个组件被销毁了. 这可能会导致内存泄漏.

九五至尊vi老品牌值得信赖可以通过以下提示来预防,

1. 使用取Until ()

TakeUntil keeps a check on second Observables and once the value of observables is generated 然后 it will dispose of the subscription and the cycle gets finished.

.authService.GetBookList()
      .(取Until(.ngUn订阅))
      .订阅(res => {.推荐书目 = res;});
...
...
ngOnDestroy() {
  .ngUn订阅.下一个();
  .ngUn订阅.完整的();
}

2. 使用Async管道

它订阅一个Observable或Promise,并返回最近发出的值.

*ngFor=让项目的图书服务.GetBookList () |异步”;
{{项.书的名字}}

3. 使用带(1)

它确保您只获得一次数据.

.书Service.GetBookList()
      .((1))
      .订阅(res = {.推荐书目 = res;})

8. 避免模板中的逻辑

即使函数在技术上是正确的角模板中调用, 所有与模板相关的业务逻辑都可以提取到一个组件中. 它有助于单元测试,还可以减少将来模板更改时出现的bug.

9. 缓存API调用

通过限制服务器请求获取冗余信息,缓存API调用可以提高性能并节省内存. 有些API响应可能不会频繁更改,所以九五至尊vi老品牌值得信赖可以放入一些缓存机制,并从API中存储这些值. 当发出相同的API请求时,九五至尊vi老品牌值得信赖可以从缓存中获得响应. 因此, 它加快了应用程序的速度,还确保九五至尊vi老品牌值得信赖不会频繁地下载相同的信息.

10. 声明安全数据类型

您首先必须确认数据的类型和它所包含的值集. 之后,变量只接受可能的值. 而不是声明一个特定类型的变量, 可以将其声明为可能值的列表或不同类型.

例子:

类型的周末 = “星期六” | “星期天”;
 
常量: 周末 = “星期六”;
常量 day2: 周末 = “星期天”;
常量: 周末 = “周一”;
 
//最后一行将给出以下错误:类型 ' ' ' ' is not assignable to 类型 ' '周末'.

11. 使用CDK虚拟卷轴

CDK(组件开发工具包)虚拟卷轴可以用来更有效地显示大的元素列表. Virtual scrolling enables an efficient way to simulate all values by making the 高度 of the container element equal to the 高度 of the total 数量 of elements.

12. 使用环境变量

角有不同的环境配置,可以为所有不同类型的环境声明单独的变量. 开发和生产都是默认的角环境. 九五至尊vi老品牌值得信赖甚至可以添加更多环境,或者在现有环境文件中添加新变量.

13. 使用线头规则

tslint有各种内置选项,比如no-任何, no-控制台, no-magic-数量s, 等, 哪些可以在tslint中配置.json文件. 它使程序更加体面和一致. 它可以用你自己的lint规则和配置来定制. 这确保了代码的可读性和一致性.

14. 维护正确的文件夹结构

创建和维护适当的文件夹结构是每个人在启动任何文件夹之前都应该考虑的一个重要因素 项目. 在整个开发过程中,文件夹结构应该灵活地适应新更改.

15. 使用正确的关键字(常量 vs let)

当你声明一个变量时,如果该值没有被重新赋值,可以使用" Const "来声明该值. “let”关键字声明了一个在模板中引用的输入变量. 使用这些关键字可以使变量的声明更清晰. 这样,代码的简洁和清晰就得到了即兴发挥 用干净的代码..

16. 在订阅中避免订阅

从技术上讲,嵌套订阅是可行的,但它不是最有效的方式. 以防, 如果你想让这个值在多个可观察对象中重用,那么你可以使用更好的链接选项,比如combineLatest, 与LatestFrom, 而不是在另一个可观察对象的订阅块中订阅一个可观察对象.

例子:

observable1美元.(
   第一个(1)
)
.订阅(res1 = {
    observable2美元.(
        第一个(1)
    )
    .订阅(= {
        控制台.日志(`${res1}  ${}`);
    });
});

在使用与LatestFrom:

observable1美元.(
    与LatestFrom(observable2美元),
    第一个()
)
.订阅(([res1,]) = {
    控制台.日志(${res1};  
${});
});

在使用combineLatest:

combineLatest(observable1美元, observable2美元).订阅(
  ([res1,]) = {
    控制台.日志(`${res1}  ${}`);
  }
);

17. 遵循一致的角编码最佳实践

下面是一些角编码的最佳实践,你可以遵循它们来确保你的 <一个href="http://www.purlyarn.com/software-development-technology/Angular-development-Services" rel="noreferrer noopener" target="_blank">角发展 项目遵循正确的代码标准.

  • 文件应该被限制为400行代码.
  • 创建不超过75行代码的简短函数.
  • 所有符号都应该有相同的名称.
  • 模式特征.类型.ts是首选.
  • 如果变量的值不变,则使用' 常量 '声明它.
  • 用破折号分隔描述性名称中的术语, 用点将描述性名称与类型分开.
  • 属性和方法名称应该总是用小写字母书写.
  • 当你决定在第三方和应用程序以及模块之间协同工作时,只需要在两者之间留出一行空间. 例如,特性模块组件的命名约定应该是特性.组件.ts. 新特性模块的命名约定应该是特性.模块.ts. 特性模块服务的命名标准应该是特性.服务.ts.

18. 将大组件分解为可重用的小组件.

九五至尊vi老品牌值得信赖也可以将其视为单一责任发展原则. 调试、管理和测试大型组件是很困难的. 如果组件的大小增加, 把它分成更小的部分, 更多可重用组件,以减少代码重复并使其更易于管理, 维护, 和调试.

19. 声明安全字符串

九五至尊vi老品牌值得信赖可以将可能值的列表定义为字符串类型变量的类型,因为它只有有限的值集. 因此,变量将只接受可能的值. 您还可以通过在编译时编写代码来消除代码中的错误.

正常字符串声明

私人数据类型: 字符串;
//九五至尊vi老品牌值得信赖可以将任何字符串赋给vehicle类型.
.数据类型 = “小数”;
.数据类型 = 十六进制的;
.数据类型 = “xyz”;

20. 严格的字符串声明

If you are aware of the data 类型 whether it is decimal or hexadecimal 然后 you must declare it as the data 类型: Then define the 字符串 类型s as we have demonstrated below

私人vehicle类型: “小数” | 十六进制的;
.vehicle类型 = “小数”;
.vehicle类型 = 十六进制的;
.vehicle类型 = “xyz”; //这将给出以下错误
类型 “xyz”” 不能赋值给类型 “小数”|“十六进制”

21. 状态管理

状态管理是软件开发中最困难的方面之一. 角的状态管理通过存储任何类型数据的状态来帮助管理状态转换.

市场上有无数的角状态管理库, 如NGRX, NGXS, 秋田犬, 和其他人, 所有这些都有不同的用途和目的. 在实现九五至尊vi老品牌值得信赖的应用程序之前,九五至尊vi老品牌值得信赖可以为它选择最佳的状态管理.

使用状态管理的一些优点.

  1. 它允许在多个组件之间共享数据.
  2. 它允许集中的状态转换控制.
  3. 代码将更清晰,更容易阅读.
  4. 当出现问题时,很容易排除故障.
  5. 在状态管理库中有用于跟踪和调试的开发工具.

22. 文档的代码

记录代码是一个很好的实践. 它将帮助新开发人员理解项目的逻辑和可读性. 记录每个变量和方法是角的一个好习惯.

方法必须使用多行注释来定义,这些注释指出方法实际执行的任务.

/**
这是get函数
* @param 年龄这是年龄参数
* @返回s返回年龄的字符串版本
*/
函数 getAge(年龄: 数量): 字符串 {
返回 年龄.toString();
}

23. 文件命名

创建文件时要特别注意文件名.

  • 文件夹和文件名应该描述其内容.
  • 名字应该遵循相同的模式, 首先是文件的特性, 然后是类型, 中间有一个点.

例如,咨询.组件.ts,家.组件.html,身份验证.服务.ts

如果九五至尊vi老品牌值得信赖想给文件起更具描述性的名字, 九五至尊vi老品牌值得信赖应该像tc-home这样用破折号(-)来分隔单词.组件.ts或书-appointment.组件.ts.

24. 类名

在向类添加名称的过程中, 建议使用驼峰式大小写作为后缀. 这将表示你选择的文件类型,比如Tc首页组件 AuthService MonthDirective和类似的类名.

25. 单一职责原则

最好为组件创建单独的ts文件, 模板, 风格, 服务而不是将它们全部收集在一个ts文件中. 所有的文件负责创建一个单一的功能,如果你这样做,你将能够创建干净, 可读的, 和可维护的代码.

26. 使用接口

在为类创建契约时,九五至尊vi老品牌值得信赖应该始终使用接口. 可以通过使用函数和属性强制类实现在接口中声明的函数和属性. 在组件中加入角生命周期钩子就是最好的例证:

OnInit和OnDestroy由首页组件类实现.

接口是字面上描述已定义对象的正确方式.

如果对象不包含接口的属性, 打印稿会抛出一个错误,并为九五至尊vi老品牌值得信赖打开智能感知,然后开始填充那个对象:

出口 接口 学生 {
    id: 数量;
    的名字: 字符串;
    email: 字符串;
    class: 数量;
    性别: “男性” | “女性”;: “科学” | “商务” | “艺术”;
    状态: 布尔;
}

27. 使用不变性

在javascript中,两种主要的引用类型是对象和数组. 如果九五至尊vi老品牌值得信赖希望将它们复制到另一个对象或数组中并修改它们, 九五至尊vi老品牌值得信赖应该使用es6扩展运算符(…),因此九五至尊vi老品牌值得信赖需要使用不变性.

常量 学生 = {
    id: 1,
    的名字: “John Doe”;
    email: "(email保护)";
}
常量 结果 = {
    ...学生,
    百分比 : 90
}

通过这种方式,九五至尊vi老品牌值得信赖重新创建了用户对象,然后简单地重写了状态属性. 您可以快速克隆用户对象并覆盖其状态和属性 .

28. 变化检测优化.

  1. 如果DOM元素不可见, 而不是使用CSS隐藏它们, 使用*ngIf将它们从DOM中移除是个好主意..
  2. 为了让你的表达式更快,把有挑战性的计算转移到ngDoCheck生命周期钩子中.
  3. 复杂的计算应该尽可能长时间地缓存.
  4. 要通知角没有发生任何修改,可以使用OnPush更改检测技术. 这允许您跳过整个变更检测过程.

29. 使用智能-哑组件/使用智能-哑组件技术

这种技术有助于采用OnPush变更检测策略,通知角哑组件没有发生变化. 当您通过API调用处理数据时, 关注的功能, 和控制状态, 使用智能组件. 而愚蠢的组件都是九五至尊vi老品牌值得信赖外观的,它们更关心它们是如何出现的.

角安全最佳实践

角安全最佳实践

如今,角是最受欢迎的前端框架. 在全球范围内,它主要用于开发web应用程序. Web安全在保护站点免受安全攻击和数据窃取方面也很重要. 在这里, 九五至尊vi老品牌值得信赖将讨论一些最佳实践,帮助九五至尊vi老品牌值得信赖在角最佳应用中避免安全漏洞.

1. 防止跨站点脚本编制

在web应用程序中防止恶意攻击, 可以使用XXS (Cross-Site Scripting)来防范安全漏洞. This process will send a script to the attacker and the user both at the same time and prevents the user 从 accepting the malicious script unknowingly into a trusted website.

由于网站是可信的,当用户打开网站时,恶意脚本也会执行.

在网站上执行的恶意脚本可能会导致以下问题:

  • 可以通过重写HTML页面来更改DOM树.
  • 从cookie和会话访问信息.
  • 如果网站没有转义HTML脚本标签,攻击者可以发送他们的脚本.

跨站点脚本攻击(XSS)示意图中的例子:

跨站脚本攻击角

1. 防止客户端XSS攻击

要防止客户端XSS攻击,请避免对整个DOM树进行任何修改, 因为这样做可能导致恶意脚本的执行. 使用一些概念来防止角提供的这类攻击:

2. InnerHtml属性可以与HTML标记一起用于显示数据:

角会使用innerHTML属性自动清理所有显示在组件中的数据. 使用innerHTML属性,九五至尊vi老品牌值得信赖可以在HTML端显示服务器端响应之前对其进行清理.

进口 { 组件 }“@角 /核心”;
@组件({
 选择器: “app-root”,
 templateUrl: './应用程序.组件.html的,
 styleUrs: ['./应用程序.组件.css的]
})
出口 class App组件 {
 htmlSnippet = '你好,  早上好';
}

在上面的组件中, 变量HTML片段包含HTML数据,将在以下应用程序中使用.组件.作为' innerHTML '属性的值.

{{htmlSnippet}}
div [innerHTML]=“htmlSnippet”;

当加载上述模板时,页面将显示如下:

你好, <script>警报(“嗨Tatvasoft”)script> <i>早上好i>
你好, 早上好

3. 你应该注意的一点是:

  • {{htmlSnippet}}包含插入的数据,将保持原样. 角不会修改插入的内容.
  • 当九五至尊vi老品牌值得信赖将一个变量htmlSnippet赋值给[innerHtml]属性时, 它将自动删除脚本标记,并按HTML内容显示数据. 例如, 如果粗体标记中有一句话,那么角会认为它不安全,并通过删除脚本标记来清理这些数据.
  • 可以使用DOMSanitizer api来避免自动消毒:
  • 正如九五至尊vi老品牌值得信赖讨论的, 如果发现了一些不可信的数据,角会自动进行清理, 九五至尊vi老品牌值得信赖可以使用这些类型的api来防止自动消毒.
  • bypassSecurityTrustHtml(通过使用它,九五至尊vi老品牌值得信赖可以防止HTML消毒):

4. 可以使用DOMSanitizer api来避免自动消毒:

正如九五至尊vi老品牌值得信赖讨论的, 如果发现了一些不可信的数据,角会自动进行清理, 九五至尊vi老品牌值得信赖可以使用这些类型的api来防止自动消毒.

5. bypassSecurityTrustHtml(通过使用它,九五至尊vi老品牌值得信赖可以防止HTML消毒):

这是上面组件的模板:

<div class="container">;
{{htmlSnippet}};
p [innerHtml]=“trustedHtmlSnippet”;
div>;
; {{htmlSnippet}}; p [innerHtml] = " trustedHtmlSnippet”;
;

bypassSecurityTrustUrl(通过使用它,九五至尊vi老品牌值得信赖可以防止URL消毒):

#组件应用程序.组件.ts
#进口 { 组件 }“@角 /核心”;
#进口 {DomSanitizer}“@角 / platform-browser”;
@组件({
 选择器: “app-root”,
 templateUrl: './应用程序.组件.html的,
 styleUrls: ['./应用程序.组件.css的]
})
出口 class App组件 {
 htmlSnippet = javascript: 警报(“你好Tatvasoft!")';
 trustedHtmlSnippet;
 
 构造函数(私人洗手液: DomSanitizer) {
   .trustedHtmlSnippet = .洗手液.bypassSecurityTrustUrl(.htmlSnippet);
 }
}

这就是模板的样子:

<div>
	<一个href=“htmlSnippet”>点击这里到受信任的URLa>	
div>
<一个href=“htmlSnippet”>点击这里到受信任的URL

当您单击可信URL链接时,将打开一个警告对话框. 点击不受信任的URL, 角会认为这个URL是不安全的.

  • bypassSecurityTrustResourceUrl(通过使用它,九五至尊vi老品牌值得信赖可以防止资源URL消毒)
  • bypassSecurityTrustScript(通过使用它,九五至尊vi老品牌值得信赖可以防止脚本消毒)
  • bypassSecurityTrustStyle(通过使用它,九五至尊vi老品牌值得信赖可以防止样式消毒)

你必须避免直接使用DOM api,因为角推荐使用模板:

攻击者可以将使用ElementRef作为内置DOM api的脚本注入那些不能自动清理数据的浏览器.

进口 { 组件, ElementRef, Renderer2 }“@角 /核心”;
@组件({
  选择器: “app-root”,
  templateUrl: './应用程序.组件.html的,
  styleUrls: ['./应用程序.组件.css的]
})
出口 class App组件 {
  构造函数(
    私人elementRef: ElementRef,
    私人渲染器: Renderer2
  ) {
    / *这.elementRef.nativeElement.style.color = “蓝”; // Avoid 这.*/
    .渲染器.setStyle(.elementRef.nativeElement, “颜色”, “蓝”);
  }
}

当加载组件时,警告框将出现在屏幕上. 如果九五至尊vi老品牌值得信赖从DomSanitizer的bypassSecurityTrustHTML API传递innerHtml变量,那么它将被认为是已消毒的.

6. 内容安全策略(CSP):

为了防止XSS攻击,九五至尊vi老品牌值得信赖需要制定内容安全策略. 程序员需要将CSP设置为HTTP报头的一部分. 考虑下面的例子:

<元http-=“Content-Security-Policy” 内容="default-src 'self'; img-src http://*; child-src 'none';">
<div>

7. 防止服务器端XSS攻击

为了避免可信网站的跨站脚本攻击,九五至尊vi老品牌值得信赖需要防止不可信的脚本/代码  只允许干净的代码将恶意脚本注入到DOM树中.

  • 在服务器端处理, 清除所有包含HTML的数据, javascript标记,然后作为HTTP响应发送.
  • 你将不得不限制自己使用服务器端处理来生成角模板. 这可能导致模板的插入,因此当页面开始加载到浏览器时将会有DOM操作.

2. 与http有关的漏洞

Cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI) are two 类型s of vulnerabilities where there could be an attack to access data 从 web apps.

1. CSRF(伪造跨站请求)

通过这种类型的漏洞, 攻击者在该站点任何经过身份验证的用户的帮助下向服务器发出HTTP协议请求. 攻击者在这个过程中充当隐藏的中介.

例如, if an au然后ticated user is 日志in into his/her website 然后 the attacker will try that user to make an HTTP request by clicking some unknown link and can access secret information 从 that request.

如果受害者用户是任何站点的管理员,那么攻击者就可以访问该管理员可以访问的所有信息.

为了避免这种类型的攻击,九五至尊vi老品牌值得信赖可以使用一个带有cookie的认证令牌,

在HTTP请求期间,服务器将比较来自cookie的令牌数据,如果令牌没有被授权,则阻止访问数据.

2. XSSI(跨站点脚本包含)

攻击者使用易受攻击的脚本来实现此方法. 不要使用任何来自不可信域的第三方脚本, because if it is not secure 然后 the hacker can add 任何 executable code to that script and while executing 这 script in our domain we might compromise 任何 essential information.

攻击者还可以通过脚本标记添加API URL. 角有HttpClient库,它可以帮助程序员获取这种类型的约定,并自动删除字符串")]}',\n”从所有代码,并使其不可执行.

3. 在导航中使用Route Guards

首先, 九五至尊vi老品牌值得信赖可以通过路由保护接口接受或拒绝用户请求的URL导航权限. Route guards are 使用 a 布尔 concept like if they all 返回 真正的 value 然后 the user can 导航 to the requested URL and if 任何 of them 返回s a 假 value 然后 the user will be prevented to 导航 that URL.

不同类型的路线守卫:

  • CanActivate:检查该组件是否可以访问
  • CanActivateChild:检查子组件是否可以被访问
  • CanDeactivate:请求允许丢弃更改
  • CanLoad:特性模块加载前的检查
  • 解决:预取路由数据,确保数据相关导航是否可用.

线路保护的例子:

进口 { 可注射的 }“@角 /核心”;
进口 { 路由器, CanActivate, ActivatedRouteSnapshot, 路由器StateSnapshot }“@角 /路由器”;
 
出口 class RouteGuard 实现了 CanActivate {
 
 构造函数(私人的路由器: 路由器) { }
 
 canActivate(路线: ActivatedRouteSnapshot, 状态: 路由器StateSnapshot) {
 //如果token存在,用户可以登录
 if (localStor年龄.getItem(“令牌”)) {
 返回 真正的;
 }
 
 //否则重定向到登录页面
 .路由器.导航([/登录的], { queryParams: { 返回Url: 状态.url } });
 返回 ;
 }
}

在RouteModule的路由中应用相同的路由保护. 按照示例代码,我已经定义了路由应用程序.模块文件.

进口 { BrowserModule }“@角 / platform-browser”;
进口 { NgModule }“@角 /核心”;
进口 { RouteGuard }'./服务/ 路线Guard '
....
@NgModule({
 声明: [
 ....
 ],
 进口: [
 路由器Module.forRoot([
 { 路径: '', 组件: 首页组件, 路径Match: “全部”, canActivate: [RouteGuard] },
 { 路径: “我的资料”, 组件: MyProfile组件, canActivate: [RouteGuard] },
 ....
 ]),
 ....
 ],
 ....
})
出口 class AppModule { }

一般, 程序员使用登录用户的信息,如姓名, email, 身份验证令牌, 等. 九五至尊vi老品牌值得信赖将这些信息存储在本地存储或窗口会话存储中.

Window session stor年龄 is more secure than local stor年龄 as it is removing user data when the browser gets 关闭 and it will prevent 任何 third-party users (hackers) 从 accessing user’s data.

Use 任何 stor年龄 to 维护 data according to your 项目 requirement but make sure that the user’s data must be cleared after the appropriate user gets 日志ged out.

4. 不断更新角库

角一天比一天好,经常提供更新来丰富现有的功能,并提供最佳性能.

时不时地更新会解决问题,并提供良好的安全目的, 所以要不断更新你的库,最大限度地利用角框架来保持你的系统的灵活性.

5. 必须避免使用由连接用户输入生成的模板

在大多数情况下, 通常九五至尊vi老品牌值得信赖会在角应用中使用字符串插值或推荐组件配置. 但有时,九五至尊vi老品牌值得信赖需要将输入字符串连接到模板.

例如:

进口 { 组件, Input }“@角 /核心”;
进口 { Advertisement组件 }'./../广告/ Advertisement组件”;
常量 potentialUserInput = 

你好
...
 
@组件({
    template:
    <section>
    	<h2>{{source.title}}h2>
    	<div>{{source.body}}div>
    section>
    + potentialUserInput
})
出口 class Job组件 实现了 Advertisement组件 {
    @Input() source: 任何;
}

{{source.title}}

{{source.body}}
+ potentialUserInput }) 导出类Job组件实现了Advertisement组件 @Input()来源:任何; }

While 使用 这 类型 of concept you need to filter the user input data to prevent some attack because some attackers can send executable code for accessing information through their input (potentialUserInput),如上述代码所示.

通过执行用户输入和模板的串联,使您永远不会提取模板源代码. 为了防止这些漏洞, 九五至尊vi老品牌值得信赖可以使用“模板注入”,这是一种模板编译器的离线模式.

如果九五至尊vi老品牌值得信赖使用javascript,那么字符串连接是相当容易的. 在角, 有一个Ahead Time编译器,它可以离线编译模板,并将HTML和类型script代码转换为javascript.

ng构建 --aot
ng服务 --aot

在角中——使用Ivy提前编译的编译器默认被设置为真正的,这是为了避免模板注入.

{
  “项目”: {
    “heroes-项目”: {
      “架构师”: {
        “构建”: {
          “选项”: {
            ...
            “aot”: 真正的,
          }
        }
      }
    }
  }
}

6. 除非绝对必要,否则不要在角 Core模块中做任何更改

If you are changing or modifying 任何 files of the 角 core 模块 然后 这 may affect the security and you might face some protection issues. Any unsure modification made in the default 内容 of an 角 can harm existing 函数alities or can change the default behavior of the current version.

So, 如果你想通过pull请求来改变或修复任何现有的问题, 你应该让角社区知道这一点,如果它们不影响当前的任何特性,他们会更新你的更改.

角的主要特性

角有哪些特性?

1. 基于组件的体系结构

角框架将整个应用的UI分离成独立的可重用组件. 这些组件遵循层次结构. 九五至尊vi老品牌值得信赖可以收集具有类似功能的元素, use 组件 指令 and convert them into well-defined 角 组件 that can be reused 任何where in the 角 项目 for implementing 函数ality 与 similar business 日志ic.

2. 角材料

角材料是一个兼容UI的完整UI解决方案. 它是一个完整的可重用UI组件库. 它由几个组件组成,如按钮、表单控件、主题选项、数据表等.

3. 模块化结构

The modular structure of 角 arranges the code into different 模块s so all 服务 and 组件 are divided into different groups when you 常量ruct them. 在角编码中,你可以将功能分解成可重用的代码块.

4. 打印稿

JavaScript最突出的上标之一是类型script. 它有许多内建库,并为角应用提供了许多功能.

5. 角CLI

角CLI(命令行接口工具)有助于开发, 脚手架, 测试, 以及部署角度应用程序. 它可以生成一个新的角应用程序和文件, 执行角应用, 运行测试, 并为它们的部署构建角应用程序.

6. 角的路由器

获取所有内置的路由和导航特性是最佳实践, 角应用最适合所有业务.<一个href="http://角.io/" rel="noreferrer noopener" target="_blank"> 角  路由器s 导航 从 one p年龄 to another p年龄 与out p年龄 reload and while routing to the other 组件 it activates other required 角 组件 as well.

7. 角普遍

因为有了角普遍的使用,你的web应用会更吸引人、更容易使用. It enables you to render web apps on the server-side which is helpful to 任何 web application especially for improving search engine optimization performance.

结论

多个前端开发人员热衷于开发创新和无缝的  角 应用程序使用他们广泛的框架知识. 有了这个九五至尊vi老品牌值得信赖角最佳实践的综合性博客, we tried to cover all the major aspects and best practices that can be used by businesses in their 发展 process and reap maximum benefits 从 it. 角框架让开发过程变得更容易编写代码, 双向数据绑定, 更简单的结构和其他基本贡献,使任务更容易. 如果你的内部业务无法做到这一点, 与专家合作,使用角框架进行开创性的应用开发.

九五至尊vi老品牌值得信赖已经展示了角最佳实践的信息图形化表示. 看一看:

角度最佳实践信息图
想要嵌入此图像? 请注明来源 <一个href="http://www.purlyarn.com">九五至尊vi.com

在您的网站上分享此图像

请注明归属于九五至尊vi.com 图形.
<一个href=“http://www.purlyarn.com/blog/Angular-optimization-and-best-practices/”><img src="http://www.purlyarn.com/b日志/wp-内容/uploads/2020/12/角-Best-Practices-Info图形.jpg” alt=“角的最佳实践” 宽度="952" 高度="3948">a>

其他最佳实践博客:

  1. <一个href="http://www.purlyarn.com/blog/reactjs-best-practices/" rel="noreferrer noopener" target="_blank">应对最佳实践和安全
  2. <一个href="http://www.purlyarn.com/blog/node-js-best-practices/" rel="noreferrer noopener" target="_blank">NodeJS最佳实践和安全性
  3. <一个href="http://www.purlyarn.com/blog/vue-js-best-practices/" rel="noreferrer noopener" target="_blank">VueJS最佳实践和安全
  4. <一个href="http://www.purlyarn.com/outsourcing/2021/07/quality-assurance-best-practices.html" rel="noreferrer noopener" target="_blank">软件测试的QA最佳实践
  5. <一个href="http://www.purlyarn.com/b日志/devops-best-practices/" rel="noreferrer noopener" target="_blank">DevOps的最佳实践
  6. <一个href="http://www.purlyarn.com/b日志/best-practices-in-sharepoint-framework-发展/" rel="noreferrer noopener" target="_blank">SharePoint的最佳实践
  7. <一个href="http://www.purlyarn.com/b日志/net-core-best-practices/" rel="noreferrer noopener" target="_blank">.净核心最佳实践
头像
<一个href="http://www.purlyarn.com/b日志/author/vishals/">Vishal沙

Vishal沙 has an extensive understanding of multiple application 发展 frameworks and holds an upper hand 与 newer trends in order to strive and thrive in the dynamic market. 他在技术和商业方面培养了自己的管理能力,并通过他的博客文章提供了自己的专业知识.

相关的服务

了解更多角开发服务

了解更多

想要雇佣有技能的开发人员


    < / >节

    评论

    • 留个口信...

      1. Rohan曼德

        最佳实践是每个开发人员都必须知道和实现的东西, 几乎每次都是在启动一个新项目或优化他们的应用程序性能时. 每个开发者都应该访问这个页面来了解更多九五至尊vi老品牌值得信赖角的知识.

      2. 洛根•罗斯

        Best practices are a kind of summary of years of experience and knowledge put together and I must say it is a very detailed and comprehensive b日志. 作为一个角的学习者,它给了我很大的帮助.

      3. 阿玛集

        是的, 角是一个开源框架,由谷歌引入,用于帮助开发者创建web应用. 角JS是一个基于javascript的开源框架,开发公司使用它来创建单页面的web应用程序。. 在移动支持方面,只有角支持移动开发,而不是角 JS. 角是用类型script(微软语言)写的,而角JS是用JavaScript写的.

      4. 卡拉特拉维斯

        角和角JS不同吗?

      5. Venkata哈瑞

        选择角进行前端开发的原因如下: 1-Developed通过谷歌 开发单页应用程序的能力 3 .支持复用. 4-用简短的代码提供很多功能. 5-拥有杰出的社区支持.

      6. 阿尔菲希尔

        谁能回答我的问题:为什么角是最好的前端框架?

      7. 阿尔弗雷多•辛顿

        实际上, I am not very much aware of SEO and how to make a website SEO friendly because my client always asks me to do 发展-related changes SEO Friendly. 这篇文章在某种程度上帮助我做到这一点. 不管怎么说,我也发现了一些其他的最佳实践,比如使用路由器从一个页面导航到另一个页面,而不用重新加载页面,使用角普遍让web应用变得SEO友好.

      8. 布莱克B

        感谢分享这篇文章, 角对我来说是全新的, 我在搜索角最佳实践时发现了这一点. 它写得很好,我从这个有用的资源中学到了很多.

      9. 谢谢你的伴侣.

      10. Samresh

        As a novice user of 角 framework and I found one technique of mitigating the risk of cross-site scripting and HTTP-related vulnerabilities is really helpful. 我会就这个问题发邮件给你们. 我希望你们能帮上忙. 谢谢

      11. 达伦

        我不能不对这个博客发表评论,特别要提到的是博客中展示的信息图表. The info图形 crisply conveys the best practices and the simpler declaration of each 进口ant factor and table that might be helpful in preventing memory leaks in 角 apps.

      12. Navdeep

        这个博客真的帮助我磨练了我作为一个角度开发者的技能. 使用Lint规则和Lint包使我的代码更加完善. 使用身份验证令牌和2因素身份验证是我最喜欢的端到端安全性实践之一.

      13. 凯文·贝尔

        谢谢你写了这么好的博客. 信息是惊人的和有趣的. 这是一本人人必读的书. 我真的很感激你的努力工作.

    < / >节