각도 폴더 구조

3294 단어
첫 번째 Angle 항목을 만들었으며 브라우저에서 "ng serve"를 사용하는 방법을 알고 있습니다.이제 Angular Project 폴더와 프로젝트를 구성하는 데 도움이 되는 몇 가지 팁을 살펴보겠습니다.
오늘은 프로젝트의 폴더 구조를 볼 수 있는 VisualStudio 코드의 리소스 매니저 창을 중점적으로 소개하겠습니다.이것은 창문을 여는 방법이다.

열면 다음을 볼 수 있습니다.

Visual Studio 코드가 RESUME이라는 폴더에 열려 있기 때문에 RESUME의 프로젝트 이름을 주의하십시오. 이 폴더는 "ng new RESUME"명령을 통해 만들어집니다.
폴더를 열면 다음과 같은 내용이 표시됩니다.

우리는 뒤에서 모든 파일을 토론할 것입니다. 그러나 지금은 'src' 라는 폴더를 중점적으로 토론할 것입니다. 이 폴더는 우리가 구축할 모든 구성 요소의 위치를 대표하여 사이트를 구성할 것입니다.
SRC 폴더
SRC 폴더의 가장 중요한 파일은 인덱스입니다.html 파일, 이것은 당신의 웹 응용 프로그램의 최종 루트입니다. 이것은 당신의 웹 서버가 당신의 사이트에 서비스를 제공할 때 찾을 주 파일임을 의미합니다.

이제 색인을 무시합니다.html 파일, 응용 프로그램과 자산 폴더를 확인합니다.'응용' 폴더는 저희가 최종적으로 귀하의 사이트의 모든 웹 페이지/구성 요소를 놓는 곳입니다.자산 폴더는 모든 미디어(이미지 및 기타 내용)를 저장하는 곳입니다.
자산.
'자산'폴더는 사이트에서 사용해야 할 비html 파일을 수집하는 폴더이기 때문에 매우 특수하다.다른 종류의 파일도 거기에 놓을 수 있는 그림으로 상상해 보세요.
나 요즘 더 좋아하는 걸로 바꿨어.jpg 파일 형식입니다. 왜냐하면 많은 사람들이 사이트 이미지에 더 적합하다고 말하는 것을 보았기 때문입니다.그러나 다른 모든 이미지 유형, 심지어 미디어 유형도 작동할 수 있다.
이 폴더에 그림을 넣으려면 '구글 이미지' 를 오른쪽 단추로 누르고 '다른 이름으로 저장' 을 선택한 다음 '자산' 폴더에 그림을 직접 넣으십시오.
구성 요소 폴더
Components라는 폴더를 만들고 싶습니다."ng g c xyzname"명령을 사용하면 이 폴더로 전환합니다.다음 규칙을 사용하여 각 어셈블리에 적합한 이름을 고려하는 것이 좋습니다.
  • 구성 요소당 하나만 가능
  • 모든 구성 요소의 이름은 그들이 한 일을 반영해야 한다.
  • "header"는 사이트의 한 구역을 묘사하기 때문에 좋은 이름이다
  • 'footer'도 좋은 이름이고 이유도 마찬가지다.
  • 'main'은 좋은 이름이다. 왜냐하면 사이트에 모든 내용을 포함하는 주요 구역일 수 있기 때문이다.
  • 다른 좋은 이름은 다음과 같다.
  • '이력서'는 이력서 부분을 포함한다.
  • "명령", 모든 명령 저장(추후 논의)
  • 다른 부분과 분리된 사이트의 특정한 부분을components 폴더에 넣을 수 있기를 바랍니다.
    ng g c xyzName
    앞에서 언급한 구성 요소의 각도 생성 명령은
    'ng g c xyzName'
    
    이것은angular에게 새 구성 요소를 만드는 데 사용되는 가장 자주 사용되고 인기 있는 명령이 될 것입니다.명령을 내리기 전에 먼저 올바른 폴더에 있는지 확인하십시오. (구성 요소를 만들고자 하는 위치)
    각 새 어셈블리는 다음과 유사하게 보입니다.

    만약 우리가 이력서 사이트에 교육 부분을 원한다면 이력서 폴더로 전환하고'ng g c education'을 입력하면 폴더'education'을 만들고 4개의 파일을 이 폴더에 넣을 것이다.이 네 개의 파일 중 세 개가 이 구성 요소를 구성했다.이 세 파일은 HTML 파일이고 GUI의 경우 입니다.scss 파일은 이 페이지의 스타일과 스타일에만 적용됩니다.ts 파일, 이 구성 요소와 관련된 형식 스크립트 코드입니다.구성 요소의 개념을 하나의 파일로 간주합니다. 이 파일들은 웹 페이지에 필요한 모든 것을 제공합니다.
    다음 글에서 우리는 이 문건들의 내용을 소개할 것이다.
    이제 "ng 서버"를 입력하면 로컬 호스트에서 4200 포트가 팝업됩니다.
    행운을 빕니다. 집중하는 것을 기억하세요.
    만약 당신이 Angularcheck this site out의 초보라면, 그것은 무료입니다!이메일만 추가하면 처음 21개 과목을 무료로 받을 수 있다.
    JWP2021

    좋은 웹페이지 즐겨찾기