Angular Angular dist 폴더에서 war 파일 만들기 전회의 기사에서는 Angular의 dist 폴더를 Web 서버에 배치하는 방법을 소개했다. "Angular 응용 프로그램의 빌드 자산 "dist"폴더를 배포하려면 useHash를 붙인다" 그러나 API 서버의 개발도 스스로 할 경우, API 서버를 배포하는 애플리케이션 서버의 경우, Angular 응용 프로그램을 배포하고 싶을 수도 있습니다. 그래서이 기사에서는 Angular 응용 프로그램을... Angulargrunt 연말이므로 웹 앱을 만들었습니다. minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 일렬 중에서 패널을 선택한다. 한번 선택한 패널은 선택할 수 없다. 패스는 할 수 없다. 패널을 선택할 수 없었던 시점에서, 합계 득점이 높은 쪽의 승이다. 게임 시작. 처음에는 ... AngularhamlCoffeeScriptgruntjasmine laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다. 먼저 yo 명령을 사용할 수 있어야하므로 아래에서 설치 global에 설치한 곳에서 laravel의 프로젝트 루트로 이동. 클라이언트 코드를 관리하는 디렉토리를 만들고 이동합니다. 클라이언트 환경 만들기 이것으로 히나가타까지 완성. 이대로 grunt build를 실행하면 알 수 있지만 오류가 발생합니다. 원인은 Gruntfile.js 안에 wiredep 라는 태스크의 options가 설정되어... AngularPHP라라벨CoffeeScriptgrunt Angular + C# + TypeScript Visual Studio 환경을 하나의 템플리적으로 가지고 있다. Angular + C# + TypeScript 환경을 Visual Studio에서 만들고, 왜 Angular인가, 라는 것은, TypeScript를 사용하고 싶으니까. 왜 TS인가, 라는 것은 강력한 형식화와 그리고 최강의 개발 환경에서 Visual Studio의 파워를 발휘시키는 것이 궁극의 목적입니다. TypeScript SDK for Visual Studio 2017 In Visual ... AngularTypeScriptC#VisualStudio2017 Angular9와 Firebase로 블로그를 만들어 보는 7(Qiita의 투고 이력을 표시한다) , 블로그 세부사항이 마크다운 형식에 대응했습니다. 이번에는 반응형 대응을 하려고 했습니다만, angular/flex-layout이 아직 Angular9에 대응하지 않고 에러가 되기 때문에, TOP 페이지에 Qiita의 투고 이력을 표시해 보려고 생각합니다. 블로그: Qiita에는 Qiita API가 있기 때문에 이것을 사용하여 게시 기록을 얻으려고합니다. /users/{user name}/... QiitaAPIAngular Angular Material의 mat-form-field 모양의 기본값 설정 전 기사 : Angular Material의 양식 필드 mat-form-field는 HTML 태그의 속성으로 스타일을 변경할 수 있습니다. 그러나, 사이트내의 컨트롤의 외관은 고정인 것이 많기 때문에, 모든 컨트롤 태그에 속성을 붙여 가는 것은 힘들고, 역시 바꾸고 싶어진 경우는 한층 더 힘듭니다. 그래서 이번에는 개인적으로 규정치에서 변경하는 경우가 많은 외관 설정 「appearance」와... AngularMaterialDesignangularMaterial Angular에서 앱 테마 관리 세상에 어두운 모드가 유행하고 있는 가운데, 어두운 모드를 구현하는 방법은 여러 가지가 있지만 이번에는 Angular에서 앱 테마(배경, 색)를 관리해 보았다. 이번 앱에 사용한 것은 이런 느낌입니다. Angular 9 Angular Material 9.2.1 Angular Material의 설치와 설정이 끝나면, 먼저 테마 작성용 scss 파일을 작성한다. 처음에는 Angular Mater... Angular자바스크립트MaterialDesign Angular : Firestore의 데이터를 페이지 네이션하고 싶다 ② ~ Material2의 Paginator를 사용 마지막: 모처럼 멋있는 Material2의 Paginator라는 부품이 있으므로 사용해보고 싶다. 정식 매뉴얼은 이쪽. 환경 app.module.ts Material2를 사용 중이라면 평소대로. app.module.ts에 MatPaginatorModule을 추가합니다. app.module.ts Paginator 붙이기 우선은 UI에 Material2의 Paginator를 붙인다. 위 환경에서... AngularFirebaseMaterialDesign페이지네이션Firestore [Angular] Angular Material 사용을 위한 SCSS 입문 Angular Material에서 테마를 만들고 싶었습니다. SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다. 공식 사이트 SCSS의 문법은 CSS를 확장한 형태로 되어 있다. CSS 그대로도 SCSS로 해석됩니다. SCSS에서는 변수를 선언하고 참조할 수 있습니다. 선언과 참조 방법 머리에 $를 붙여 값과 :로 구분하십시오. 변수의 범위는 선언을 포함하는 {} 안으로 제한... CSSAngularscssMaterialDesign 중규모용 MVC 모델을 고려 좀 더 개발이 한 구간 끊어질 것 같기 때문에, 고전한 MVC 모델의 취급 방법에 대해 정리합니다. 담당은 IoT 기기 조작용의 웹 앱을 만드는 것. 여기에 건간 기능을 추가하고 싶다는 것이었기 때문에 MVC 모델의 분할을하고 싶다고 생각했지만 MVC의 지식이 거의 0으로 꽤 잘 가지 않고. 본 기사에서는, 시도와 집착한 점, 최종적으로 침착한 모델을 기재합니다. MVC의 분할을 구그하면, ... mvcAngular Angular Material에서 파일 선택 버튼 작은 재료입니다. Angular Material을 사용한 프로젝트에서 파일 선택 input <input type="file" />를 사용할 때 버튼을 mat-button으로 만드는 방법을 소개합니다. 1행 : 통상의 input 컨트롤에 대해서 #fileInput 의 형태로 템플릿 레퍼런스를 추가. 또한이 컨트롤은 mat-button으로 대체 될 예정이므로 display: none에서 숨 깁니... 작은 재료AngularangularMaterial "Nemloy or Die."~첫 NEM 앱을 배포하자!~ 1. 도입편 NEM의 네임스페이스 이름에서 모자이크를 검색하는 간단한 앱을 만들고 무료 호스팅 서비스를 사용하여 배포하는 단계를 안내합니다. Angular는 JavaScript로 작성되고 인터넷 브라우저에서 실행되는 응용 프로그램 프레임 워크 중 하나입니다. 그런데도 물론 JavaScript로 개발할 수 있습니다만, - Angular도 NEM Library도 TypeScript에 의해 만들어져 있는 것.... 가상 통화AngularnemlibraryNEMBlockchain Angular-Material을 이용하여 개폐 메뉴 구현 Angular에서 앱에 자주 있는 개폐식 메뉴(이 명칭이 올바른지 미묘하지만...)를 만드는 방법을 소개합니다. Angular-material을 이용하여 쉽게 구현할 수 있습니다. 본 기사에서는 Angular11을 기반으로 구현을 실시하고 있습니다. 절차는 모듈을 가져오고 템플릿을 추가하고 구현합니다. 우선, 대상의 모듈에 아래와 같은 모듈을 import 해 둡니다. 또한 이번에는 헤더에 개... Angular앞 Angular의 Lazy Loading 정보 라우팅으로 구성 요소를 전환할 수 있게 된 후 Lazy Loading이라는 개념을 공부했습니다. 지연 로드라고 하는 것으로, 브라우저를 열었을 때에 그 어플리케이션의 데이터나 view를 모두 그 때 다운로드하는 것이 아니라, 하나씩 진행해 가면서 그 때마다 필요한 것을 읽어 가겠다고 하는 인식입니다. 한 번에 다운로드하지 않으므로 통신량을 줄일 수 있습니다. 첫 페이지는 'hoge1'에서 컴... AngularlazyloadRouting 제10회: 뉴스 피드 게시 서버 IF를 웹 앱에서 호출 이번에는 이전에 작성한 뉴스 피드 게시물 IF를 프런트 엔드에서 호출해 보겠습니다. 우선 화면에 넣어 보자 긴 텍스트를 입력하는 <textarea> 태그와 <button> 태그를 추가합니다. newsfeeds.component.html 버튼을 클릭했을 때의 이벤트 등록과, <textarea> 메세지를 읽을 수 있도록(듯이) 한다. <textarea> 에 입력한 문자를 로그에 출력해, 정상적으... Angular [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(4)부모 컴퍼넌트에 데이터를 건네준다 Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : Notify Me 버튼을 작동하려면 하위 구성 요소가 알리고 상위 구성 요소에 데이터를 전달해야 합니다. 1.product-alerts.component.ts에서 Output 및 EventEmitter 가져오기 product-alerts.component.ts 2.notify라는 속성을 () 데코레이터와 EventEm... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(3)자식 컴퍼넌트에 데이터를 건네준다 Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : 이 섹션에서는 상위 구성 요소인 ProductListComponent에서 데이터를 받을 수 있는 하위 구성 요소 ProductAlertsComponent를 만드는 방법을 설명합니다. 1.Angular Generator를 사용하여 product-alerts라는 새 구성 요소 생성 튜토리얼의 지시대로 product-ale... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(2) Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : 오늘부터 본격적으로 튜토리얼을 진행합니다. 라고 해도 지시대로 카피＆페이스트 해 갈 뿐입니다만. 1.product-list 폴더의 product-list.component.html에 다음 태그를 작성합니다. product-list.component.html 2.div 태그 안에 아래의 h3 태그를 기술한다. produ... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(1) 어제 위의 기사처럼 튜토리얼 샘플 프로젝트를 생성했습니다. 샘플 프로젝트를 생성하면 아래 그림과 같이 product-list 폴더, top-bar 폴더에 각각 css, html, ts, 3개의 파일이 있는 것을 알 수 있습니다. 실행 결과로 미리보기 화면에 아래 그림과 같이 표시됩니다. 조금만 시험해보자 오늘은 조금 테스트해 보겠습니다. product-list.component.ts prod... HTMLAngular초보자TypeScript Intellij에서 Angular 개발을 디버깅 할 때까지 Angular 개발의 IDE로 Intellij를 사용하여 프로젝트 작성에서 디버그까지의 도입 메모입니다. Angular CLI, npm 경로를 통과하는 곳이 조금 번거롭기 때문에 기록에 남깁니다 MacBook Air (M1, 2020) Mac OS Big Sur 11.0.1 IntelliJ Ultimate 2020.3 Node v15.4.0 Node의 Virgin 관리 anyenv/nodee... IntelliJAngular Angular 프로젝트를 Visual Studio Code에서 Azure Web Apps로 배포 Azure Web Apps에 Azure CLI나 Cloud Shell 없이 정적 HTML 웹 앱을 배포하는 방법을 모르기 때문에 정리했습니다. 주제 전에, 우선 내 환경에서. OS: Windows 10 Pro Node: 14.15.3 Angular CLI: 11.0.5 정적 HTML이 이미 준비되어 있는 경우는 읽어 버려도 상관없습니다. Angular CLI를 설치하고 초기 응용 프로그램을 ... AzureAngularVSCodeAzureWebApps Monorepos development with nx (nx를 사용한 모노레포 개발) In this article, I will generate 2 applications (operator, accounting), 1 shared library, 1 utils library. Each application import a shared library to use almost the same code, it helps us faster in developing software, ... 응 xAngularnrwlatwareatwarevn Angular OnPush Component 주의해야 할 곳: 계속 케이스 1: componentRef.changeDetectorRef.detectChanges() is confusing. 이 케이스가 Dynamic 의 OnPush Component 를 추가해, 이 component의 cmptRef.changeDetectorRef.detectChanges() 를 호출해도, 화면이 갱신되지 않는다고 하는 현상이 됩니다. 그리고 cmptRef.injector.g... Angular Angular의 PDF 표시 라이브러리 조사 결과 PDF를 표시하는 기능의 조사 개요를 기재합니다. 유연하게 UI 교체가 가능 동일한 페이지 내부에 여러 PDF를 표시 할 수 있습니다 pdf의 문자내 검색을 할 수 있다 지정된 페이지로 전환하거나 이동할 수 있습니다 ng2-pdf-viewer / ng2-pdfjs-viewer / ngx-extended-pdf-viewer / ng2-pdf-viewer는 안정되어 있고 이용률.Contribut... Angularpdfjs Angular 스터디 # 4 라이프 사이클 후크 Angular에 한정되지 않고, 많은 View 프레임워크에는 「라이프 사이클」이라고 하는 생각이 있다. 이것은 View의 생성으로부터 파기까지의 상태 천이를 정의한 것으로, 모든 View 요소를 같은 라이프 사이클로 관리하는 것으로, 효율적이고 확장하기 쉬운 View 구조로 하고 있다. "확장 용이성"을 생성하기 위해 View의 각 라이프 사이클에 처리를 삽입 할 수 있습니다. 이것을 라이프... AngularTypeScript Angular에서 하이라이트 구현 Angular에서 하이라이트 기능을 구현했기 때문에 기록용으로 남깁니다. 이번은 를 참고로 구현. Angular6(Typescript) angular-text-input-highlight npm에서 설치 앱 어딘가에 스타일시트 포함 angular.json module에 추가 sample.module.ts html 구현 하이라이트 함수를 호출하기 위해 임시 버튼을 설치 sample.compon... AngularTypeScript 【빌어 먹을 앱】 고양이가있는 리버시 앱을 만들어 보았습니다. 이 기사는 빌어 먹을 앱 Advent Calendar 2020의 9 일째 게시물입니다. 필자는 고양이를 키우고 싶은 너무 이상하게 되어 버렸습니다. 고양이와 함께 살면 무엇을 할지라도 고양이가 따라옵니다. PC 작업 중에 키보드에 앉아서 일할 수 없다. 라고 된다고 생각합니다. 그런 생활을 꼭 여러분에게 맛보고 싶어서 이 앱을 만들었습니다. 표시가 느린 것은 반드시 고양이 탓. 온라인 대전을... AngularFirebase빌어 먹을 앱 Angular에서 브라우저 버전 체스 게임을 만들어 보았습니다. 이쪽은 모두 수동으로, 컴퓨터전과 같은 자동 조작은 없습니다. 구현할 수 있는 기능 조각 이동할 수 있는 송어 표시 캐슬링과 폰의 특수 움직임 구현 체크 표시 (킹을 빨간색으로 둘러싼다) 프로모션 메뉴 표시 조각 움직임 애니메이션 구현할 수 없는 기능 각 조각마다 1개 1개 클래스를 만들고 메서드를 만드는 것은 조금 번거롭기 때문에 PiecesMaster 추상 클래스를 만듭니다. Pieces... AngularRxJS게임 제작 【Angular】 현재 열려 있는 페이지의 url을 취득한다 하고 싶은 일 · 헤더에서 URL에 따라 CSS를 변경하고 싶습니다. · 페이지를 전환 할 때마다 URL을 얻고 싶습니다. router.events를 subscribe하면 url에 대한 정보가 여러 가지 흐릅니다. 가득 흐르기 때문에 이번에 원하는 정보가 있는 NavigationEnd의 이벤트 때만 취득하도록 filter로 좁힙니다 url을 가져왔습니다. 나머지는 에서 URL을 조건으로하면 ... Angular 이전 기사 보기
Angular dist 폴더에서 war 파일 만들기 전회의 기사에서는 Angular의 dist 폴더를 Web 서버에 배치하는 방법을 소개했다. "Angular 응용 프로그램의 빌드 자산 "dist"폴더를 배포하려면 useHash를 붙인다" 그러나 API 서버의 개발도 스스로 할 경우, API 서버를 배포하는 애플리케이션 서버의 경우, Angular 응용 프로그램을 배포하고 싶을 수도 있습니다. 그래서이 기사에서는 Angular 응용 프로그램을... Angulargrunt 연말이므로 웹 앱을 만들었습니다. minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 일렬 중에서 패널을 선택한다. 한번 선택한 패널은 선택할 수 없다. 패스는 할 수 없다. 패널을 선택할 수 없었던 시점에서, 합계 득점이 높은 쪽의 승이다. 게임 시작. 처음에는 ... AngularhamlCoffeeScriptgruntjasmine laravel에 yo에서 angularJs&coffeescript를 사용할 수 있도록 한다. 먼저 yo 명령을 사용할 수 있어야하므로 아래에서 설치 global에 설치한 곳에서 laravel의 프로젝트 루트로 이동. 클라이언트 코드를 관리하는 디렉토리를 만들고 이동합니다. 클라이언트 환경 만들기 이것으로 히나가타까지 완성. 이대로 grunt build를 실행하면 알 수 있지만 오류가 발생합니다. 원인은 Gruntfile.js 안에 wiredep 라는 태스크의 options가 설정되어... AngularPHP라라벨CoffeeScriptgrunt Angular + C# + TypeScript Visual Studio 환경을 하나의 템플리적으로 가지고 있다. Angular + C# + TypeScript 환경을 Visual Studio에서 만들고, 왜 Angular인가, 라는 것은, TypeScript를 사용하고 싶으니까. 왜 TS인가, 라는 것은 강력한 형식화와 그리고 최강의 개발 환경에서 Visual Studio의 파워를 발휘시키는 것이 궁극의 목적입니다. TypeScript SDK for Visual Studio 2017 In Visual ... AngularTypeScriptC#VisualStudio2017 Angular9와 Firebase로 블로그를 만들어 보는 7(Qiita의 투고 이력을 표시한다) , 블로그 세부사항이 마크다운 형식에 대응했습니다. 이번에는 반응형 대응을 하려고 했습니다만, angular/flex-layout이 아직 Angular9에 대응하지 않고 에러가 되기 때문에, TOP 페이지에 Qiita의 투고 이력을 표시해 보려고 생각합니다. 블로그: Qiita에는 Qiita API가 있기 때문에 이것을 사용하여 게시 기록을 얻으려고합니다. /users/{user name}/... QiitaAPIAngular Angular Material의 mat-form-field 모양의 기본값 설정 전 기사 : Angular Material의 양식 필드 mat-form-field는 HTML 태그의 속성으로 스타일을 변경할 수 있습니다. 그러나, 사이트내의 컨트롤의 외관은 고정인 것이 많기 때문에, 모든 컨트롤 태그에 속성을 붙여 가는 것은 힘들고, 역시 바꾸고 싶어진 경우는 한층 더 힘듭니다. 그래서 이번에는 개인적으로 규정치에서 변경하는 경우가 많은 외관 설정 「appearance」와... AngularMaterialDesignangularMaterial Angular에서 앱 테마 관리 세상에 어두운 모드가 유행하고 있는 가운데, 어두운 모드를 구현하는 방법은 여러 가지가 있지만 이번에는 Angular에서 앱 테마(배경, 색)를 관리해 보았다. 이번 앱에 사용한 것은 이런 느낌입니다. Angular 9 Angular Material 9.2.1 Angular Material의 설치와 설정이 끝나면, 먼저 테마 작성용 scss 파일을 작성한다. 처음에는 Angular Mater... Angular자바스크립트MaterialDesign Angular : Firestore의 데이터를 페이지 네이션하고 싶다 ② ~ Material2의 Paginator를 사용 마지막: 모처럼 멋있는 Material2의 Paginator라는 부품이 있으므로 사용해보고 싶다. 정식 매뉴얼은 이쪽. 환경 app.module.ts Material2를 사용 중이라면 평소대로. app.module.ts에 MatPaginatorModule을 추가합니다. app.module.ts Paginator 붙이기 우선은 UI에 Material2의 Paginator를 붙인다. 위 환경에서... AngularFirebaseMaterialDesign페이지네이션Firestore [Angular] Angular Material 사용을 위한 SCSS 입문 Angular Material에서 테마를 만들고 싶었습니다. SCSS 전혀 모르기 때문에, 조금 아는 ww 정도까지 노력합니다. 공식 사이트 SCSS의 문법은 CSS를 확장한 형태로 되어 있다. CSS 그대로도 SCSS로 해석됩니다. SCSS에서는 변수를 선언하고 참조할 수 있습니다. 선언과 참조 방법 머리에 $를 붙여 값과 :로 구분하십시오. 변수의 범위는 선언을 포함하는 {} 안으로 제한... CSSAngularscssMaterialDesign 중규모용 MVC 모델을 고려 좀 더 개발이 한 구간 끊어질 것 같기 때문에, 고전한 MVC 모델의 취급 방법에 대해 정리합니다. 담당은 IoT 기기 조작용의 웹 앱을 만드는 것. 여기에 건간 기능을 추가하고 싶다는 것이었기 때문에 MVC 모델의 분할을하고 싶다고 생각했지만 MVC의 지식이 거의 0으로 꽤 잘 가지 않고. 본 기사에서는, 시도와 집착한 점, 최종적으로 침착한 모델을 기재합니다. MVC의 분할을 구그하면, ... mvcAngular Angular Material에서 파일 선택 버튼 작은 재료입니다. Angular Material을 사용한 프로젝트에서 파일 선택 input <input type="file" />를 사용할 때 버튼을 mat-button으로 만드는 방법을 소개합니다. 1행 : 통상의 input 컨트롤에 대해서 #fileInput 의 형태로 템플릿 레퍼런스를 추가. 또한이 컨트롤은 mat-button으로 대체 될 예정이므로 display: none에서 숨 깁니... 작은 재료AngularangularMaterial "Nemloy or Die."~첫 NEM 앱을 배포하자!~ 1. 도입편 NEM의 네임스페이스 이름에서 모자이크를 검색하는 간단한 앱을 만들고 무료 호스팅 서비스를 사용하여 배포하는 단계를 안내합니다. Angular는 JavaScript로 작성되고 인터넷 브라우저에서 실행되는 응용 프로그램 프레임 워크 중 하나입니다. 그런데도 물론 JavaScript로 개발할 수 있습니다만, - Angular도 NEM Library도 TypeScript에 의해 만들어져 있는 것.... 가상 통화AngularnemlibraryNEMBlockchain Angular-Material을 이용하여 개폐 메뉴 구현 Angular에서 앱에 자주 있는 개폐식 메뉴(이 명칭이 올바른지 미묘하지만...)를 만드는 방법을 소개합니다. Angular-material을 이용하여 쉽게 구현할 수 있습니다. 본 기사에서는 Angular11을 기반으로 구현을 실시하고 있습니다. 절차는 모듈을 가져오고 템플릿을 추가하고 구현합니다. 우선, 대상의 모듈에 아래와 같은 모듈을 import 해 둡니다. 또한 이번에는 헤더에 개... Angular앞 Angular의 Lazy Loading 정보 라우팅으로 구성 요소를 전환할 수 있게 된 후 Lazy Loading이라는 개념을 공부했습니다. 지연 로드라고 하는 것으로, 브라우저를 열었을 때에 그 어플리케이션의 데이터나 view를 모두 그 때 다운로드하는 것이 아니라, 하나씩 진행해 가면서 그 때마다 필요한 것을 읽어 가겠다고 하는 인식입니다. 한 번에 다운로드하지 않으므로 통신량을 줄일 수 있습니다. 첫 페이지는 'hoge1'에서 컴... AngularlazyloadRouting 제10회: 뉴스 피드 게시 서버 IF를 웹 앱에서 호출 이번에는 이전에 작성한 뉴스 피드 게시물 IF를 프런트 엔드에서 호출해 보겠습니다. 우선 화면에 넣어 보자 긴 텍스트를 입력하는 <textarea> 태그와 <button> 태그를 추가합니다. newsfeeds.component.html 버튼을 클릭했을 때의 이벤트 등록과, <textarea> 메세지를 읽을 수 있도록(듯이) 한다. <textarea> 에 입력한 문자를 로그에 출력해, 정상적으... Angular [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(4)부모 컴퍼넌트에 데이터를 건네준다 Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : Notify Me 버튼을 작동하려면 하위 구성 요소가 알리고 상위 구성 요소에 데이터를 전달해야 합니다. 1.product-alerts.component.ts에서 Output 및 EventEmitter 가져오기 product-alerts.component.ts 2.notify라는 속성을 () 데코레이터와 EventEm... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(3)자식 컴퍼넌트에 데이터를 건네준다 Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : 이 섹션에서는 상위 구성 요소인 ProductListComponent에서 데이터를 받을 수 있는 하위 구성 요소 ProductAlertsComponent를 만드는 방법을 설명합니다. 1.Angular Generator를 사용하여 product-alerts라는 새 구성 요소 생성 튜토리얼의 지시대로 product-ale... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(2) Angular 튜토리얼을 시도하고 있습니다. Angular 공식 페이지 : 오늘부터 본격적으로 튜토리얼을 진행합니다. 라고 해도 지시대로 카피＆페이스트 해 갈 뿐입니다만. 1.product-list 폴더의 product-list.component.html에 다음 태그를 작성합니다. product-list.component.html 2.div 태그 안에 아래의 h3 태그를 기술한다. produ... HTMLAngular초보자TypeScript [Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(1) 어제 위의 기사처럼 튜토리얼 샘플 프로젝트를 생성했습니다. 샘플 프로젝트를 생성하면 아래 그림과 같이 product-list 폴더, top-bar 폴더에 각각 css, html, ts, 3개의 파일이 있는 것을 알 수 있습니다. 실행 결과로 미리보기 화면에 아래 그림과 같이 표시됩니다. 조금만 시험해보자 오늘은 조금 테스트해 보겠습니다. product-list.component.ts prod... HTMLAngular초보자TypeScript Intellij에서 Angular 개발을 디버깅 할 때까지 Angular 개발의 IDE로 Intellij를 사용하여 프로젝트 작성에서 디버그까지의 도입 메모입니다. Angular CLI, npm 경로를 통과하는 곳이 조금 번거롭기 때문에 기록에 남깁니다 MacBook Air (M1, 2020) Mac OS Big Sur 11.0.1 IntelliJ Ultimate 2020.3 Node v15.4.0 Node의 Virgin 관리 anyenv/nodee... IntelliJAngular Angular 프로젝트를 Visual Studio Code에서 Azure Web Apps로 배포 Azure Web Apps에 Azure CLI나 Cloud Shell 없이 정적 HTML 웹 앱을 배포하는 방법을 모르기 때문에 정리했습니다. 주제 전에, 우선 내 환경에서. OS: Windows 10 Pro Node: 14.15.3 Angular CLI: 11.0.5 정적 HTML이 이미 준비되어 있는 경우는 읽어 버려도 상관없습니다. Angular CLI를 설치하고 초기 응용 프로그램을 ... AzureAngularVSCodeAzureWebApps Monorepos development with nx (nx를 사용한 모노레포 개발) In this article, I will generate 2 applications (operator, accounting), 1 shared library, 1 utils library. Each application import a shared library to use almost the same code, it helps us faster in developing software, ... 응 xAngularnrwlatwareatwarevn Angular OnPush Component 주의해야 할 곳: 계속 케이스 1: componentRef.changeDetectorRef.detectChanges() is confusing. 이 케이스가 Dynamic 의 OnPush Component 를 추가해, 이 component의 cmptRef.changeDetectorRef.detectChanges() 를 호출해도, 화면이 갱신되지 않는다고 하는 현상이 됩니다. 그리고 cmptRef.injector.g... Angular Angular의 PDF 표시 라이브러리 조사 결과 PDF를 표시하는 기능의 조사 개요를 기재합니다. 유연하게 UI 교체가 가능 동일한 페이지 내부에 여러 PDF를 표시 할 수 있습니다 pdf의 문자내 검색을 할 수 있다 지정된 페이지로 전환하거나 이동할 수 있습니다 ng2-pdf-viewer / ng2-pdfjs-viewer / ngx-extended-pdf-viewer / ng2-pdf-viewer는 안정되어 있고 이용률.Contribut... Angularpdfjs Angular 스터디 # 4 라이프 사이클 후크 Angular에 한정되지 않고, 많은 View 프레임워크에는 「라이프 사이클」이라고 하는 생각이 있다. 이것은 View의 생성으로부터 파기까지의 상태 천이를 정의한 것으로, 모든 View 요소를 같은 라이프 사이클로 관리하는 것으로, 효율적이고 확장하기 쉬운 View 구조로 하고 있다. "확장 용이성"을 생성하기 위해 View의 각 라이프 사이클에 처리를 삽입 할 수 있습니다. 이것을 라이프... AngularTypeScript Angular에서 하이라이트 구현 Angular에서 하이라이트 기능을 구현했기 때문에 기록용으로 남깁니다. 이번은 를 참고로 구현. Angular6(Typescript) angular-text-input-highlight npm에서 설치 앱 어딘가에 스타일시트 포함 angular.json module에 추가 sample.module.ts html 구현 하이라이트 함수를 호출하기 위해 임시 버튼을 설치 sample.compon... AngularTypeScript 【빌어 먹을 앱】 고양이가있는 리버시 앱을 만들어 보았습니다. 이 기사는 빌어 먹을 앱 Advent Calendar 2020의 9 일째 게시물입니다. 필자는 고양이를 키우고 싶은 너무 이상하게 되어 버렸습니다. 고양이와 함께 살면 무엇을 할지라도 고양이가 따라옵니다. PC 작업 중에 키보드에 앉아서 일할 수 없다. 라고 된다고 생각합니다. 그런 생활을 꼭 여러분에게 맛보고 싶어서 이 앱을 만들었습니다. 표시가 느린 것은 반드시 고양이 탓. 온라인 대전을... AngularFirebase빌어 먹을 앱 Angular에서 브라우저 버전 체스 게임을 만들어 보았습니다. 이쪽은 모두 수동으로, 컴퓨터전과 같은 자동 조작은 없습니다. 구현할 수 있는 기능 조각 이동할 수 있는 송어 표시 캐슬링과 폰의 특수 움직임 구현 체크 표시 (킹을 빨간색으로 둘러싼다) 프로모션 메뉴 표시 조각 움직임 애니메이션 구현할 수 없는 기능 각 조각마다 1개 1개 클래스를 만들고 메서드를 만드는 것은 조금 번거롭기 때문에 PiecesMaster 추상 클래스를 만듭니다. Pieces... AngularRxJS게임 제작 【Angular】 현재 열려 있는 페이지의 url을 취득한다 하고 싶은 일 · 헤더에서 URL에 따라 CSS를 변경하고 싶습니다. · 페이지를 전환 할 때마다 URL을 얻고 싶습니다. router.events를 subscribe하면 url에 대한 정보가 여러 가지 흐릅니다. 가득 흐르기 때문에 이번에 원하는 정보가 있는 NavigationEnd의 이벤트 때만 취득하도록 filter로 좁힙니다 url을 가져왔습니다. 나머지는 에서 URL을 조건으로하면 ... Angular 이전 기사 보기