Angular CLI 청사진 생성 코드

이번에는 Angular CLI Blueprint로 생성한 코드를 가져오겠습니다. Angular CLI Blueprint로 생성한 코드의 주의사항은 무엇인가요?

이 글에서는 주로 구성 요소, 지시문, 서비스, class, 인터페이스, 열거형 등에 대해 설명합니다.

ng generate 명령의 형식은 ng generate

실제로 파일을 생성하는 대신 생성할 파일을 나열하기 위해 --dry-run 매개변수를 사용할 수도 있습니다.

예:

ng 구성 요소 사람을 생성하면 사람이 생성됩니다. component.ts.

ng 서비스 판매 데이터 생성은 sales-data.service.ts를 생성합니다.

ng 생성 클래스 user-model은 UserModel 클래스를 포함하는 user-model.ts를 생성합니다.

Components.

ng generate xxx xxx 명령은 여전히 ​​약간 깁니다. 여기에서 angle cli에는 명령에 대한 별칭이 내장되어 있습니다. 예를 들면 다음과 같습니다. , inside

구성 요소는 문자 c로 대체될 수 있습니다.

따라서 이 두 명령은 동일합니다.

ng generate component person
ng g c person

여기로 이동하면 구성 요소 관련 명령과 별칭을 볼 수 있습니다.

https://

github.com /angular/angular-cli /wiki/generate-comComponent

일반적으로 사용되는 명령 매개 변수는 다음과 같습니다.

--Flat는 폴더를 만들 필요가 없는지 여부를 나타냅니다

--inline-template (-it ) 템플릿을 ts 파일에 배치해야 하는지 여부

1. --inline-style (-is) 스타일을 ts 파일에 배치해야 하는지 여부

2. --spec 스펙을 생성해야 하는지 여부. file(테스트 파일)

3. --view-encapsulation(-ve) 뷰 캡슐화 전략(단순히 스타일 파일의 범위 전략으로 이해됨).

4. --change-Detection(-cd) 변경 감지 전략.

5. --prefix 이 구성요소의 접두사를 설정합니다

6. --dry-run(-d), 직접 생성하는 대신 생성된 파일 목록을 인쇄합니다.

7. 다음 두 쌍을 살펴보세요. 별칭을 사용하는 것이 더 편리합니다.

ng generate component person
ng generate component person --inline-template --inline-style
ng g c person
ng g c person -it -is

8. 다음 명령을 시도해 보세요.
   프로젝트 만들기: ng new my-app 진행하기 전에 npm 설치가 완료될 때까지 기다립니다.

프로젝트를 설정한 후 다음을 입력하세요.

ng g c person -d

이 명령은 위의 4개 파일을 생성하고

Update

app.

module

.ts.

아래의 -d 매개변수를 제거하고 파일을 생성합니다.

프로젝트에 파일이 생성된 것을 볼 수 있습니다. 그리고 app.module.ts를 업데이트하고, 그 안에 컴포넌트 선언을 만듭니다.

다른 컴포넌트를 다시 생성해 보고, 몇 가지 매개변수를 사용하여 캡슐화 및 변경 감지 전략을 확인하세요. :

ng g c student -ve Emulated -cd OnPush

매개변수가 작동하는 것을 확인할 수 있습니다.

소스 코드 관리 페이지를 통해 이 두 명령이 app.module에 어떤 업데이트를 적용했는지 확인할 수 있습니다.

생성된 두 구성 요소를 각각 선언합니다. .

그런 다음 커밋합니다...

Directive.

ng g d filter-box -d

이것은 파일 보고서이며 실제로 다음이 생성됩니다.

ng g d filter-box

通过vscode的源码管理, 可以看到变化:

directive生成了两个文件和component一样, 也在app.module进行了声明.

看一下目录结构:

生成的directive的结构是没有目录, 也就是flat的.

如果不想生成flat样式的, 想让其拥有自己的文件夹, 那么就是用--flat参数:

ng g d filter-box2 --flat false

这样就有自己的文件夹了.

commit一下.

Service.

ng g s order-data -d

可以看到 这个命令会生成flat结构的service.

然后把-d去掉, 真实生成文件:

ng g s order-data

可以从源码管理看到, 只生成了两个文件, 并没有在app.module里面注册:

当然可以在这里写代码把刚才生成的service注册进去.

但是正确的做法是使用 -m 参数来指定需要注册的module:

ng g s order-data2 -m app

这次生成的order-data2 service就会在app.module.ts里面进行注册了.

然后再commit一下.

Model/Interface/Enum/Pipe.

model:

ng g cl models/user

这个命令会创建models文件夹, 然后在里面创建user这个model:

interface:

ng g i models/animal

enum:

ng g e models/gender

commit一下.

Pipe.

ng g p camel-case

除了生成两个文件之外, 这个命令默认也会更新app.module.

Module.

ng g m login

可以看到module默认是自带文件夹的.

然后我试试添加一个component, 目的是要在login module进行声明:

可以看到我要创建的welcome component默认是在app.module里面进行声明的, 这时候如果想要在login module进行声明, 就要使用 -m 参数:

去掉-d执行生成命令后:

이번 로그인 모듈에서 Welcome 구성요소에 의해 작성된 설명을 볼 수 있습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하시기 바랍니다. PHP 중국어 웹사이트에서!

추천 자료:

마우스로 트리거되는 플로팅 레이어 효과를 달성하기 위한 Angular CLI

JS를 사용한 단위 테스트 및 E2E 테스트 단계에 대한 자세한 설명

위 내용은 Angular CLI 청사진 생성 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!