Angular 프로젝트 실행 방법 [단계별 설명]
게시 됨: 2020-09-21AngularJS는 모든 풀 스택 개발자에게 필수입니다. HTML 지시문 사용을 단순화하므로 프론트 엔드 개발에 중요합니다. Angular를 사용하면 웹 앱 개발이 훨씬 쉬워집니다. 따라서 이 기사에서는 Angular를 시작하는 방법에 대해 설명합니다. Angular를 설치하는 방법과 Angular 프로젝트를 실행하는 방법에 대해 설명합니다.
목차
Angular CLI: 간략한 소개
Angular 프로젝트에서 작업하려면 Angular CLI가 있어야 합니다. Angular 프로젝트 작업 및 초기화를 위한 Angular의 공식 도구입니다. Angular CLI는 초기화 프로세스에서 많은 번거로움을 줄여줍니다. Angular CLI를 사용하는 경우 프로젝트를 시작하기 위해 여러 구성 및 빌드 도구를 수행할 필요가 없습니다.
Angular CLI를 사용하면 단 하나의 명령으로 프로젝트를 시작할 수 있습니다. 다른 명령으로 로컬 개발 서버를 사용하여 프로젝트를 제공할 수 있습니다. Angular CLI는 Node.js에서 작동합니다. 따라서 시스템에서 Angular CLI를 실행하려면 먼저 시스템에 Node.js가 있어야 합니다.
Node.js는 서버 및 서버 측 애플리케이션 개발을 위한 반면 Angular는 프론트 엔드 솔루션입니다. Node.js는 Angular CLI에서만 도움이 됩니다.
Angular를 설치하는 방법?
첫 번째 단계
시스템에 Angular를 설치하기 전에 시스템에 Node와 npm이 있어야 합니다. Node Version Manager를 사용하여 설치하거나 OS의 공식 패키지 관리자를 사용할 수 있습니다. 웹 사이트에서 Node를 설치할 수도 있습니다. 빠르고 간단하므로 웹 사이트에서 설치하는 것이 좋습니다. node.js의 다운로드 페이지로 이동하기만 하면 됩니다 .
두번째 단계
node.js의 다운로드 페이지에서 운영 체제에 따라 필요한 버전을 선택한 다음 설치 마법사에 지정된 단계를 따릅니다. 이전에 시스템에 node.js를 이미 설치했다면 이 단계(및 이전 단계)를 건너뛸 수 있습니다.
세 번째 단계:
Node가 장치에 설치되어 있는지 확인하려면 명령 프롬프트를 열고 다음 명령을 실행합니다.
$ 노드 -v
시스템에 현재 설치된 Node 버전이 표시됩니다.
세 번째 단계
시스템에 Node가 설치되어 있는지 확인한 후 명령 프롬프트의 다음 명령을 실행하여 장치에 Angular를 설치할 수 있습니다.
$ npm install @angular/cli
위의 명령을 실행하면 Angular CLI가 장치에 설치됩니다. 'Angular 설치 방법' 부분을 완료했습니다.
배우기: 인도의 Angular 개발자 급여: 신입 및 경험자용
Angular 프로젝트를 실행하는 방법?
시스템에 Angular를 설치했으므로 이제 새 프로젝트를 시작하는 데 집중할 것입니다.
첫 번째 단계
다음 명령을 실행하여 작업 공간과 시작 앱을 만듭니다.
ng 새로운 앵귤러 투어 오브 히어로즈
작업 공간 이름으로 angular-tour-of-heroes를 추가했습니다. 'ng new' 명령은 스타터 앱에 추가하려는 기능에 대해 묻는 메시지를 표시합니다. 튜토리얼이므로 기본값을 선택하고 Return 또는 Enter를 눌러 진행합니다.
두번째 단계
이제 Angular CLI가 필요한 npm 패키지 및 종속성을 설치했습니다. 'Welcome app'과 새 작업 공간을 사용할 준비가 되었습니다. 앱과 이름이 같은 루트 폴더(angular-tour-of-heroes)와 스켈레톤 앱 프로젝트도 있습니다.
이 단계에서는 애플리케이션을 제공해야 합니다. 작업 공간 디렉토리로 이동하고 앱을 실행하여 이를 수행합니다.
cd 앵귤러 투어 오브 히어로즈
ng 서브 -오픈
'ng serve' 명령은 앱을 생성하고, 개발 서버를 시작하고, 프로젝트의 소스 파일을 관리하고, 필요한 파일을 수정할 때 앱을 다시 빌드합니다.
세 번째 단계
앱을 수정하려면 IDE 또는 편집기의 src/app 폴더로 이동해야 합니다. 이 프로젝트의 구성 요소를 변경하여 앱을 편집합니다. 구성 요소는 Angular 앱의 빌딩 블록입니다. 데이터 표시, 입력 응답 등과 같은 Angular 프로젝트의 거의 모든 기본 기능을 처리합니다.
이 단계에서 IDE를 열고 프로젝트 디렉토리로 이동하여 프로젝트의 구성 요소 파일을 찾습니다.
- app.component.ts
- app.component.html
- app.component.css
첫 번째 파일은 클래스 코드이며 TypeScript를 기반으로 하고 두 번째 파일은 HTML의 템플릿이며 마지막 파일은 개인 CSS 스타일을 사용합니다.
네 번째 단계
프로젝트가 설정되고 모든 파일이 준비되었습니다. 이 단계에서는 제목을 추가하여 개인화합니다. Angular 프로젝트 제목을 변경하려면 app.component.ts 파일로 이동하여 존재하는 기본 템플릿을 삭제합니다. Angular CLI는 템플릿 생성을 자동으로 생성합니다. 다음과 같이 바꿀 수 있습니다.
<h1>{{내 직함}}</h1>
중괄호는 보간 바인딩 구문입니다. '제목'을 원하는 제목으로 바꿀 수 있습니다. 원하는 제목을 입력하고 브라우저를 새로 고치면 응용 프로그램에 새 제목이 표시됩니다.
다섯 번째 단계
앱의 개인화는 스타일링 없이는 불완전할 것입니다. 따라서 이 단계에서는 Angular 앱의 스타일을 수정합니다. Angular CLI는 새 프로젝트를 생성할 때 애플리케이션에 대해 빈 styles.css를 생성합니다. 여기에 원하는 스타일을 입력할 수 있습니다.
IDE에서 src/styles.css 파일을 열고 애플리케이션의 스타일 수정을 시작합니다. 앱의 스타일을 수정하고 변경 사항을 저장합니다. 브라우저를 새로 고치면 앱에 변경 사항이 표시됩니다.
체크아웃: Angular JS에서 페이지 매김을 구현하는 방법은 무엇입니까?
Angular 및 전체 스택 개발에 대해 자세히 알아보기
이제 시스템에 Angular를 설치하는 방법과 Angular 프로젝트를 실행하는 방법을 알게 되었습니다. 일단 익숙해지면 Angular로 작업하는 것이 생각보다 훨씬 쉽다는 것을 알게 될 것입니다. 약간의 경험만 있으면 Angular로 프론트엔드 웹 개발 프로젝트 작업을 시작할 수 있습니다.
Angular 및 프론트엔드 웹 개발에 대해 자세히 알아보려면 다음과 같은 추가 리소스를 참조하세요.
- 프론트엔드 개발자 이력서 가이드
- 프론트엔드 개발자가 되기 위한 10가지 기술
- 프론트엔드 프로젝트 아이디어
반면에 풀스택 개발 과정을 수강하고 비디오, 프로젝트 및 퀴즈를 통해 업계 전문가로부터 배울 수 있습니다.
전체 스택 소프트웨어 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 PG 디플로마를 확인하십시오. 이 PG 디플로마는 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제를 제공합니다. , IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.