Angular CLI 설치
Angular CLI 설치 , 이미 했으면 안해도 된다.
npm install -g @angular/cli
이미 설치 했는데 진행해 보았다.
먼가 추가되고 업데이트 되고 지워지면서 업데이트 되는것 처럼 보였다.
.......
+ @angular/cli@1.7.4
added 179 packages, removed 272 packages, updated 134 packages and moved 14 packages in 45.039s
새로운 앱 생성
CLI 명령을 통해 새로운 프로젝트를 angular-tour-of-heroes 라는 이름으로 생성한다.
ng new angular-tour-of-heroes
Angular CLI 기본적인 앱과 지원하는 파일들과 같이 새로운 프로젝트가 자동생성된다.
PS D:\workspace\dev\angular02> ng new angular-tour-of-heroes
create angular-tour-of-heroes/e2e/app.e2e-spec.ts (304 bytes)
create angular-tour-of-heroes/e2e/app.po.ts (208 bytes)
create angular-tour-of-heroes/e2e/tsconfig.e2e.json (235 bytes)
create angular-tour-of-heroes/karma.conf.js (923 bytes)
create angular-tour-of-heroes/package.json (1307 bytes)
create angular-tour-of-heroes/protractor.conf.js (722 bytes)
create angular-tour-of-heroes/README.md (1035 bytes)
create angular-tour-of-heroes/tsconfig.json (363 bytes)
create angular-tour-of-heroes/tslint.json (3012 bytes)
create angular-tour-of-heroes/.angular-cli.json (1257 bytes)
create angular-tour-of-heroes/.editorconfig (245 bytes)
create angular-tour-of-heroes/.gitignore (544 bytes)
create angular-tour-of-heroes/src/assets/.gitkeep (0 bytes)
create angular-tour-of-heroes/src/environments/environment.prod.ts (51 bytes)
create angular-tour-of-heroes/src/environments/environment.ts (387 bytes)
create angular-tour-of-heroes/src/favicon.ico (5430 bytes)
create angular-tour-of-heroes/src/index.html (306 bytes)
create angular-tour-of-heroes/src/main.ts (370 bytes)
create angular-tour-of-heroes/src/polyfills.ts (3114 bytes)
create angular-tour-of-heroes/src/styles.css (80 bytes)
create angular-tour-of-heroes/src/test.ts (642 bytes)
create angular-tour-of-heroes/src/tsconfig.app.json (211 bytes)
create angular-tour-of-heroes/src/tsconfig.spec.json (283 bytes)
create angular-tour-of-heroes/src/typings.d.ts (104 bytes)
create angular-tour-of-heroes/src/app/app.module.ts (316 bytes)
create angular-tour-of-heroes/src/app/app.component.html (1141 bytes)
create angular-tour-of-heroes/src/app/app.component.spec.ts (986 bytes)
create angular-tour-of-heroes/src/app/app.component.ts (207 bytes)
create angular-tour-of-heroes/src/app/app.component.css (0 bytes)
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated mailcomposer@4.0.1: This project is unmaintained
npm WARN deprecated socks@1.1.9: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN deprecated buildmail@4.0.1: This project is unmaintained
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
> uws@9.14.0 install D:\workspace\dev\angular02\angular-tour-of-heroes\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0
> node-sass@4.8.3 install D:\workspace\dev\angular02\angular-tour-of-heroes\node_modules\node-sass
> node scripts/install.js
Cached binary found at C:\Users\oldma\AppData\Roaming\npm-cache\node-sass\4.8.3\win32-x64-57_binding.node
> uglifyjs-webpack-plugin@0.4.6 postinstall D:\workspace\dev\angular02\angular-tour-of-heroes\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
> node-sass@4.8.3 postinstall D:\workspace\dev\angular02\angular-tour-of-heroes\node_modules\node-sass
> node scripts/build.js
Binary found at D:\workspace\dev\angular02\angular-tour-of-heroes\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1382 packages in 154.975s
Project 'angular-tour-of-heroes' successfully created.
맨아래 성공적으로 프로젝트가 만들어졌다고 한다.
기본파일처음에 생성하고 deprecated 에 대한 경고 나오는거 보니 라이브러리의 의존성 체크도 하나보다.
노드관련 모듈 머시기 설치하고 빌드하고 하는것 같고 ( 노드도 배우얄 탠데)
애플리케이션 서버
프로젝트 디렉토리로 이동하고 앱을 시작합니다.
cd angular-tour-of-heroes
ng serve --open
ng serve 명령어는 앱을 빌드, 개발서버에서 시작, 소스 파일을 봐주고, 파일을 수정해서 앱을 리빌드한다.
--open 플래그는 브라우저를 http://localhost:4200/로 열어준다.
브라우저에서 앱이 실행되는것이 보인다.
PS D:\workspace\dev\angular02\angular-tour-of-heroes> ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
10% building modules 7/11 modules 4 active ...our-of-heroes\node_modules\url\url.jswebpack: wait until bundle finished: / Date: 2018-04-06T00:33:28.449ZHash: 4802a752f2c2aa4cfe70
Time: 6533ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 18 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.42 MB [initial] [rendered]
webpack: Compiled successfully.
브라우저(IE) 띄어지고 자동으로 http://localhost:4200/ 경로가 열렸다.
브라우저는 윈도우 기본브라우저가 열리는듯 한다. 브라우저 선택도 어딘가에 설정이 있을듯 한데..
자동으로 열림 IE 에서 화면에 아무것도 보여지지 않고, 크롬에서 열어야 기본 앵귤러 화면이 보인다.
Angular components
페이지에서 애플리케이션 shell이 보인다. shell은 AppComponent라는 Angular component에 의해서 제어 된다.
콤포넌트는 앵귤러 애플러케이션의 기본 구성요소다. 화면에 데이터를 표시하고, 사용자의 입력을 감지하고, 그리고 입력에의 기본조치를 한다.
애플리케이션 제목 변경
즐겨쓰는 에디터나 IDE로 프로젝트를 열고 src/app 폴더를 찾는다.
3개의 파일로 배포된 shll AppComponent 의구현된 것을 확인 할수 있다.
- app.component.ts - component 클래스 코드, TypeScript로 작성된다.
- app.component.html - component template, html 로 작성된다.
- app.component.css - 콤퍼넌트 만의 CSS 스타일이다.
component class file(app.component.ts)을 열고 title 속성의 값을 'Tour of Heroes'로 변경 합니다.
title = 'Tour of Heroes';
component template file (app.component.html) 을 열고 Angular CLI로 기본 템플릿으로 만들어진 것을 삭제 합니다. 다음의 HTML 라인안에 것으로 교체 합니다.
<h1>{{title}}</h1>
이중 중괄호 {{ }} 는 엥귤라를 써넣는 바인딩 문법이다. title 의 속성 값이 html header 태그 내부에 써넣어진 바인딩 된다.
브라우저 재생되고 새로운 앱 제목이 보여진다.
(터미널에 보니 알아서 번들링 하면 브라우저가 알아서 변경된 내용으로 보여진다. 변경된 코드를 수동 재배포 하거나 브라우저에서 새로고침이 없어도 갱신된 소스로 반영이된다. )
애플리케이션 스타일 추가
대부분의 애플리케이션은 애플리케이션에서 일관된 모양을 유지 하려고 합니다.
CLI은 일관된 모양을 유지하기 위해 빈 styles.css를 자동생성 했다. 앱의 전체 스타일을 여기에 배치 해라.
/* Application-wide Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
Summary
Angular CLI을 사용해서 초기 앱 구조를 생성한다.
Angular components 데이터 표시하는것을 배웠다.
앱제목을 표시할때 이중 중괄호를 사용해서 써넣는다