新的介绍内容：
使用这些快捷代码片段，加速您的Angular开发！
_si _irc _ircf ngfor _for ngforli _forli _ifs
interface_cfi 从文件名创建接口 _ci 从选中文本创建接口
enum_cfe 从文件名创建枚举 _ce 从选中文本创建枚举
types_cft 从文件名创建类型 _ct 从选中文本创建类型
private variable constructor_pv 创建只读私有变量
public variables_puvb 创建布尔型公共变量 _puvs 创建字符串型公共变量 _puvn 创建数字型公共变量 _puva 创建数组型公共变量
TODO_td
条件语句_c| _c&
如果您有任何疑问或遇到问题，请通过LinkedIn联系我。
测试创建HTML和TypeScript的快捷代码片段。
添加了新的公共变量、接口、枚举和类型的快捷代码片段。README中增加了Angular入门小指南。
感谢使用ts-angular-snippets-soygeekgirl！
在独自开发或团队协作中犯了一些错误后，我意识到保持项目稳定和开发过程顺畅的关键是遵循一定的代码规则和结构。因此，我创建了这份小指南，旨在标准化代码编写，促进团队协作，采用被认为是清洁代码的实践。
使用Angular CLI来生成新的组件、指令、模块、服务和管道。
// 安装Angular CLI
npm install -g @angular/cli@版本号
// 检查版本
ng version
// 创建新应用
ng new 应用名称
// 生成组件、指令、模块、服务、管道、库
ng generate component|directive|module|service|pipe|library<名称>
// 使用快捷方式生成
ng g c 组件名称
ng g s 服务名称
ng g m 模块名称
ng g d 指令名称
ng g p 管道名称
ng g lib 库名称
ng generate guard
// 启动项目
ng serve
// 测试
ng test
// 安装包
npm install 包名称
// 添加依赖包
ng add @依赖包名称可选链操作符 (?.)
// 对象?.属性
const user = {
name: "Juan",
age: 30,
};
const address = user?.address;三元运算符 (? : )
const isLoggedIn = true;
const message = isLoggedIn ? "Bienvenido" : "Inicia sesión";空值合并操作符 (??)
const foo = null ?? "默认字符串";非空断言操作符 (!)
@Input() public misDatos!: datos;
this.form.get('name')!.setValue('pancho');解构赋值
const user = {
name: "Pedro",
age: 35,
};
const { name, age } = user; // name将是"Pedro"，age将是35
const test = [1, 2, 3];
const [first, second] = test; // 1, 2使用描述性名称，使其易于理解其功能或含义。遵循5秒规则，如果在5秒内无法理解变量或方法的作用，则应重命名。布尔值变量应以is开头且不使用否定形式，如isValid、isDisabledSaveButton。
方法
getCurrentType() 或 getCurrentTypeById(id:number):void 方法如果不返回任何值，则应使用void类型，否则使用相应的类型或DTO。
使用public或private关键字，根据具体情况。
例如：
private getCurrentType():void{
}
public getCurrentTypeById(id:number):void{
}使用private readonly _名称: 组件，并在名称前加下划线。
例如：this._servicio.metodo()
定义对象结构，包含属性和方法，提高类型定义的灵活性和重用性。
export interface UserInterface {
text: string;
age?: number;
}
let user: UserInterface;
interface User {
name: string;
email: string;
age: number;
greet(): string;
}
let user: User = {
name: "Soy geekgirl",
email: "soy@geekgirl.com",
age: 30,
greet() {
return `Hi, i'm ${this.name}`;
},
};用于定义一组有限且相关的常量值，如用户类型、角色、状态等，提高类型安全性和代码可读性。
export enum UserRole {
Admin,
Moderator,
User,
}
let currentUserRole: UserRole = UserRole.Admin;
export enum TypeUserEnum {
ADMIN = 1,
BASIC = 3,
}使用类型别名简化复杂或基本类型的语法，适用于不需要额外逻辑或属性的类型。
export type myType = {
type: "basic" | "admin";
};
let currentType: myType = {
type: "basic",
};使用接口作为DTO来处理数据请求，因为接口可以定义类型和结构。例如，在GET请求中使用接口可以快速将JSON转换为接口，如RapidApi或JSON to TS。
export interface UserModel {
//...
}保持命名规则以提高代码的可读性。使用连字符("-")分隔文件名中的单词，使用点号(".")分隔文件名和文件类型。推荐的命名模式是：
<文件名>.<类型>.ts|.css|.html
// 示例
文件名.component.ts
文件名.enum.ts
文件名.model.ts注意：此概念是从我参考的指南中复制而来，我曾在Vuex项目中使用过，但当时不知道这种技术称为Barrels。
使用"Barrels"来帮助组织项目。每个包含.ts文件的文件夹中添加一个名为"index.ts"的文件，导出所有可导出的变量，形成一种层次结构，简化import语句。
假设有三个不同的组件在./app/modules/home/component中：
export class SomeComponent {}
export class SomeClass {}
export class SomeService {}在./app/modules/home/component中添加这个barrel：
export * from "./some.model.ts";
export * from "./some.service.ts";
export { SomeComponent } from "./some.component.ts";现在只需从这个barrel中导入所需内容：
import { SomeComponent, SomeService, SomeClass } from "../some"; // index隐式包含仅加载正在使用的模块。
import ...;
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./modules').then( m => m.HomeModule ) },
{ path: '**', redirectTo: 'home' }
];
@NgModule({...})
export class AppRoutingModule { }可以参考官方Angular编码风格指南：
官方Angular编码风格指南、Google AngularJS编码风格指南、Google TypeScript编码风格指南、github.com/USpiri/angular-guideline。
更多信息请访问我的LinkedIn页面@soygeekgirl。祝您开发愉快！
本站所有资源都是由网友投稿发布，或转载各大下载站， 请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则 产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：study_golang@163.com
