본문 바로가기

Angular

Angular summary 📇 IndexIntroArchitectureAngular vs AngularJSComponentDirectiveServicePipeData shareData bindingGuard@NgModulesRouting🎬 IntroAngular는 2014년에 ng 컨퍼런스에서 처음 소개 되었으며 2016년 2.0버전이 정식 릴리즈 되었으며 지금 현재는 7.x.x버전 까지 릴리즈 되었습니다.Angular는 SPA(Single Page Application) 개발을 위한 Javascript based Open Source Front End Web Application입니다. Angular 는 수 많은 라이리브러리로 이루어져 있는데 코어 모듈과 옵션 모듈이 있습니다.코어 모듈은 Angular application의 주.. 더보기
Google Analytics in Angular 적용기 이 글은 프로젝트에 Google Analytics 적용에 대해 정리 하고자 합니다. 기존 웹사이트의 적용 방식과 Angular 프로젝트의 Google Analytics 적용 방식은 약간의 차이가 있다.어떠한 차이가 있는지 알아보기전에 우선적으로 알아야 할 개념이 있습니다.SPA (Single Page Application) 이미 다들 알고 계시겠지만 글 이해을 돕기 위해 다시 한번 개념을 정리 해보도록 하겠습니다. SPA(Single Page Application) 방식은 기본적으로 단일 페이지로 구성된다. 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 렌더링시 모두 불러옵니다. 따라서 초기 구동 속도가 매우 느리고 최초 렌더링이 완료 될 때까지 시간이 오래 걸립니다.전통 웹 링크 방식은 새로운 페이.. 더보기
알아 두면 유용한 Angular CLI 1탄! 오늘은 알아 두면 유용한 Anaular CLI에 대해서 정리 해보도록 하겠습니다.처음 Angular(version 2)로 프로젝트를 진행 할 때는 Angular CLI를 Angular 기본 구조와 문법을 익히는데 방해가 될 거 같은 느낌이 들어 일부러 잘 사용하지 않았습니다. 하지만 이번에 Angular CLI를 사용 해보면서 알아 두면 정말 Angualr로 개발을 진행 하는데 있어 정말 편하고 개발 시간을 조금이나마 단축 시킬 수 있을거 같아 정리 해봅니다. 우선 CLI를 사용 하기 위해서 Angular CLI를 install 해보도록 하겠습니다. * Angualr CLI 설치 $ npm install -g @angular/cli $ npm i -g @angular/cli 위에 보이는 둘 중 어느 명령.. 더보기
Angular 내장 파이프 Pipe의 역할Angular 파이프는 문자열을 입력으로 받아들여 읽기 쉬운 출력을 만들어 내는 기능 입니다. 즉, 입력 된 값에 대해 원하는 포맷으로 출력을 해주거나 필터 역할을 합니다. 파이프는 다음과 같은 형태로 정의 합니다. {{ 값 | 파이프 }} 예를 들어, 파이프를 이용해 UTC 시간인 14608040465805를 읽기 쉬운 형태로 변환해 보겠습니다. UTC 시간 정보는 날짜 파이프를 이용하면 읽기 쉬운 날짜 형태로 변환 할 수 있습니다. UTC 시간 정보에 date 파이프를 적용해보겠습니다. {{ 14608040465805 | date }} => Jul 9, 2016 UTC 시간 정보에 date Pipe를 추가했을 뿐인데 가독성 좋은 날짜 정보가 만들어졌습니다. Pipe의 장점가독성 향상: .. 더보기