Angular 는 angular-cli 를 통 해 웹 전단 프로젝트 를 만 드 는 방법

준비 전제:이미 angular-cli 환경 을 구축 하 였 으 며,아직 구축 되 지 않 은 것 은 참조 하 시기 바 랍 니 다https://www.jb51.net/article/114254.htm
1 새 폴 더
이 폴 더 는 angular-cli 를 이용 하여 만 든 모든 웹 전단 항목 을 저장 합 니 다.

2 명령 창 을 시작 하고 이 폴 더 에 들 어가 기

3 새 항목 만 들 기ng new 메모:항목 이름 은 모두 알파벳 을 사용 하 는 것 이 좋 습 니 다.
　

3.1 프로젝트 가 성공 적 으로 생 성 되 었 는 지 폴 더 로 이동


4 텍스트 편집기 로 src 폴 더 의 index.xml 파일 열기
3.sublime 을 적 게 사용 하여 열 면 다음 과 같 습 니 다.

4.1 코드 상세 설명

이것 이 html 파일 입 니 다.
Google 의 응용 프로그램 은 app-root 탭 에서 렌 더 링 을 합 니 다.app-root 요소 의 Loading...은 사이트 문자 입 니 다.사용자 에 게 응용 프로그램 이 불 러 오고 있 음 을 알려 주 고 텍스트 나 애니메이션 으로 대체 할 수 있 습 니 다.
5 응용 프로그램 실행
5.1 명령 창 을 열 고 프로젝트 루트 디 렉 터 리 에 들 어가 기

5.2 HTTP 서버 시작
angular-cli 는 내 장 된 HTTP 서버 가 있 습 니 다.이 를 통 해 애플 리 케 이 션 을 시작 할 수 있 습 니 다.시작 시간 은 약 30 초 정도 걸 립 니 다.ng server
메모:ctrl+c 를 이용 하여 서 비 스 를 닫 습 니 다.
5.3 브 라 우 저 를 통 해 응용 프로그램 에 접근
http://localhost:4200/

6 첫 번 째 구성 요소 만 들 기
6.1 구성 요 소 를 만 드 는 이유
브 라 우 저 는 브 라 우 저 개발 자 들 이 미리 정의 한 태그 만 식별 할 수 있 습 니 다.브 라 우 저 에서 새로운 탭 을 식별 하려 면 구성 요 소 를 만들어 서 이 작업 을 수행 해 야 합 니 다.
메모:구성 요소 화의 기본 사상 은 브 라 우 저 에 게 사용자 정의 기능 을 가 진 새로운 탭(구성 요 소 는 angularJS 의 명령 에 해당 함)을 인식 하도록 가 르 치 는 것 입 니 다.구성 요 소 를 만 들 면 HTML 문서 에서 사용 할 수 있 습 니 다.
6.2 구성 요 소 를 만 드 는 방법
angular-cli 의 generate 명령 을 이용 하여 구성 요 소 를 만 듭 니 다.ng generate component 예 를 들 어구성 요 소 를 만 드 는 명령 은?ng generate component hello-world
메모:구성 요 소 를 만 드 는 데 성공 한 후 프로젝트 파일 의 src>app 디 렉 터 리 에서 다음 에 구성 요소 이름 을 가 진 폴 더 를 추가 합 니 다.

7.구성 요소 생 성 완료 의 후속 절차
7.1 구성 요소 의 정의 보기:Component 주석,구성 요소 정의 클래스

메모:구성 요 소 는 TypeScript 언어 로 작 성 된 것 이기 때문에 접 두 사 는.ts 로 끝 납 니 다.브 라 우 저 는 TypeScript 파일 을 어떻게 해석 하 는 지 모 르 지만,ng server 라 는 명령 은 자동 으로 ts 파일 을 js 파일 로 변환 합 니 다.
7.2 구성 요소 정의 코드 상세 설명
7.2.1 도입 의존
격식.
모듈 이름 에서 import{구성 요소 1,구성 요소 2}

코드 설명:@angular/core 모듈 에서 Component 구성 요소 와 OnInit 구성 요 소 를 가 져 옵 니 다.
import 문 구 는 우리 가 코드 를 작성 할 때 어떤 모듈 에 사용 해 야 하 는 구성 요 소 를 정의 합 니 다.
7.2.2 Component 주해
주석 이란 무엇 입 니까?주 해 를 통 해 코드 에 기능 을 추가 합 니 다.
클래스 에@Component 주석 shi 를 사용 할 때 해당 클래스 를 Component 로 장식 합 니 다.
예컨대

코드 해석
Hello World Component 클래스 를 구성 요소 로 장식 하 였 습 니 다.
@Component 주해 내용 설명
selector 는 이 구성 요소 가 어떤 DOM 요 소 를 사용 하 는 지 지정 합 니 다.
예컨대

코드 해석
이 구성 요소 가 사용 하 는 DOM 요 소 는입 니 다.즉,HTML 에서탭 을 사용 하면 브 라 우 저 를 식별 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.