Angular.js (29) 썸네일형 리스트형 Angular.js Attribute Directives Directive에는 3가지 종류가 있다 ● Component Directive ● Structural Directive √ Attribute Directive Component Directive 는 우리가 흔히 아는 component 이고, Structural Directive 는 ngIf ngFor 등이 있다. 이들은 조건 등에 따라 view 의 구조를 바꾸게 된다. Attribute Directive 는 흔히 element의 속성을 바꿔준다. 예를들자면 NgStyle라는 디렉티브를 이용한다면 여러개의 스타일요소를 한번에 탑재시킬 수 있다. ============================================================================ > 이번 게시글에서는 A.. Input 태그 관련한 기술 I. (활동) 으로 event 발생시 DOM 객체 조작 1)에를들어 인풋 객체에 (keyUp) 활동으로 이벤트를 발생 시켜보겠다. -----.HTML파일------ {{printtt}} 이렇게 keyup 활동이 발생할 경우 이벤트 객체를 받는 KeyUpFunc 을 작동하도록 했다. 그리고 printtt에 바인딩을 걸어 관련 문구를 출력하게 해주었다. 2) 이제 ts파일에서 KeyUpFunc()을 정의해보자. -----.ts파일------ export class KeyUpComponent { printtt= ' '; KeyUpFunc ( event : any ) { event.target //이렇게 하면 DOM객체로 이벤트 발생한 타겟을 가리키게 된다. printtt + = event.target.valu.. 컴포넌트 간 통신 aaa에서 template를 그릴때 input이 필요하다. @input 으로 필요한 데이터들을 정의하고 bbb에서는 필요한 값들을 형식으로 보내줄수있다. aaa.component.ts ============================================================ @Component({ selector : 'aaa-component' template:` {{data1}} + {{hero}} ` }) export class CompAAA{ @Input data1:string; @Input('data2') hero : Hero } ============================================================ bbb.component.ts ======.. Angular Routing 1. 라우팅을 담당 할 모듈을 생성한다. ng generate module app-routing --flat --module=app // -flat : src 하에 추가디렉토리 없이 바로 생성하도록 2. 해당 모듈이 Routing 기능을 담당할 수 있도록 , RouterModule 과 Routes 를 import 해준다. 2-1) ComonModule 과 declarations 은 필요 없으므로 삭제한다. ㄴroot모듈 이외는 작성 ㄴ 필요한 컴포넌트,파이프등 탑재 2-2) RouterModule은 브라우져 주소가 바뀌는 것을 지켜보게 한다. 2-3) 설정된 라우트를 app전반에서 사용할 수 있도록 export해준다. import { NgModule } from `@angular/core`; import.. Angular Service [2] // 커스텀서비스생성 @Injectable 1.Service를 만듭니다. ng generate service hero 2.서비스에 - injector로 다른 서비스나 컴포넌트에 inject했을때 인식 할 수 있도록 설정해놓는다. - 필요한 서비스 함수 생성 ----- hero.service.ts -------------- import { HEROES } from './mockHeroes' //어디서나 해당 서비스를 필요로 하면 inject시킬수 있다. @Injector{ providedIn: 'root', } // Hero배열을 리턴해줌 getHeroes() : Hero[] { return HEROES; } 2. hero.Component.ts 에서 히어로 리스트를 service의 getHeroes를 통해를 통해 받을것이다. - service i.. Angular Service [1] Angular는 대표적으로 $log 와 $http 서비스를 제공한다. 1. $log ㄴ 객체를 콘솔에 표기할떄 2. $http ㄴ AJAX통신을 할때 사용 ㄴ then을 이용해서 응답을 처리한다. ㄴ 두번째 then 을 이용해서 에러를 처리한다. $scope.employees = $http.get('EmployeeService.asmx/GetAllEmployee') .then(function (response) { $scope.employees = response.data; }, function (reason) { $scope.error = reason.data; $log.info(reason); }); /// tip! /// $scope 는 Javascript Object 이며 view 와 contro.. 컴포넌트 분리 ( 컴포넌트간 통신 @input ) 프로젝트가 커질 수록 컴포넌트는 여러개로 쪼개서 유지보수가 쉽도록 해야한다. 직전까지 만들었던 프로젝트에서는 - 영웅들의 리스트 - 선택된 영웅의 디테일 정보 둘다 얻어낼수 있었다. 이제 디테일정보를 보여주는 컴포넌트는 따로 분리해보도록 하겠다. 1. 새로운 컴포넌트 생성 ng generae component hero-detail 2. 기존의 컴포넌트에서 일부를 떼서 붙여넣기 >hero.component.html에 있던 를 잘라내기하여 >hero-detail.component.html 에 붙여넣는다. 우리는 이 디테일 컴포넌트를 어디에서든 사용할 수 있어야 하므로 *ngIf="hero"로 바꾸어 준다. (나중에 input으로 받을것) ----------hero-deatail.component.html--.. *ngFor , *ngIf , (click)="func(Hero)" 아래와 같이 html에서 사용할 selectedHero변수, 오클릭메소드 등을 ts파일에 설정해준다. ---------app.component.ts----------- export class HeroesComponent implements OnInit { hero = { id: 1, name: 'kimtae', }; heroes = HEROES; selectedHero: Hero; onSelect(hero) { this.selectedHero = hero; } constructor() {} ngOnInit(): void {} } html을 아래와 같이 작성한다. --------heores.component.html---------------- //ngFor {{ hero.id }} {{ hero.name.. 이전 1 2 3 4 다음
