Web/Angular (4) 썸네일형 리스트형 Angular CLI에서 Bootstrap3 사용하기 http://codingthesmartway.com/using-bootstrap-with-angular/ Angular CLI 소개 Angular CLI (Command Line Interface) ?- 개발자가 Angular 개발에만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행할 수 있게 지원 제공하는 기능- Angular 프로젝트 생성- Angular의 중요 구성요소 추가(컴포넌트, 지시자, 파이프, 서비스)- 코드 변경 시 빌드를 수행하고 애플리케이션을 재시작- 브라우저 동기화- 단위 테스트, 종단 테스트와 같은 테스트 환경 제공- 프로젝트 배포를 위한 패키징 공식 홈페이지 : https://cli.angular.io깃허브 프로젝트 : https://github.com/angular/angular-cli 개발 준비 1. Node.js 설치 (https://nodejs.org/ko)- npm 업데이트 $ npm install -g npm@latest 2. NPM을 이용한 개발서버 실행- package.json 파일 생성 $ npm init 3. 타입스크립트 설치 $ npm install -g typescript $ tsc -v 4. Angular 프로젝트 구성- Angular CLI 설치 $ npm install -g @angular/cli - Angular CLI 프로젝트 만들기 $ ng new my-app $ cd my-app - 개발 서버 실행 $ ng serve --open - 접속http://localhost:4200/ 5. ng 명령어 활용- 포트 변경 $ ng serve --port 4202 - 빌드/s.. Angular2의 특징 1. 컴포넌트 기반 개발- AngularJS에서는 컨트롤러가 개발의 중심이었다면 Angular2에서는 컴포넌트가 개발의 중심- Angular2의 컴포넌트는 컨트롤러의 기능을 완전히 대체하며 구조적으로 컨트롤러보다 견고함 2. 타입스크립트를 주력 언어로 채택- 타입스크립트는 마이크로소프트에서 만든 자바스크립트의 상위 집합 언어- 때문에 자바스크립트 문법을 그대로 이용할 수 있고 최신 ECMA 스크립트 표준인 ES6, ES7의 특징까지도 지원 3. 고성능 프레임워크- Angular2는 모바일 환경을 목표로 만들어진 고성능 프레임워크- Angular2는 AngularJS보다 적은 용량으로 더욱 빠르게 프레임워크를 로딩- Angular2의 성능을 향상시킬 수 있었던 기능 중 하나가 지연 로딩(Lazy Loadi.. 이전 1 다음