코딩하는 이채야채

router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe((event: any) => { const url = event.url.startsWith('/ko') || event.url.startsWith('/en') ? event.url.substring(3) : event.url; if (url !== '/cart' && url !== '/order') { this.scrollGnb = false; window.addEventListener("scroll", this.scrollEvent) } else { this.scrollGnb = true; window.removeEventListener("scroll", thi..

한국에는 앵귤러 유저가 많이없어서 한글로 검색하면 원하는 답을 못찾는다 (┬┬﹏┬┬) id가 보이고 안보이고~ 조건이 붙을 시에 [ngClass] 가 아닌 id에는 어떻게 붙일까? [id]="(totalItems > 0 ? 'itemlist': null)" [] 대괄호와소괄호를 잘 활용하는거싱 중요하다! class시에는? [class.my_class] = "step === 'step1'" [ngClass]="{'my_class': step === 'step1'}"

앵귤러는 데이터바인딩을 제공하기에 여러가지 방식의 router link가 있다. routerLink="/index" 이렇게 [routerLink]가 아닌 routerLink = 이라고 사용할 경우에는 뒤에있는 문자열로 이동하게된다. 로컬에서 개발중이였다면 localhost:4200/index 로 이동 [routerLink]="['/', {outlets:{popup:['request-password-reset']}}]" 아래와 같이 데이터바인딩을 사용할 경우, '/' 뒤에 popup이고 : 쿼리뒤에 request-password-reset이 들어간다. Activatedrouters대신에 oulets을 통하여 쿼리문으로 연결한것.

컴포넌트 뷰(템플릿)와 뷰를 위한 모델에 관련된 코드 서비스 => 리액트에서의 상태라이브러리, 쉽게말하면 리액트에서 사용하는 리덕스 스토어같은 역할 컴포넌트 혹은 다른 서비스에서 사용하는 재사용 가능한 기능의 집합 컴포넌트에 주입하거나, 모듈에 주입해서 사용 'A컴포넌트에서 S서비스를 사용한다' 라는 말은 A에서 S의 인스턴스를 생상해서 사용(X) A에서 S를 주입해주면 앵귤러에서 알아서 객체를 만들어서 사용할 수 있도록 맡아서 처리. 1. 컴포넌트에 서비스를 주입 2. 모듈에 서비스를 주입 모듈에 있는 모든 컴포넌트에서 같은 서비스를 사용 =>'A컴포넌트에 S서비스를 주입한다.'라고 한다. //traditional 방식 class EngineService { public start(): void{ co..

라우터 문법 routerLink를 통하여 a링크 매칭, 현재경로일때 routerLinkActive사용하여 css꾸밀수있다. routerLinkActiveOptions 설정가능 {exact: true} -> 이게 왜필요하냐면 user/1 user/2 이렇게 뒤에 쿼리가 붙는다면 routerLInktActiveOption이 필요하다 params 설정 및 컴포넌트에서 사용하기 Routes에 :name과 같이 설정하기 사용하는 컴포넌트에서 ActivatedRoute주입하기 주입된 서비스 이용해서 :name 가져오기 동기 snapshot 비동기 rx 위와같이 설정해주면 developer/mark, developer/sophie를 하면 => 그냥 developer 컴포넌트가 보여지게된다. 받아서 보여주는 컴포넌트에..

https://lts0606.tistory.com/328 앵귤러 튜토리얼(Angular tutorial) - 1 : 소개 안녕하세요. 앵귤러에 대해서 알아보기위해 이곳을 찾아주신 분 들께 감사의 말씀 드립니다.^^ 천천히, 초심자도 조금 더 쉽게 접근할 수 있도록 내용을 구성하여 보겠습니다. 어 lts0606.tistory.com https://www.inflearn.com/course/angular-100min#curriculum Angular, 앵귤러 100분 핵심강의 - 인프런 | 강의 이 강좌는 Angular를 기반으로 간단하지만 유용한 petlist 프로젝트를 100분 핵심강의로 축약하여 짧은 시간에 실전에 활용할 수 있는 모바일 웹앱 개발역량을 키울 수 있습니다., - 강의 소개 | 인프 ww..

stopwatch 부분에 시계로이동 clock 의 스탑워치로 이동 결국에는 같은 기능을 수행하고있다. 이럴경우 서비스가 필요하다. 서비스란? 비슷한 기능(관심사)를 묶어 코드의 중복제거 => 재사용가능한 뭉치로 만들 수 있다. 컴포넌트간의 데이터 중개 역할 서비스! ng g s share/page-toggle 이란 명령어로 share라는 디렉토리아래에 page-toggle을 만들 수 있다. 생성된 파일을 살펴보면 import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class PageToggleService { constructor() { } } Injectable이란 데코레이터가 붙으면 앵귤러에서 서비..

라우터는 앵귤러의 핵심 라이브러리의 하나이기에 앵귤러의 라우터에서 불러오고있다. import { RouterModule, Routes } from '@angular/router'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } forRoot같은 경우는 라우터모듈이 루트모듈에 등록이 된다. 정도로 이해하면된다. forChild, f..