2018년 4월 7일 나무 모습이다.
식재한지 거의 한달 다되어 가는 놈들이다.
호두나무 2식을 심었다 어린나뭇데도 가격이 꾀나 비싼 편이다. 2식 모두 싹이 틔었다.
밭 한구석에 먹구슬나무에 싹과 비교해보니 나무잎과 순 모양이 비슷하다.
애기사과 나무 2식이다. 지역행사때 무료료 받아온 나무다. 2그루 모두 잘 싹이 틔웠다. 좀 있으면 완연한 나뭇잎 모습이 보일것 같습니다.
무화과 나무 2그루다. 하나는 순이 안올라 왔다. 사진에 보는것은 순이 올라왔다.
석류나무다. 새순이 가장 늦게 나와 모두 죽은줄 알았다. 2식 모두 붉은색 싹이 나왔다.
거봉 포도 다. 2식을 심었는데 하나는 보이는건 싹이 틔였지만 다른 하나는 아직 싹이 틔이지 않아다.
사용자는 <input> 텍스트박스 안에 영웅 이름을 수정할 수 있어야 한다.
텍스트박스 영우의 이름이 표시되고 사용자 타입 속성을 업데이트 한다.
즉 데이터의 흐름은 컴포넌트 클래스에서 화면으로 표시되고 화면에서 클래스로 흐름이다.
데이터의 흐름을 자동화 하는것은, 요소의 <input>과 hero.name 속성을 양방향 데이터 바인딩으로 설정 한다.
HeroesComponent 템플릿에 상세소스
src/app/heroes/heroes.component.html (HeroesComponent's template)
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
[(ngModel)]은 앵귤러의 양방향 데이터 바인딩 문법이다.
여기 hero.name 속성은 HTML 텍스트박스에 바인딩 되고 데이터는 양방향으로 흐를수 있다. hero.name 속성 에서 텍스트박스로, 그리고 텍스트 박스는 hero.name 으로 돌아간다.
(ngModel) 을 추가 하면 앱이 동작하지 않는다.
에러를 보면, 브라우저의 개발툴과 다음과 같은 메세를 콘솔에서 확인한다.
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
크롬 에서 확인
Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("<div>
<label>name:
<input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
</label>
</div>"): ng:///AppModule/HeroesComponent.html@2:13
at syntaxError (compiler.js:485)
at TemplateParser.parse (compiler.js:24668)
at JitCompiler._parseTemplate (compiler.js:34621)
at JitCompiler._compileTemplate (compiler.js:34596)
at eval (compiler.js:34497)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:34497)
at eval (compiler.js:34367)
at Object.then (compiler.js:474)
at JitCompiler._compileModuleAndComponents (compiler.js:34366)
ngModel은 유효한 앵귤러 명령 이긴하지만, 기본적으로 사용할수 없다.
선택적 FormsModule 이어서, 사용 할려면 옵션을 넣어야 한다.
앵귤라는 반드시 애플리케이션 조각들이 어떻게 서로 잘 맞는지, 무슨 다른 파일들과 앱에서 필요로 하는 라이브러리들을 알아야 합니다. 이 정보를 메타데이터라고 불린다.
메타데이터 중의 일부는 컴포넌트 클래스들을 추가할 @Component 데코레이터이다. 메타데이터의 대단의 중요한 것은 @NgModule 데코레이터에 있다.
제일 중요한 @NgModule 데코레이터 애노테이트는 최상위 AppModule 클래스이다.
프로젝트가 생성될때 AppModule 클래스가 src/app/app.module.ts 코드에 Angular CLI이 자동생성된다.
이것은 FormsModule 에서 옵션을 넣을때.
AppModule(app.module.ts) 열고 @angular/forms 라이브러리에서 FormsModule 심볼을 가져옵니다.
app.module.ts (FormsModule 추가)
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
FormsModule을 추가 할때 @NgModule 메터데이터의 배열을 추가한다. 이 배열에 포함된것은 앱에 필요한것을 확장 모듈 목록 이다.
app.module.ts ( @NgModule imports)
imports: [
BrowserModule,
FormsModule
],
브라우저가 재생될때, 앱이 다시 작동 한다. 영웅의 이름을 수정할수 있고, textbox 위에 <h2> 변화되는 즉각 반응하는 모습을 볼수 있다.
모든 컴포넌트는 정확히 하나의 NgModule로 선언되어야 한다.
HeroesComponent를 선언하지 않았습니다. 그렇다면 애플리캐이션이 왜 작동 할까요?
그게 작동한 이유는 Angular CLI이 AppModule에서 HeroesComponent 콤포넌트가 자동생성될때 이를 선언했기 때문이다.
src/app/app.module.ts 파일을 열어서 HeroesComponent 찾아 위부근에 추가한다.
import { HeroesComponent } from './heroes/heroes.component';
The HeroesComponent is declared in the @NgModule.declarations array.
declarations: [
AppComponent,
HeroesComponent
],
애플리케이션 콤포넌트, AppComponent 와 HeroesComponent AppModule 선언한다.
src/app/heroes/heroes.component.ts
src/app/heroes/heroes.component.html
src/app/app.module.ts
src/app/app.component.ts
src/app/app.component.html
src/app/hero.ts
content_copy
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm'
};
constructor() { }
ngOnInit() {
}
}
CLI로 사용하여 두번재 HeroesComponent 생성했다.
HeroesComponent에 AppComponent로 추가하여 표시했다.
UppercasePipe 적용하여 이름 서식을 지정 했다.
양방향 데이터 바인딩은 ngModel 디렉티브를 이용했다.
AppModule에 대해서 배웠다.
AppModule에서 FormsModule을 추가 하면 앵귤라는 그것을 알아채고 ngModel 디렉티브를 지원한다.
AppModule에서 컴포넌트선언의 중요성을 배웠고 당신을 위한 CLI 선언 진가를 알아봤다.
애플리케이션은 이제 기본 제목이 있다. 다음으로 영웅정보 표현과 애플리케이션 쉘의 콤포넌트의 배치 할 새로운 콤포넌트를 만든다.
앵귤라 CLI를 이용해서 heroes라는 이름으로 새로운 콤포넌트를 자동생성한다.
ng generate component heroes
ng : 'ng' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
위치 줄:1 문자:1
+ ng generate component heroes
+ ~~~
+ CategoryInfo : ObjectNotFound: (ng:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
angular/cli 이 설치가 안되었나 해서 angular/cli 설치후 다시실 행 똑 같은 오류 ..
이상하다 싶었다.
ls 명령어 후 다시 컴포넌트 재너레이터 명령 실행하니 5초 정도 걸린후 제너레이터 된 파일이 만들어졌다.
PS D:\workspace\dev\angular02\angular-tour-of-heroes> ng generate component heroes
create src/app/heroes/heroes.component.html (25 bytes)
create src/app/heroes/heroes.component.spec.ts (628 bytes)
create src/app/heroes/heroes.component.ts (269 bytes)
create src/app/heroes/heroes.component.css (0 bytes)
update src/app/app.module.ts (398 bytes)
html과 테스트, ts파일, css 파일이 제너레이터 되어 생성되고, 모듈 파일이 업데이트 되었다.
CLI은 src/app/heroes/ 폴더를 만들고 HeroesComponent의 3개 파일이 자동생성된다.
HeroesComponent 클래스 파일은 다음과 같다.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
앵귤러 코어 라이브러리를 항상 import 해야된다네요. 그리고 @Component 애노테이션을 함깨 사용한다고 합니다.
@Component는 콤포넌트를 위한 Angular 메터데이터를 명시하는 decorator 이다.
CLI은 3개 메테데이터 속성을 자동생성한다.
CSS 요소 선택자, 'app-heroes', 이컴포넌트가 부모 컴포넌트의 템플릿에서 확인 html 요소의 이름이 같은것을 매치한다.
컴포넌트 생성 후 바로 싱행된는 ngOnInit는 초기화 로직을 넣기에 좋은 곳이다.
AppModule 안에 처럼 다른곳에서 가져올수 있도록 항상 컴포넌트 클래스를 내보낸다.
영웅이름을 "Windstorm" 으로 HeroesComponent 에 영웅 속성을 추가한다.
heroes.component.ts (hero property)
hero = 'Windstorm';
heroes.component.html 템플릿 파일을 연다. Angular CLI 가 자동으로 만든 기본 글을 삭제하고 새로운 영웅 속성 데이터 바인을 변경한다.
heroes.component.html
{{hero}}
HeroesComponent를 보여주는것은 shell AppComponent의 템플릿을 추가 해야한다.
app-heroes는 HeroesComponent의 요소 선택자를 기억해라. AppComponent 템플릿 파일에 <app-heroes> 요소를 정확히 title 아래 추가한다,
src/app/app.component.html
<h1>{{title}}</h1>
<app-heroes></app-heroes>
ng serve 명령을 이용해서 title 과 영웅 이름을 표시를 확인한다.
src/app 폴더 안에 자신의 파일을 id와 name 속성을 줘서 영웅 클래스를 생성한다. .
src/app/hero.ts
export class Hero {
id: number;
name: string;
}
HeroesComponent 클래스로 돌아와서 Hero 클래스를 가져온다.
컴포넌트의 영웅 프로퍼티 는 Hero 타입으로 리팩터한다. 초기화설정은 1의 id 와 Windstorm 이름으로한다.
수정된 HeroesComponent클래스 파일은 다음 과 같다.
src/app/heroes/heroes.component.ts
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm'
};
constructor() { }
ngOnInit() {
}
}
이페이지는 더이상 적절히 표시되지 않는다. 왜냐면 문자열에서 객체로 변경된 영웅 폼 때문이다.
[object Object] 로 표시된다.
템플릿 안에서 상세 레이아웃 안에서 영웅의 이름과 id 그리고 이름을 보여주는것을 알려주는 바인딩 업데이트 한다.
heroes.component.html (HeroesComponent's template)
<h2>{{ hero.name }} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
브라우저 리프래쉬되고 영웅의 정보를 보여준다.
이처럼 hero.name 바인딩을 수정한다.
<h2>{{ hero.name | uppercase }} Details</h2>
브라우저 리플래시되고 지금 바로 영웅의 이름은 대문자로 표시된다.
대문자를 바인딩을 써넣을때 , 파이프 연산자 | 바로뒤, 내장 UppercasePipe를 동작시킨다
파이프는 문자열 포메팅, 통화 가격, 날짜 와 다른 날짜 표시에 함에 좋은 방법이다.
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 에서 화면에 아무것도 보여지지 않고, 크롬에서 열어야 기본 앵귤러 화면이 보인다.
페이지에서 애플리케이션 shell이 보인다. shell은 AppComponent라는 Angular component에 의해서 제어 된다.
콤포넌트는 앵귤러 애플러케이션의 기본 구성요소다. 화면에 데이터를 표시하고, 사용자의 입력을 감지하고, 그리고 입력에의 기본조치를 한다.
즐겨쓰는 에디터나 IDE로 프로젝트를 열고 src/app 폴더를 찾는다.
3개의 파일로 배포된 shll AppComponent 의구현된 것을 확인 할수 있다.
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;
}
Angular CLI을 사용해서 초기 앱 구조를 생성한다.
Angular components 데이터 표시하는것을 배웠다.
앱제목을 표시할때 이중 중괄호를 사용해서 써넣는다
앵귤라 공식사이트에 있는 튜토리얼에 있는 내용을 직접 단계별로 해볼 계획이다.
앵귤라 공식사이트에 튜토리얼 -> https://angular.io/tutorial
튜토리얼은 총 8부분으로 나뉘어져 있다.
1섹션은 소개, 2섹션은 애플리케이션 쉘, 3섹션은 영웅 수정, 4섹션은 목록 표시
5섹션은 주/상세 컴포넌트 6섹션은 서비스 7은 라우팅 8은 HTTP관련된 정보로 구분되어졌다.
첫번째 섹션은 만들 애플리케이션의 소개 내용이 담겨져 있다.
부족한 영어실력과 구글 번역기 돌리며 번역한 내용을 정리 해봤다.
튜토리얼은 Tour of Heroes 라는 제목으로 갖고 진행 한다.
이 튜토리얼은 앵귤라의 기본사항을 포함 하고 있다.
직원 채용 대행사 관리하는데 도움이 되는 앱을 튜토리얼 안에서 빌드 할수 있다.
이 기본 앱은 데이터 기반 애플리케이션에서 찾길 기대하는 많은 기능이 있다.
영웅 목록을 만들고 표시하고, 선택된 영웅의 세부사항을 수정하고 다르게 보이는 영웅적인 데이터를 다룹니다.
https://stackblitz.com/angular/ybbpegbnnlq
무엇을 만들지.
대시보드 라는 것으로 시작하고 더 영웅적인 영웅들을 볼수 있고
대시보드 에 두개 링크 ("Dashboard" and "Heroes" 로 구성 하여 화면이동
영웅을 클릭 하면 라우터는 "Hero Details" 을 열어 보여준후 그곳에서 영웅의 이름을 바꿀수 있다.
"Back"버튼을 클릭하는것은 대시보드로 돌아간다.상단위 링크들은 가진다. 메인뷰 중의 하나를. "Heroes"를 클릭하면 그 앱은 "Herose" 주목록이 표시된다
다른 영웅 이름을 클릭했을때, 읽기전용 작은 상세 아래에 그새로 선택된 것이 목록에 비친다.
상세보기 화면에서 선택된 영웅을 수정가능한 상세로 로 주입 한다네요;
만들려고 하는 애플리케이션의 설명을 이미지와 함께 설명하고 있다.
목록, 상세정보, 수정 등을 만든다는 내용인걸로 보인다.
작년에 한곳에 모아 두었던 풀과 나무 정리 마지막 2군데 있는곳 깨끗히 소각 처리 작업 함.
씨앗 파종 배추, 무, 적상추, 외 2종더(기억이 안남) , 쇠스랑으로 땅 일구고, 씨뿌리고, 복합비료, 내나무로 뼈대만들어서 하얀색 멀칭 비닐로 덮어놓음.
지난주에 파종한 곳과 과실나무묘목 심은곳에 복합비료 한줌씨 투척 해주었다.
바로 앞에 한줄에 비닐한건 지난주에 작업한것이고, 끝에 두줄이 오늘 한것이다.
Angular 퀵스타트
테스트 환경 Window 10
Visual Studio Code 1.18.1
node -v v8.9.3
npm -v 5.5.1
https://angular.io/guide/quickstart
Angular CLI 라는 명령라인 인터페이스를 통해 프로젝트로 생성하고 , 번드링, 배포, 파일추가 , 테스트 등을 수행할수 있는 도구랍니다.
1단계 : Angular CLI 설치
npm install -g @angular/cli
Angular CLI 설치한번만 하면 나중에 안해도 된다.
2단계 : 프로젝트 생성
ng new my-app
관련 페키지를 같이 설치하는데, 필요한건 인내심이라네요.
관려페이키를 아래와 같이 메세지가 나온다.
139초니 2분 넘게 걸렸다.다.
added 1415 packages in 139.721s
Installed packages for tooling via npm.Successfully initialized git.Project 'inspinia' successfully created.
inspinia로 프로젝트를 생성했다.
3단계 : 서버 게재
cd my-app
ng serve --open
프로젝트 디렉토리로 이동하고 서버에 런처한다.
서버가 파일이 변경되면 지켜보고 있다가 알아서 리빌드 해준다네요.
옵션으로 --open 혹은 ( -o ) 로 하면 자동으로 http://localhost:4200/ 로 브로우저가 열립니다.
4단계 : 수정해보자
src/app/app.component.ts 파일을 찾아서
title변수를 수정해보자.
바로 변하는 값을 브라우저에서 확인할 수 있다.
