TypeScript36 Angular - material 사용법 안녕하세요! 오늘은 Angular의 material 사용법에 대해 알아보겠습니다. material은 부트스트랩과 비슷하다고 볼 수있는데요. 부트스트랩과 사용 방법은 상당히 많이 다르지만, angular를 사용해 보신 분이라면 충분히 쉽게 사용 할 수 있습니다. https://material.angular.io/ 사용법은 기본적으로 공식 사이트에서 많은 예제와 사용법을 설명해 주고 있습니다. 오늘은 이 예제들을 바탕으로 사용법에 대해 알아보도록 하겠습니다! 1. 프로젝트 생성 다들 아시겠지만, 프로젝트를 먼저 생성해줍니다. ng new material-Tutorial ng new 프로젝트명 2. material 설치 생성한 프로젝트 경로로 이동 후 cli를 입력합니다. ng add @angular/mate.. 2020. 6. 20. angular - tree(2) 이동 및 이벤트 감지 안녕하세요. 저번시간에 angular-tree-component를 이용해서 트리구조를 표현하는 것을 알아봤는데요. 이번시간에는 Drog&Drop 기능을 넣어서 트리구조 변경을하고, 그 변경을 감지하여 값을 가져오는 것을 해보겠습니다. 1.HTML 작성 (moveNode)가 노드 이동을 감지하며, 트리의 노드가 변경이 되면, 연결되어있는 함수를 실행 시킴과 동시에 이벤트를 같이 전송합니다. 2. component.ts 파일 작성 import { Component } from '@angular/core'; import { ITreeState, ITreeOptions} from 'angular-tree-component'; @Component({ selector: 'app-root', templateUrl: .. 2020. 6. 7. Angular - tree구조 구현 및 표현 안녕하세요. 조직도 등을 구현을 하려고 할 때, 트리구조를 표현해야 하는 것들이 있습니다. 1 ㄴ 1 ㄴ1 ㄴ2 ㄴ 2 쉽게 설명하면 이런 구조입니다. Angular에서는 라이브러리를 이용해서 쉽게 구현 할 수 있는데요. 한번 같이 해보겠습니다. 기본적으로 NPM과 Angular가 설치가 되어있어야 합니다. 제 버전은 이렇습니다. 1. 프로젝트 생성 ng new treeApp 2. 라이브러리 설치 npm install --save angular-tree-component 3. CSS 플러그인 @import '~angular-tree-component/dist/angular-tree-component.css'; /* styles.css에 붙혀넣으시면 됩니다 */ 4. App.Module 작성 주석으로 표시.. 2020. 6. 5. Angular - Universal(SSR) Angular에서 SSR(Server Side rendering) Universal 웹 서버는 Static HTML 페이지를 Template 엔진에 랜더링하며 브라우저의 도움 없이 DOM, XMLHttpRequest 등을 서버에서 처리 할 수 있습니다. Angular는 기본적으로 Express Engine을 사용합니다. 아래 사이트 step을 차근차근 따라가면 쉽게 할 수 있습니다. 하지만 SSR을 적용하고 난 뒤에 코드 상에서 많은 문제를 마주치게 되실 겁니다. 이는 공부하셔서 격파하셔야 하는 부분입니다. https://github.com/angular/angular-cli/wiki/stories-universal-rendering#angular-universal-integration 2020. 5. 23. 이전 1 2 3 4 ··· 9 다음
