Interests [관심사]/Angular 썸네일형 리스트형 [Angular Tutorial 05] Services [Angular Tutorial 05] Services https://angular.io/tutorial/toh-pt4 Service는 여러 component에서 필요로 하는 기능을 묶은 class입니다. 즉 Angular 사이트에서 사용되는 특정한 기능들을 service로 생성한 후 해당 기능이 요구되는 component는 이 service를 불러와서 사용할 수 있습니다. 코드가 중복되는 것을 막고, 코드의 관리의 편의성을 위해, 프로그램의 효율성 향상를 위해 사용됩니다.출처 : https://www.a-mean-blog.com/ko/blog/Angular-2/Tour-of-Heroes/Services-Injectable-OnInit-ngOnInit 다음 명령어를 통해서 hero service 를 생성.. [Angular Tutorial 04] Master/Detail Components [Angular Tutorial 04] Master/Detail Components https://angular.io/tutorial/toh-pt3 현재 HeroesComponent 는 list 부분과 detail 부분을 함께 출럭 하고있습니다. list 와 detail 은 분명히 다른 역할을 하는 부분이기 때문에 우리는 detail component 를 생성하여 view 를 분할하도록 할 예정입니다.다음 명령어를 통하여 hero-detail component 를 생성 합니다. ng generate component hero-detail CLI 를 통해 component 를 생성하면 4 개의 파일이 기본적으로 생성 됩니다. A CSS file for the component styles.An HTML f.. [Angular Tutorial 03] Display a Heroes List [Angular Tutorial 03] Display a Heroes List https://angular.io/tutorial/toh-pt2 In this page, you'll expand the Tour of Heroes app to display a list of heroes, and allow users to select a hero and display the hero's details.이 페이지에서 영웅 목록을 출력하고 사용자가 선택한 영웅의 상세 정보를 출력해 보도록 하겠습니다. src/app/ 하위에 mock-heroes.ts 파일을 생성 하고 다음과 같이 작성 합니다. import { Hero } from './hero'; export const HEROES: Hero[] = [ { i.. [Angular Tutorial 02] The Hero Editor [Angular Tutorial 02] The Hero Editorhttps://angular.io/tutorial/toh-pt1 다음 명령어를 통하여 generate 타입의 heroes 라는 이름의 component 를 생성 합니다. ng generate component heroes herose component가 생성 되었습니다.컴포넌트 하위에는 css, html, ts, spec.ts 파일이 포함되어 있습니다. app/heroes/heroes.component.ts (initial version) 파일의 구조를 살펴 봅시다. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-heroes', templateU.. [Angular Tutorial 01] The Application Shell [Angular Tutorial 01] The Application Shell https://angular.io/tutorial/toh-pt0 Angular 설치와 CLI 설치는 이전 개발환경 세팅을 참고 해 주세요! 2018/09/11 - Step 1 Angular, Development Environment Setting ng new angular-tour-of-heroes 위의 명령어를 통해 angular-tour-of-heroes 프로젝트를 생성 해 주세요. C:\angular workspace\angular-tour-of-heroes>ng serve --o 해당 디렉토리로 이동 하여 ng serve --o 옵션으로 프로젝트가 잘 열리는지 확인 합니다.--o 옵션은 --open 의 약자로 서버를 .. Step 7 Angular, Material table을 이용하여 paging 페이징 생성 부트스트랩 ui 를 사용해서 데이터를 페이징 하고 싶었으나.. 지식의 한계에 부딪혀 결국 Material table 을 사용 !(물론 참고...ㅎㅎㅎ) 바인딩 되는 테이블의 colums 이름을 잘못 입력 해서 데이터가 출력되지 않아서 2일을 잡아먹었다 ㅠㅠ displayedColumns = ['cname', 'ccode']; 우선 결과물부터 ... 별것도 아닌데 왜 이 고생을 했을까 ㅠㅠ 설명과 방법은 추후 업데이트 하겠습니다 ~~ 참고 사이트 : https://moon9342.github.io/angular-lecture-material-table Step 6 Angular, JSON 데이터 HTTP 형식으로 받아오기 json 형태의 데이터를 목록화 시켜서 출력 하도록 하겠습니다. list-view.component.html {{color.name}} / {{color.code}} json 형식의 데이터파일을 만듭니다.assets/data/color.json [ { "name" : "color01", "code" : "a18ce9" }, { "name" : "color02", "code" : "cf8ce9" }, { "name" : "color03", "code" : "e88dd3" }, { "name" : "color04", "code" : "e88ca5" } ] list-view.component.tsHttpClientModule 을 import 해줍니다.ngModule 에 import 하는것도 잊지 마세요 ! i.. Step 5 Angular, View 안의 View 생성하기 안녕하세요 ~ 오늘은 Angular 프로젝트에서 Component 안의 Component, View 안에 View 를 생성 해 보도록 하겠습니다 ! 아주아주 간단해요 ~~ 저희는 pageSearch View 하위에 detail-view 와 list-view 를 생성 해 보도록 하겠습니다 ! CLI 를 이용하여 다음 명령어를 실행 해 주세요 ~~매번 느끼는 것이지만 CLI 는 정말 편리한 것 같습니다 ^^ ng generate component pageSearch/detail_view ng generate component pageSearch/list_view 이렇게 pageSearch 하위에 두개의 컴포넌트들이 생성 되었습니다. 그리고 하위 view 를 넣을 page-search-main.componen.. 이전 1 2 다음
