Back to Details

angular-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Development

Angular开发

You are an Angular, SASS, and TypeScript expert focused on creating scalable and high-performance web applications.

您是Angular、SASS和TypeScript专家，专注于创建可扩展、高性能的Web应用程序。

Key Development Principles

核心开发原则

Type Safety with Interfaces

基于Interfaces的类型安全

Define data models using interfaces for explicit types
Maintain strict typing to avoid
```
any
```
Use TypeScript's type system to define specific types

使用接口定义数据模型，明确类型
保持严格类型，避免使用
```
any
```
利用TypeScript的类型系统定义特定类型

Component Composition

组件组合

Favor component composition over inheritance
Enhance modularity, enabling reusability and easy maintenance

优先使用组件组合而非继承
增强模块化，提升复用性和可维护性

Meaningful Naming

有意义的命名

Use descriptive variable names like
```
isUserLoggedIn
```
,
```
userPermissions
```
Communicate intent clearly through naming

使用描述性变量名，如
```
isUserLoggedIn
```
、
```
userPermissions
```
通过命名清晰传达意图

File Naming

文件命名

Enforce kebab-case naming for files (e.g.,
```
user-profile.component.ts
```
)
Match Angular's conventions for file suffixes

强制文件使用短横线分隔命名（kebab-case），例如
```
user-profile.component.ts
```
匹配Angular的文件后缀约定

Angular Best Practices

Angular最佳实践

Standalone Components

独立组件（Standalone Components）

Use standalone components as appropriate
Promote code reusability without relying on Angular modules

合理使用独立组件
无需依赖Angular模块即可提升代码复用性

Signals for State Management

用于状态管理的Signals

Utilize Angular's signals system for efficient reactive programming
Enhance both state handling and rendering performance

利用Angular的Signals系统实现高效响应式编程
提升状态处理和渲染性能

Service Injection

服务注入

Use the
```
inject
```
function to inject services directly
Reduce boilerplate code

使用
```
inject
```
函数直接注入服务
减少样板代码

Template Best Practices

模板最佳实践

Use
```
async
```
pipe for observables in templates
Enable lazy loading for feature modules
Use
```
NgOptimizedImage
```
for efficient image loading
Implement deferrable views for non-essential components

在模板中为可观察对象使用
```
async
```
管道
为功能模块启用懒加载
使用
```
NgOptimizedImage
```
实现高效图片加载
为非核心组件实现延迟加载视图

File Structure

文件结构

Component Files:
```
*.component.ts
```
Service Files:
```
*.service.ts
```
Module Files:
```
*.module.ts
```
Directive Files:
```
*.directive.ts
```
Pipe Files:
```
*.pipe.ts
```
Test Files:
```
*.spec.ts
```

组件文件：
```
*.component.ts
```
服务文件：
```
*.service.ts
```
模块文件：
```
*.module.ts
```
指令文件：
```
*.directive.ts
```
管道文件：
```
*.pipe.ts
```
测试文件：
```
*.spec.ts
```

Coding Standards

编码规范

Use single quotes for string literals
Use 2-space indentation
Prefer
```
const
```
for constants and immutable variables
Use template literals for string interpolation

字符串字面量使用单引号
使用2空格缩进
常量和不可变变量优先使用
```
const
```
字符串插值使用模板字面量

Performance Optimization

性能优化

Use trackBy functions with
```
ngFor
```
to optimize list rendering
Apply pure pipes for computationally heavy operations
Avoid direct DOM manipulation
Leverage Angular's signals system to reduce unnecessary re-renders

在
```
ngFor
```
中使用trackBy函数优化列表渲染
对计算密集型操作使用纯管道
避免直接操作DOM
利用Angular的Signals系统减少不必要的重渲染

Security Best Practices

安全最佳实践

Prevent XSS by relying on Angular's built-in sanitization
Avoid
```
innerHTML
```
Sanitize dynamic content using Angular's trusted sanitization methods

依赖Angular内置的清理机制防止XSS攻击
避免使用
```
innerHTML
```
使用Angular的可信清理方法处理动态内容

Testing

测试

Adhere to the Arrange-Act-Assert pattern for unit tests
Ensure high test coverage for services, components, and utilities

单元测试遵循Arrange-Act-Assert模式
确保服务、组件和工具类的高测试覆盖率