본문 바로가기

TypeScript/Angular35

Angular - Template 안녕하세요. 이번시간에는 Template에 대해 알아보도록 하겠습니다. Template - HTMl코드로서 템플릿을 작성 div, form태그 등을 사용하고, 스크립트는 사용하지 않음 - Template 표현식(Expression) : 자바스크립트와 비슷하게 변수 등을 뜻함 - Template 문장(Statement) : 이벤트 바인딩 할 때 사용 -바인딩 : 컴퍼넌트 즉 컴퍼넌트 속성과 데이터를 DOM((Document Object Model) 속성과 이벤트를 연결하는 것을 의미 바인딩 대상 : 속성,이벤트, ngModel, Class, stle 속성 바인딩 [] 은 todo컴퍼넌트의 todo 속성의 데이터를 바인딩 시킴 DOM에서 어떠한 이벤트가 일어나면 템플릿에 무언가를 하겠다라는 이벤트 바인딩 이.. 2020. 5. 10.
Angular - Component 안녕하세요. 저번시간에 모듈에 대해 알아봤는데요. 지난 시간이 이어 Angular의 Component에 대해 알아보고 컨퍼넌트 안에서 또 다른 컨퍼넌트를 동작시키는 실습을 해보겠습니다. 전과 같은 프로젝트를 사용할 예정입니다. https://le-piee.tistory.com/29 Component Angular는 여러 컴퍼넌트로 구성되어 있음 - 뷰와 로직으로 구성 HTML 요소들의 그룹 -DOM과 같은 트리구조로 UI 요소들을 구성 W3C 표준 웹 컴포넌트 기술을 기반으로 함( https://developer.mozilla.org/ko/docs/Web/Web_Components) -하나의 레고블럭을 하나의 컴퍼넌트라고 보면 됨 - 레고블럭이 쌓여서 애플리케이션이 됨 위의 분홍색 박스들이 하나의 컴퍼넌.. 2020. 5. 10.
Angular - ASP.NET Core 프로젝트 생성하기 안녕하세요. Visual Studio에서 ASP.NET Core 환경의 Angular 프로젝트를 생성해보고 Visual Studio의 Window Termonal 확장에 대해 알아보겠습니다. 기존에 Node.js 및 NPM, Angular CLI가 설치가 되어잇어야 합니다. 설치가 안되있으신 분들은 Node.js NPM설치 - https://le-piee.tistory.com/24?category=925786 Angular CLI 설치 - https://le-piee.tistory.com/25?category=938531 visual Studio를 실행 하신 후, 새 프로젝트 만들기를 클릭합니다. ASP.NET Core를 검색하신 후, 웹 어플리케이션을 선택 후, 다음 프로젝트 명과 경로를 지정합니다. .. 2020. 5. 10.
Anglar - Module(2) 안녕하세요. 저번시간에 이어서 모듈에 대해 알아보겠습니다. Angular Module 컴포넌트, 파이프, 서비스 등과 같은 앵귤러 애플리케이션의 중요 부분을 기능 단위로 그룹핑하게 해주는 역할을 합니다. 주요 기능 - 모든 앵귤러 애플리케이션은 하나의 Root Module을 가진다. - 여러 Feature Module을 가질 수 있다. - 재사용 할 수 있는 기능을 외부에 배포하기 위해 사용한다( ex. bootstrap의 ModalModule) Feature Module 실습 cmd를 실행한 뒤, 프로젝트 경로로 디렉토리를 이동하여 ng generate module todo ( ng generate module 모듈명) 명령어를 이용하여 모듈을 생성합니다 생성이 잘 된 된 것 같네요. 그리고 todo라.. 2020. 5. 10.

티스토리툴바