0. 개요 현재 앵귤러를 사용해서 설문조사하고, 데이터를 축적시키는 페이지를 만드는 일이 생겼습니다. 특이사항으로는 설문조사를 받는 사람들의 상태에 따라서, 다른 설문들이 보여져야 한다는 것이고, 이는 설문 페이지를 여러개를 만드는 과정이 될 것입니다. 이를 해결하기 위해서, 설문 내용만 입력하면, 해당 설문페이지를 만들수 있게 페이지를 작성해 보려고 합니다. 1. 공통 설문내용 및 서비스 생성 먼저, 설문을 할 데이터의 양식을 정했고, 이를 설문 받는 사람에 따라 변동시켜 사용할 수 있게 변수로 저장했습니다. survey.ts // text는 input-text 형식의 질문란 입니다. [ 질문, 입력한 값이 바인딩 될 key값] // select는 input-radio 형식의 질문란 입니다. // ti..

모듈에서 다양한 기능을 사용할 수 있게 import를 통해서 외부 모듈을 참조하도록 하였습니다. Angular에서는 마치 컴포넌트에 주사기로 넣어주듯이 데이터를 전달 해줄수 있습니다. Inject를 사용하는 방법 데이터 생성 및 공유 /src/app/MyTypes.ts export declare type INFORMATION = { // 전달할 데이터 양식 data1 : string, data2 : number, data3 : any, } export const myData : INFORMATION = { // 내가 전달할 데이터 data1 : 'data', data2 : 1433, data3 : ['data3_1','data3_2'], } 전달할 데이터 양식과 해당하는 데이터를 만들어 줍니다. expo..

ReactiveFormsModule 을 활용한 바인딩 사진처럼 N개를 그릴 데이터를 group으로 묶은뒤에 배열로 처리할 것입니다. 이해를 위해서 single이라는 배열이 아닌 단순한 대상을 1개 추가하였습니다. 기존 소스코드를 변경해 보겠습니다. dashboard.component.ts import {Component, OnInit} from '@angular/core'; import {FormArray, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms"; declare type MyType = { text: any; number: any; }; @Component({ selector: 'app-dashboard', templ..

디렉티브 속성 디렉티브: html관련된 모양, 동작을 제어합니다. (ngClasss, ngStyle 등) 구조 디렉티브: 구조를 변경 할 떄 사용합니다. (ngif, ngFor, class 등) 속성 : html 속성에 값을 지정합니다(style, value, class 등) 반응형 모듈 사용 app모듈에 ReactiveFormsModule을 사용하게 추가합니다. app.module.ts @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule //반응형 폼 사용 ], providers: [], bootstrap: ..

컴포넌트와 컴포넌트의 연결 앵귤러에서 index.html 과 main.ts 파일은 앵귤러가 가장 처음 동작하는 파일을 의미합니다. 컴포넌트 ts파일에 존재하는 셀렉터 값이 다른 컴포넌트 html파일 또는 index.html 파일에 사용된다! → 셀렉터를 다른 컴포넌트 html파일이나, index.html 파일에 등록해야만 컴포넌트가 생명(동작)을 부여받습니다. 셀렉터가 어디에도 사용되지 않는다면 해당 컴포넌트는 아무런 행동도 할 수 없습니다. 가장 맨 처음 만들어지는 app컴포넌트는 빈 화면으로 두는 경우가 많습니다. → 이는 app컴포넌트에 따라서 다양한 컴포넌트를 붙여두고 조건에 따라서 나타나게, 보이게 하기 위함입니다. (app컴포넌트는 다른 컴포넌트를 컨트롤하는 역할을 주로 합니다.) 컴포넌트와 ..

앵귤러란? 앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크입니다. Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면이 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어 졌습니다. 앵귤러는 타입스크립트 기반으로 앵귤러의 문법대로 개발하는 언어 라고 생각하면 될 것 같습니다. 기본 개발 환경구성 Node.js를 설치해야한다. - https://nodejs.org/ko/ 개발 도구를 설치 해야 한다. - https://code.visualstudio.com/ or 인텔리제이 타입스크립트를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치한다. vs코드를 실행 시키고 Extensions 탭에서 Angular Snippets를 설치한다. → 코드 문법검사, ..