이 글에서는 Angular CLI를 사용하여 블루프린트에서 코드를 생성하는 방법에 대한 자세한 설명을 주로 소개하고 참고용으로 제공합니다.
첫 번째 기사는 "angular cli를 사용하여 angle5 프로젝트 생성"입니다: http://www.jb51.net/article/136621.htm
이 기사는 주로 구성 요소, 지시문, 서비스, 클래스, 인터페이스 생성에 대해 설명합니다. enum 등이 있습니다.
ng generate bcd3001c833876023595adb6a89868d3 명령.
이 명령의 형식은 ng generate bcd3001c833876023595adb6a89868d3 0dad762fe72cf0bdcfb218841cdccb22입니다.
또한 --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는 폴더를 만들 필요가 없는지 여부를 나타냅니다
--inline-template (-it) 템플릿을 ts 파일에 배치해야 하는지 여부
--inline-style(-is) 스타일을 TS 파일에 배치할지 여부입니다.
--spec 스펙 파일(테스트 파일)을 만들어야 합니까?
--view-encapsulation(-ve) 캡슐화 전략 보기(단순히 스타일 파일의 범위 전략으로 이해됨).
--change-Detection (-cd) 변경 감지 전략.
--prefix는 이 구성 요소의 접두사를 설정합니다.
- -dry-run(-d), 생성된 파일 목록을 인쇄하고 직접 생성되지 않음
동일한 효과를 갖는 다음 두 쌍의 명령을 살펴보십시오.
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进行Build(构建)和Serve详解
위 내용은 Angular CLI를 사용하여 청사진에서 코드를 생성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!