angular (39) 썸네일형 리스트형 Angular Modal A modal refers to a popup or dialog in the Web development. It is possible to implement a modal with Vanilla JavaScript (An application made only with HTML, CSS, and JS). But Angular provides additional features that make sharing the status of a modal between components easy and help reduce repetition of codes. With that said, let's see one way of implementing the modal using Angular. First let'.. What is Angular? Developing a front end application using Vanilla JavaScript can become tedious and unproductive as the size of the application grows because anything that needs to be in the template should be written by the developer. Angular is a JavaScript framework that is packed with powerful features such as routing, forms validation, animations and rich libraries. Let’s have a look at how it started and s.. 앵귤러 서비스 (Service) 앵귤러의 서비스는 템플릿과 클래스 파일이 공유하는 클래스 파일로 중복코드를 줄이고 모든 컴포넌트가 상속관계에 상관없이 정보를 공유할 수 있게 해 줍니다. 생성하기 서비스 생성은 /app 하위에 폴더를 만들고 클래스 파일생성 또는 아래와 같이 앵귤러 CLI를 통해 생성가능합니다 (CLI 사용을 권장). ng genarate service service 애플리케이션 규모가 커지면 서비스도 여러 개를 가지기 때문에 서비스 폴더를 따로 생성하는 것을 권장합니다 (아래와 같이 services/ 라고 경로를 정하고 그 아래 파일을 생성하면 자동으로 폴더 생성됨). 아래 코드는 위 커맨드의 alias버전으로 services라는 폴더 하위에 서비스를 생성합니다. ng g s services/service 마지막으로 끝.. 앵귤러 directives - ngIf 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. If Name: {{i.name}} Pet Owner: {{i.petOwner}} Name: {{i.petName}} // ng-if1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-if1', templateUrl: './ng-if1.component.html', styleUrls: ['./ng-if1.component.css'], }) export class NgIf1Component implements OnInit { users: { .. 앵귤러 directives - ngFor 템플릿의 구조를 변경하는 Structural directive의 하나로 한 요소에 하나의 다른 구조 디렉티브와 사용이 불가능합니다. 사용예시 1. 일반 for 문 ID: {{i}} First Name: {{ u.firstName }} Last Name: {{ u.lastName }} Age: {{ u.age }} // ngfor1.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ngfor1', templateUrl: './ngfor1.component.html', styleUrls: ['./ngfor1.component.css'], }) export class Ngfor1Component .. 앵귤러 (Front) - 배포하기 (Netlify) 서버를 사용하지 않은 앵귤러 프로젝트 (Static)는 간단하게 배포가 가능한데요 다양한 플랫폼 중 오늘은 Netlify를 통해 배포해 보겠습니다. Develop and deploy websites and apps in record time | Netlify Develop and deploy websites and apps in record time | Netlify Accelerate the time to deploy your websites and apps. Bring your integrations and APIs together on one powerful serverless platform. Get started for free! www.netlify.com Netlify로 이동하여 'Add n.. 노드제이에스 - 앵귤러 서버 API 배포하기 (Render) 백엔드 API기능을 가진 앵귤러 프로젝트를 배포하는 방식은 여러 가지가 있는데요. 크게는 Front와 Back을 따로 배포하고 연결할 건지 아니면 동시에 한 곳에 배포할 건지로 구분됩니다. 오늘은 Render와 Netlify를 사용하여 나누어서 배포하는 방식을 보겠습니다. 배포된 애플리케이션 Angular와 MongDB를 사용하여 만들어졌으며 Render의 무료버전은 MongDB를 지원하지 않기 때문에 MongDB을 지원하는 가장 저렴한 플랜으로 배포되었습니다 (무료 배포 아님). 개발환경과 프로덕션환경 구분 없이 분리된 Front와 Back 서버를 함께 작동시키고 작업된 코드를 깃에 커밋만 하면 자동 배포가 되도록 설정해 보겠습니다. Backend 배포 먼저 렌더에서 'Web service'를 생성합니.. 파이어베이스 - 연결하기 (앵귤러, 리액트) 파이어베이스는 데이터 저장에 필요한 데이터베이스, 인증 및 호스팅 등 다양한 서버 측 기능을 제공하는 구글의 통합 서비스입니다. 이미 구축된 서버에 프론트 애플리케이션을 연동하고 파이어베이스에서 필요한 기능을 가져다 사용하기 때문에 백엔드 개발 없이 완전체의 애플리케이션을 개발할 수 있는 장점이 있습니다. 파이어베이스는 파이어 스토어 기준으로 1GB의 총 데이터와 하루에 20,000번의 쓰기, 20,000번의 지우기, 50,000번의 읽기를 무료로 제공하므로 테스트 목적의 애플리케이션을 충분히 가동 가능합니다. 파이어베이스 사용을 위한 첫 단계인 파이어베이스와 개발하고자 하는 애플리케이션의 연동방법을 살펴보겠습니다. HTML 삽입 미리보기할 수 없는 소스 이전 1 2 3 4 5 다음
