Angular 5.0 개발 환경 설정 및 첫 번째 ng5 프로젝트 생성

이 글에서는 주로 개발 환경을 설정하고 첫 번째 ng5 프로젝트를 생성하는 방법을 angularjs소개합니다. 이제 이 글을 함께 살펴볼까요

1. Node.js 설치

작업을 시작하기 전에 개발 환경을 설정해야 합니다.
아직 컴퓨터에 Node.js®와 npm이 없다면 먼저 설치하세요.
Node.js 공식 웹사이트(https://nodejs.org/en/)로 이동하여 다운로드 버튼을 클릭하고 최신 버전을 다운로드한 후 다음 단계에서 설치하면 소프트웨어가 자동으로 환경에 작성됩니다. cmd 명령 창에서 직접 node 또는 npm(패키지 관리 도구) 명령을 사용할 수 있습니다.

먼저 터미널/콘솔 창에서 node -v 및 npm -v 명령을 실행하여 node 6.9.x 및 npm 3.x.x 이상을 실행하고 있는지 확인하세요. 이전 버전에는 오류가 있을 수 있지만 최신 버전에는 문제가 없습니다.

2. cnpm 설치(선택적 작업)

npm의 전체 이름은 NodeJS 패키지 관리 및 배포 도구로 Node 모듈(패키지) 게시의 비공식 표준이 되었습니다.
npm 설치 플러그인은 외국 서버에서 다운로드되기 때문에 네트워크의 영향을 크게 받고 예외가 발생할 수 있습니다. 그러면 Taobao 팀은 npm 대신 cnpm을 사용하여 완전한 npmjs.org 이미지를 제작했습니다. nodejs npm과 동일하지만 단지 명령을 실행하는 것뿐입니다. 언제 npm을 cnpm으로 변경합니다.
cmd 명령창에 입력하고 Enter를 누르세요.

npm install cnpm -g --registry=https://registry.npm.taobao.org

설치가 완료되면 cnpm -v를 입력하면 설치가 성공했다는 의미입니다.
인터넷 속도가 충분히 빠르면 cnpm 설치는 선택 사항입니다. 작성자는 cnpm을 사용하여 ng5 프로젝트의 종속성 파일을 다운로드한 적이 있습니다. 개발 중에는 아무런 영향을 미치지 않았지만 ng build --prod를 사용할 때 오류가 발생했습니다. 여전히 문제가 무엇인지 모르겠습니다. 따라서 다음 작업은 npm을 기반으로 합니다.

3. Angular CLI 설치

Angular CLI를 전역적으로 설치하려면 cmd에 다음 명령을 입력하세요.

npm install -g @angular/cli

그런 다음 ng -v를 입력합니다. 버전 번호가 나타나면 설치에 성공한 것입니다. Angular CLI의 버전 번호가 1.5 이상이면 새로 생성된 프로젝트는 Angular 5.0 버전이 됩니다.
ng는 Angle의 약어입니다.

4. IDE 설치

통합 개발 환경(IDE, Integrated Development Environment)은 일반적으로 코드 편집기, 컴파일러, 디버거 및 그래픽 사용자 인터페이스와 같은 도구를 포함하는 프로그램 개발 환경을 제공하는 데 사용되는 응용 프로그램입니다. 코드 작성 기능, 분석 기능, 컴파일 기능, 디버깅 기능 등을 통합하는 통합 개발 소프트웨어 서비스 제품군입니다. 이 기능을 갖춘 모든 소프트웨어 또는 소프트웨어 패키지(그룹)를 통합 개발 환경이라고 할 수 있습니다.
Webclipse의 Angular IDE
intellij idea
Visual Studio Code
webstorm
작업 효율을 높여줄 자신이 좋아하고 친숙한 IDE를 선택하세요. 저자의 IDE는 webstorm입니다.

5. 새 프로젝트 만들기

터미널 창을 엽니다.

다음 명령을 실행하여 새 프로젝트와 애플리케이션의 기본 코드를 생성합니다.

ng new my-app

my-app은 프로젝트의 이름이며 원하는 대로 정의할 수 있습니다.

잠깐만 기다려주세요. 새 프로젝트를 만드는 데는 대부분의 경우 약 2억 개가 넘는 npm 패키지를 설치하는 데 많은 시간이 걸립니다.

프로젝트 디렉토리를 입력하고 서버를 시작하세요.

cd my-app
ng serve --open

ng Serve 명령은 개발 서버를 시작하고, 파일 변경 사항을 수신하고, 이러한 파일이 수정되면 애플리케이션을 다시 빌드합니다.
자동으로 브라우저를 열고 http://localhost:4200/에 액세스하려면 --open(또는 -o) 매개변수를 사용하세요.

이 앱은 다음 메시지로 여러분을 맞이할 것입니다:

6. 첫 번째 Angular 구성 요소 편집

이 CLI는 첫 번째 Angular 구성 요소를 생성합니다. app-root라는 루트 구성 요소입니다. ./src/app/app.comComponent.ts 디렉토리에서 찾을 수 있습니다.

이 구성 요소 파일을 열고 제목 속성을 Welcome to app!!에서 Welcome to My First Angular App!!으로 변경합니다.

src/app/app.comComponent.ts:

export class AppComponent {
  title = 'My First Angular App';
}

브라우저가 자동으로 새로 고쳐지고 수정된 제목을 볼 수 있습니다. 나쁘지는 않지만 조금 더 보기 좋을 수도 있습니다.

src/app/app.comComponent.css를 열고 이 구성 요소에 대한 몇 가지 스타일을 설정하세요.

src/app/app.comComponent.css:

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

첫 번째 Angular 구성 요소를 성공적으로 편집했습니다!

7. 프로젝트 파일 개요

Angular CLI 프로젝트는 엔터프라이즈 솔루션의 신속한 실험과 개발을 위한 기반입니다.

가장 먼저 살펴봐야 할 파일은 README.md입니다. CLI 명령을 사용하는 방법에 대한 몇 가지 기본 정보를 제공합니다.

7.1 src 폴더

애플리케이션 코드는 src 폴더에 있습니다. 모든 Angular 구성 요소, 템플릿, 스타일, 이미지 및 앱에 필요한 모든 것이 여기에 있습니다. 이 폴더 외부의 파일은 애플리케이션 구축을 지원하는 데 사용됩니다.

app/app.comComponent.{ts,html,css,spec.ts}
HTML 템플릿, CSS 스타일 및 단위 테스트를 사용하여 AppComponent 구성 요소를 정의합니다. 이는 루트 구성 요소이며 애플리케이션이 성장함에 따라 구성 요소 트리의 루트 노드가 됩니다.

app/app.module.ts
AppModule을 정의하세요. 이 루트 모듈은 Angular에 애플리케이션을 조립하는 방법을 알려줍니다. 현재는 AppComponent만 선언합니다. 나중에 더 많은 구성 요소를 선언합니다.

assets/*
이 폴더에는 사진과 기타 모든 항목을 넣을 수 있습니다. 애플리케이션을 빌드하면 모두 릴리스 패키지에 복사됩니다.

environments/*
이 폴더에는 각 대상 환경에 맞게 준비된 파일이 포함되어 있으며, 애플리케이션에서 사용되는 일부 구성 변수를 내보냅니다. 이러한 파일은 애플리케이션을 빌드할 때 대체됩니다. 예를 들어 프로덕션 환경에서 다른 API 엔드포인트 주소를 사용하거나 다른 통계 토큰 매개변수를 사용할 수 있습니다. 모의 서비스를 사용해 보세요. CLI는 이 모든 것을 고려합니다.

favicon.ico
모든 웹사이트는 북마크바에서 더 멋지게 보이길 바랍니다. 자신만의 아이콘으로 교체해주세요.

index.html
다른 사람들이 귀하의 웹사이트를 방문할 때 보게 되는 메인 페이지의 HTML 파일입니다. 대부분의 경우 편집할 필요가 없습니다. CLI는 앱을 빌드할 때 모든 js 및 css 파일을 자동으로 추가하므로 여기에 <script> 태그를 수동으로 추가할 필요가 없습니다. </script>

main.ts
이것은 애플리케이션의 주요 진입점입니다. JIT 컴파일러를 사용하여 이 애플리케이션을 컴파일하고 애플리케이션의 루트 모듈 AppModule을 시작하여 브라우저에서 실행합니다. 코드를 수정하지 않고도 AOT 컴파일러를 사용할 수도 있습니다. --aot 매개변수를 ng build 또는 ng Serve에 전달하기만 하면 됩니다.

polyfills.ts
브라우저마다 웹 표준 지원 수준이 다릅니다. Polyfill은 이러한 차이점을 표준화하는 데 도움이 될 수 있습니다. 일반적으로 core-js 및 zone.js를 사용하는 것만으로도 충분하지만 브라우저 지원 가이드에서 자세한 내용을 확인할 수도 있습니다.

styles.css
다음은 글로벌 스타일입니다. 대부분의 경우 유지 관리를 용이하게 하기 위해 구성 요소에서 로컬 스타일을 사용하려고 하지만 전체 애플리케이션에 영향을 미치는 스타일을 여기 중앙에 저장해야 합니다.

test.ts
이것은 단위 테스트의 주요 진입점입니다. 여기에는 익숙하지 않을 수 있는 일부 사용자 정의 구성이 있지만 여기서는 아무것도 편집할 필요가 없습니다.

tsconfig.{app|spec}.json
TypeScript 컴파일러용 구성 파일입니다. tsconfig.app.json은 Angular 애플리케이션용으로 준비되어 있고, tsconfig.spec.json은 단위 테스트용으로 준비되어 있습니다.

7.2 루트 디렉터리

src/ 폴더는 프로젝트의 루트 폴더 중 하나입니다. 다른 파일은 애플리케이션을 구축, 테스트, 유지 관리, 문서화 및 릴리스하는 데 사용됩니다. 이는 src/ 레벨의 루트 디렉토리에 배치됩니다.

e2e/
e2e/에서는 엔드 투 엔드 테스트입니다. 엔드투엔드 테스트는 실제로 애플리케이션과 독립적이기 때문에 src/ 아래에 있지 않습니다. 이는 애플리케이션 테스트에만 적합합니다. 이것이 바로 자체 tsconfig.json이 있는 이유입니다.

node_modules/
Node.js는 이 폴더를 생성하고 package.json에 나열된 모든 타사 모듈을 이 폴더에 배치합니다.

.angular-cli.json
Angular CLI 구성 파일. 이 파일에서는 일련의 기본값을 설정하고 프로젝트가 컴파일될 때 포함할 파일을 구성할 수 있습니다. 자세한 내용은 공식 문서를 참조하세요. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 개발 매뉴얼을 방문하세요.)

.editorconfig
는 프로젝트에 참여하는 모든 사람이 기본 편집 권한을 갖도록 하는 데 사용됩니다. 기능. 서버 구성. 대부분의 편집기는 .editorconfig 파일을 지원합니다. 자세한 내용은 http://php.cn/course/47.html을 참조하세요.

.gitignore
자동으로 생성된 특정 파일이 소스 코드 제어 시스템에 제출되지 않도록 하는 데 사용되는 Git 구성 파일입니다.

karma.conf.js
ng 테스트를 실행할 때 사용할 Karma의 단위 테스트를 구성합니다.

package.json
npm 구성 파일은 프로젝트에서 사용하는 타사 종속성 패키지를 나열합니다. 여기에 사용자 정의 스크립트를 추가할 수도 있습니다.

protractor.conf.js
ng e2e를 실행할 때 사용되는 Protractor용 엔드투엔드 테스트 구성 파일입니다.

README.md
CLI 명령 정보가 미리 작성된 프로젝트의 기본 문서입니다. 이 저장소를 보는 모든 사람이 그에 따라 앱을 빌드할 수 있도록 프로젝트 문서를 통해 이를 개선하는 것을 잊지 마세요.

tsconfig.json
TypeScript 컴파일러 구성을 사용하면 IDE가 이를 사용하여 더 나은 도움을 제공합니다.

tslint.json
ng lint 실행 시 사용되는 TSLint 및 Codelyzer 구성 정보입니다. Lint 기능은 통일된 코드 스타일을 유지하는 데 도움이 될 수 있습니다.

알겠습니다. 이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 Angular 5.0 개발 환경 설정 및 첫 번째 ng5 프로젝트 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!