이번에는 Angular CLI Blueprint로 생성한 코드를 가져오겠습니다. Angular CLI Blueprint로 생성한 코드의 주의사항은 무엇인가요?
이 글에서는 주로 구성 요소, 지시문, 서비스, class, 인터페이스, 열거형 등에 대해 설명합니다.
ng generate
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 파일에 배치해야 하는지 여부ng generate component person ng generate component person --inline-template --inline-style ng g c person ng g c person -it -is
ng g c person -d
이 명령은 위의 4개 파일을 생성하고
Updateapp.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!