angular (39) 썸네일형 리스트형 앵귤러 템플릿 - property binding HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는 기능을 합니다. 사용방법 사용하는 방법은 템플릿에서 변화를 주고자 하는 속성을 아래와 같이 다양한데요 주로 꺽쇠를 사용하는 문법을 많이 사용합니다. 변수명을 사용할 경우 해당 TypeScript 클래스에서 반드시 사용된 변수명을 제공해 주어야 합니다. // property-binding.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-proper.. 앵귤러 템플릿 - interpolation imterpolation은 TypeScript에서 동적가치를 템플릿을 가져오거나 템플릿에서 생성하여 표시하게 해 주는 기능입니다. 사용방법 1. interpolation 구현하는 방법은 아래와 같이 이중 중괄호 ( {{ }} ) 안에 표시하고자 하는 값의 이름을 넣어 주면 됩니다. 변수명을 사용할 때 주의할 점은 .ts 클래스에 반드시 해당 변수명이 존재해야 한다는 것입니다. {{ interpolation }} // interpolation.component.ts import { Component } from '@angular/core'; @Component({ selector: 'interpolation-root', templateUrl: './interpolation.component.html', s.. 앵귤러 템플릿 앵귤러 템플릿은 화면에 표시되는 부분을 구성합니다. 앵귤러 템플릿은 일반 HTML파일에서 사용하는 모든 요소의 사용이 가능하며 전체적인 틀은 동일하나 전체화면의 부분을 구성하기 때문에 (컴포넌트 방식) 루트인 이나 태그는 포함하지 않는다는 특징과 TypeScript와의 binding을 통해 동적구성이 가능하다는 점에서 차이가 있습니다. 앵귤러 템플릿은 아래와 같이 다양한 문법을 제공합니다. 일반문법 template expression (statement) 앵귤러 템플릿 - template expression (statement) template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표.. 앵귤러 콤포넌트 앵귤러 애플리케이션은 컴포넌트라는 조각으로 만들어집니다. 컴포넌트는 기본적으로 HTML 템플릿, CSS, TypeScript class 파일로 구성되는데요. TypeScript는 JavaScript의 진화된 버전으로 애플리케이션의 기능 (행동)을 담당합니다. 사용방법 컴포넌트는 수동으로 만들거나 앵귤러 CLI를 사용해서 만들 수 있는데요. 수동으로 만드는 경우 파일생성부터 각 파일 구성 및 모듈에 등록하는 작업을 수동으로 해 주어야 하기 때문에 앵귤러 CLI 사용을 권장합니다. 그럼, 앵귤러 CLI를 사용하여 컴포넌트를 생성하는 방법을 보겠습니다. 앵귤러 프로젝트 생성 후 커멘드 라인에서 아래 커멘드를 입력합니다. ng generate component ng g c // 단축키 위와 같이 컴포넌트 생성시.. 앵귤러 라이브러리 - Angular Router 앵귤러는 싱글페이지 애플리케이션으로 URL경로가 바뀌지 않는데요. 하지만 앱의 구조상 페이지 분리가 필요할 때도 있습니다. 앵귤러 라우팅은 이러한 기능을 담당하는 모듈로 사용법을 알아보겠습니다. 모듈생성 라우팅을 사용하기 위해서는 라우터를 만들어야 하는데요. 라우팅을 위한 모듈을 따로 만드는 것을 권장합니다. 해당 모듈은 최초 애플리케이션을 만들 때 라우팅을 사용할 건지 물어보는데 이때 'y'를 선택하면 자동 생성됩니다 (추후 따로 생성하는 것도 물론 가능합니다). 만약, no를 선택한 경우 아래 커멘드를 통해 추가할 수 있습니다. ng new my-app --routing 라우터모듈은 아래와 같이 AppModule에 자동으로 등록됩니다. 모듈은 등록된 순서대로 위에서부터 순차적으로 발동되기 때문에 Ap.. Declarative Code VS Imperative Code Declarative coding과 Imperative coding은 프로그래밍에 대표적인 두 가지 파라다임인데요. 차이점에 대해서 알아보겠습니다. Declarative 내가 무엇을 원하는지만 말하고 구현방식은 컴퓨터에 맡기는 방식 Imperative 목적과 더불어 목적에 도달하는 세부 단계까지 세세하게 지시하는 방식 앵귤러? 앵귤러는 웹 어플리케이션 개발 시 필요한 다양한 기능 (routing, forms validation, animations)들을 탑재한 JavaScript framework인데요. Component 구현방식을 통해 코드의 재사용성 향상으로 중복적인 작업을 줄여주고 생산성을 향상시켜주는 등 다양한 장점이 있습니다. 앵귤러의 시작과 다양한 기능들을 살펴 보도록 하겠습니다. List of Contents [ 소개 ] [ 장점, 단점 ] [ 주요기능 ] [ 어떻게 작동할까? ] [ 누가 사용할까? ] [ 마무리 ] [ 참고자료 ] 소개 앵귤러는 2010년 10월 20일 더 나은 웹 개발 환경을 제공하기 위해 Google (개발자: Misko Hevery)에 의해 Angular.Js (ver 1.0) 라는 이름으.. 이전 1 2 3 4 5 다음
