Angular CLI를 사용하여 청사진에서 코드를 생성하는 방법에 대한 자세한 설명

이 글에서는 Angular CLI를 사용하여 블루프린트에서 코드를 생성하는 방법에 대한 자세한 설명을 주로 소개하고 참고용으로 제공합니다.

첫 번째 기사는 "angular cli를 사용하여 angle5 프로젝트 생성"입니다: http://www.jb51.net/article/136621.htm

이 기사는 주로 구성 요소, 지시문, 서비스, 클래스, 인터페이스 생성에 대해 설명합니다. enum 등이 있습니다.

ng generate 명령.

이 명령의 형식은 ng generate 입니다.

또한 --dry-run 매개변수를 사용하여 실제로 파일을 생성하는 대신 생성할 파일을 나열합니다. 예:

ng 구성 요소 person을 생성하면 person.comComponent.ts가 생성됩니다.

ng 서비스 sales-data가 sales-data.service.ts를 생성합니다. .

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

Components.

ng xxx xxx를 생성하는 명령은 여전히 ​​약간 깁니다. 여기서는 각도 cli가 구축했습니다. in 명령 별칭은 다음과 같습니다.

ng generate component person 이 명령에서

의 생성은 문자 g로 대체될 수 있고

의 구성 요소는 문자 c로 대체될 수 있습니다. 이 두 명령은 동일합니다.

ng generate component person
ng g c person

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

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

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

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

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

2. --inline-style(-is) 스타일을 TS 파일에 배치할지 여부입니다.

3. --spec 스펙 파일(테스트 파일)을 만들어야 합니까?

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

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

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

7. - -dry-run(-d), 생성된 파일 목록을 인쇄하고 직접 생성되지 않음

8. 동일한 효과를 갖는 다음 두 쌍의 명령을 살펴보십시오.

ng generate component person
ng generate component person --inline-template --inline-style

ng g c person
ng g c person -it -is

다음 명령을 시도해 보겠습니다.

프로젝트 만들기: ng new my-app npm 설치가 완료될 때까지 기다립니다. 그런 다음 계속 진행하세요.

프로젝트를 설정한 후 디렉터리를 입력하고

ng g c person -d

이 명령은 위의 4개 파일을 생성하고 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의 소스 코드 관리를 통해 변경 사항을 볼 수 있습니다.

지시문은 구성 요소와 동일하고 app.module에도 선언된 두 개의 파일을 생성했습니다.

디렉토리 구조를 살펴보세요.

생성된 지시문의 구조에는 디렉터리가 없습니다.

플랫 스타일을 생성하고 싶지 않고 자체 폴더를 갖고 싶다면 --plat 매개변수를 사용하세요.

ng g d filter-box2 --flat false

나만의 폴더.

커밋.

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执行生成命令后:

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Angular CLI生成路由的方法

使用Angular CLI进行Build(构建)和Serve详解

使用Angular CLI进行单元测试和E2E测试的方法

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