Angular
1.Setting up the local environment and workspace
아래 명령어로 Angular CLI 설치함.프로젝트 저장할 폴더가서 아래 명령어 실행함.하면 아래 처럼 나오는데 y해줌.Sass 선택했음.잘 설치됐으면 아래처럼 나옴.출처
2.Tutorial: Tour of Heroes -Create a Project
어플리케이션을 Angular workspace의 context에서 개발하게 됨. workspace는 하나 이상의 project의 파일들을 가지고 있음. project는 라이브러리나 어플리케이션을 구성하는 파일 세트임.workspace와 초기 어플리케이션 프로젝트를 만드
3.Tutorial: Tour of Heroes - The hero editor
앱이 이제 기본적인 title을 가지고 있으니 영웅들의 정보를 보여줄 컴포넌트를 만들고 그 컴포넌크를 둘 앱 쉘이 필요함.CLI를 사용해서 이름이heores인 컴포넌트를 생성해줌.CLI가 src/app/heroes/폴더를 생성하고 HeroesComponent 파일을 생
4.Tutorial: Tour of Heroes - Display a List
나중에는 서버에서 데이터를 받아와야 하지만 지금 당장은 서버에서 받아오는 것처럼하는 hero 데이터를 만들어야함.mock-heroes.ts를 src/app/에 만들어서 HEROES constant를 만들어줌.HeroesComponent 클래스 파일에서 mock HERO
5.Tutorial: Tour of Heroes - Create a Feature Component
지금은 HeroesComponent가 hero list랑 선택한 hero의 detail까지 모두 보여주고 있음.이렇게 기능들을 하나의 컴포넌트에 몰아두는 것은 앱이 커지면 커질수록 관리하기가 힘들어지기 때문에커다란 컴포넌트를 각각의 task나 workflow에 맞춰서
6.Angular flow
project/angular.json에 angular.json 파일이 있음. 이 파일은 앵귤러 프로젝트를 위한 여러 property랑 configuration이 있음. 맨 처음에 이 파일을 참조해서 builder가 어떤게 main file인지 확인하기 위해서 모든 pa
7.궁금한 점 1
(ngModel)이 양방향으로 데이터 binding하는거는 알겠는데 <input> element에 원래는 value="hero.name" 이렇게 해야지 되는거 아님? 어떻게 value를 안써도 값이 들어감?
8.Tutorial: Tour of Heroes - Add Services
컴포넌트는 데이터를 직접적으로 fetch하거나 save하지 않아서데이터를 present하는데에만 집중하고 데이터에 접근하는 거는서비스에 위임해줌.이번에는 HeroService를 만들어서 앱의 모든 클래스들이hero를 가져오는데 사용할 수 있도록 할 거임.서비스는 서로의
9.Tutorial: Tour of Heroes - Add Navigation
듀토리얼에서 만들고 있는 앱에 아래의 기능을 추가할 거임.대시보드 뷰대시보드 뷰랑 Heroes 사이를 navigate할 수있는 기능유저가 hero name을 어느 뷰에서든 클릭하면 selected hero에 대한detail이 있는 뷰로 이동하는 기능유저가 이메일의 d
10.Tutorial: Get Data from a server
이번 듀토리얼에서는 앵귤러의 HttpClient를 사용해서data persistence 기능을 아래처럼 추가할 것임.HeroService는 hero 데이터를 HTTP request로 가져옴유저가 HTTP를 통해서 hero를 추가, 수정, 삭제, 저장할 수 있음.유저가
11.궁금한 점 2
여기서 http://localhost:4200인 app.component.html에 {{title}}이 있는데 http://localhost:4200/heroes인 heroes.component.html에서도 title이 보임??router-outle
12.시행착오 1
npm으로 설치할때 사용할 곳에다가 설치해야함.typescript 같이 전역으로 쓰는거는 -g 붙여서 전역으로 설치해도 되는데 그런거 아니면 사용할 곳에다가 해야함.그냥 하다가 c/user/home 에다가 npm install angular-in-memory-web-a
13.Communicating with backend services using HTTP
AppModule에다가 HttpClient를 import 해서 HttpClient 서비스가 앱의 어느곳에서든 사용가능하게 해줌.임시로 test.service.ts라는 서비스 만들어줌.HttpClient는 observable을 transaction에 사용하기 때문에 ob
14.angular에서 $
$는 Observable인 변수에다가 convention으로 붙이는 것임. 안 붙여도 상관없음.
15.Query parameter 가져오기
ActivatedRoute클래스의 queryParams 혹은 queryParamMap 메서드 사용하면됨.따라서 아래처럼 가져올 수 있음. 이렇게 가져오면 깔끔하게 object로 가져옴.앵귤러는 같은 화면에서 url이 바뀌면 내용이 바뀌는 식이어서 현재 url에 맞춰서