Angular 开发编码规约
以下是一个更加详细的Angular开发编码规约，涵盖了项目布局、命名约定、代码风格、组件与模板、服务与依赖注入、模块、路由、测试、文档与解释、版本控制等方面的详细引导。Angular 开发编码规约
一、项目布局
[*] 顶层目次：
[*] src/: 源代码目次
[*] src/app/: 应用主模块和组件
[*] src/assets/: 静态资源文件
[*] src/environments/: 环境设置文件
[*] 功能模块：
[*] 每个功能模块放在单独的文件夹中。
[*] 使用特性模块（feature modules）来分割应用。
src/
├── app/
│ ├── core/ # 核心模块（单例服务，全局组件）
│ ├── shared/ # 共享模块（可复用的组件、指令、管道）
│ ├── feature1/ # 功能模块1
│ ├── feature2/ # 功能模块2
│ └── app.module.ts # 根模块
├── assets/
├── environments/
└── main.ts
[*] 每个模块的子布局：
[*] 每个模块应包含components、services、models、pipes和directives等子文件夹。
[*] 示例：
feature1/
├── components/
│ ├── component1/
│ │ ├── component1.component.ts
│ │ ├── component1.component.html
│ │ ├── component1.component.scss
│ │ └── component1.component.spec.ts
│ └── component2/
├── services/
│ └── service1.service.ts
├── models/
│ └── model1.model.ts
├── pipes/
│ └── pipe1.pipe.ts
└── directives/
└── directive1.directive.ts
二、命名约定
[*] 文件命名：
[*] 使用短横线（kebab-case）命名。
[*] 示例：user-profile.component.ts，user.service.ts。
[*] 类名和接口名：
[*] 使用帕斯卡命名法（PascalCase）。
[*] 示例：UserProfileComponent，UserService。
[*] 变量和函数：
[*] 使用驼峰命名法（camelCase）。
[*] 示例：userName，getUserProfile()。
[*] 组件选择器：
[*] 使用短横线命名，且包含应用前缀。
[*] 示例：app-user-profile。
[*] 摆列命名：
[*] 摆列名称使用帕斯卡命名法，摆列值使用全大写下划线命名法。
[*] 示例：
export enum UserRole {
ADMIN = 'ADMIN',
USER = 'USER'
}
三、代码风格
[*] 使用单引号：
[*] 优先使用单引号，只有在包含单引号的字符串中使用双引号。
[*] 示例：const title = 'Hello World';。
[*] 缩进与空格：
[*] 使用2个空格缩进。
[*] 制止使用制表符。
[*] 分号：
[*]在每个语句竣事时使用分号。
[*] 箭头函数：
[*]只管使用箭头函数来保持上下文中的this。
[*] 模板字符串：
[*]使用模板字符串（反引号）拼接长字符串。
[*] 解释：
[*] 在复杂的逻辑或关键部分添加解释。
[*] 制止冗长或不必要的解释。
[*] 示例：
// 检查用户是否已登录
if (this.authService.isLoggedIn()) {
...
}
[*] 空行：
[*]在代码块之间和逻辑分段之间添加空行，加强可读性。
[*] 代码长度：
[*]每行代码的长度不应超过120个字符，制止过长的代码行。
四、组件与模板
[*] 组件类：
[*] 每个组件都应包含一个类。
[*] 遵循单一职责原则，一个组件只做一件事。
[*] 示例：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {
user: User;
constructor(private userService: UserService) { }
ngOnInit(): void {
this.userService.getUser().subscribe(user => this.user = user);
}
}
[*] 模板文件：
[*] 使用内联模板（template）或外部模板文件（templateUrl）。
[*] 制止在模板中使用复杂的表达式。
[*] 示例：
<div *ngIf="user">
<h1>{{ user.name }}</h1>
<p>{{ user.email }}</p>
</div>
[*] 样式文件：
[*] 使用内联样式（styles）或外部样式文件（styleUrls）。
[*] 保举使用SCSS。
[*] 示例：
.user-profile {
h1 {
color: #333;
}
p {
font-size: 14px;
}
}
[*] 数据绑定：
[*] 使用单向数据绑定（），制止双向绑定（[(ngModel)]）带来的复杂性。
[*] 示例：
<input ="user.name" (input)="user.name = $event.target.value">
[*] 事件绑定：
[*] 使用事件绑定（(event)）处理用户交互。
[*] 示例：
<button (click)="onClick()">Click me</button>
[*] 指令与管道：
[*] 自定义指令和管道应在共享模块中定义和导出。
[*] 使用Angular内置指令和管道（如*ngIf、*ngFor、| date）。
[*] 示例：
@Pipe({ name: 'capitalize' })
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
五、服务与依赖注入
[*] 服务类：
[*] 所有服务都应注入到根模块或特性模块中。
[*] 使用@Injectable装饰器。
[*] 示例：
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
getUser(): Observable<User> {
return this.http.get<User>('/api/user');
}
}
[*] 依赖注入：
[*] 遵循Angular的依赖注入机制，制止直接实例化服务。
[*] 使用构造函数参数注入服务。
[*] 示例：
export class UserProfileComponent {
constructor(private userService: UserService) { }
}
[*] 提供商模式：
[*] 服务应在模块级别或组件级别提供。
[*] 使用providedIn属性将服务提供给根模块或特定模块。
六、模块
[*] 模块文件：
[*] 每个模块应包含一个NgModule。
[*] 制止在同一模块中导入和声明太多组件。
[*] 示例：
@NgModule({
declarations: ,
imports: ,
providers:
})
export class UserModule { }
[*] 共享模块：
[*] 创建共享模块以声明和导出公共组件、指令和管道。
[*] 示例：
@NgModule({
declarations: ,
exports: ,
imports:
})
export class SharedModule { }
[*] 焦点模块：
[*] 创建焦点模块用于应用级别的单例服务和全局组件。
[*] 示例：
@NgModule({
providers:
})
export class CoreModule { }
七、路由
[*] 路由设置：
[*] 将路由设置放在一个独立的模块中。
[*] 使用惰性加载
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]