Angular 개발 툴 및 모듈 설명

Angular 개발 툴 및 모듈 설명

CLI를 통해 파일을 생성하고, 여러가지 구성 요소들을 살펴보자.

가장 중요한 것은, src에 위치한 ‘angular-cli-json’

이 곳은 앵귤러 CLI에서 사용되는 앵귤러 프로그램에 대해 기술하는곳이다.

Index.html – 앱루트라는 태그만 보일 뿐, 따로 스타일 등 태그가 보이지 않는다. 하지만 cli가 자바스크립트나 css파일을 웹팩을 통해 번들링해서 서버를돌릴 때 동적으로 추가시켜준다.

Main.ts 파일이 시작 지점이다.Main.ts에서 부트스트랩 할 모듈을 지정해야 하는데 이게 루트모듈. 이건 일반적으로 app.module.ts가 된다. 이 곳에서 일반적으로 부트스트랩할컴포넌트를 지정하고, 우리가 사용할 다양한 컴포넌트들을 import를한다.

Module 알아보기

모듈 : 세부 구현이 숨겨지고 공개API를 이용해 다른 코드에서 재사용이 가능한 코드

Ex) 리모컨을 생각해보자. 리모컨모듈에는 다양한 버튼들이 있는데 이것이 각각의 공개된 API라고 볼 수 있다.

ES6 모듈 : 기존의모듈에서 변수의 스콥이 모듈로 제한하는 것을 추가

앵귤러 모듈 : 앵귤러 애플리케이션의 주요 부분(컴포넌트, 파이프, 서비스등)을 기능단위로 그룹핑 하게 해준다.

모든 앵귤러 애플리케이션 하나의 Root Module을 가진다. (app-module이 이에 해당)

그리고 로그인 모듈이나, 가입 모듈,할일 관리 모듈 등을 기능이나 논리적인 단위로 분류하기 위해서 Feature Module을가질 수 있다. 앵귤러 애플리케이션의 하나의 루트 모듈을 가지고 여러가지 피쳐 모델을 가질 수 있는것이다.

간단한 애플리케이션의 같은 경우는 루트 모듈에 다 입력이 가능하겠지만, 커지면커질수록 관리하기가 힘들기 때문에, 여러 기능 단위로 모듈화를 해서 관리하게 된다. 또한 외부에서 재사용할 수 있도록 모듈 별로 묶기도 한다. (예를들면 앵귤러 메테리얼의 버튼모듈, 부트스트랩의 모델모듈이 있다.)

todo 모듈 생성 : nggenerate module todo

이후에 app폴더 안에 todo라는폴더와 todo.module.ts가 만들어진 것을 확인할 수 있다.

Todo 모델 안에다가, todos라는컴포넌트를 추가하고 싶다.

ng generate(g) component(c) todo/todos –moduletodo/todo.modules.ts –export (다른 곳에서 이용할 수 있게 만들 때)

이후에 todo폴더 안에 todos라는폴더와 4가지 파일(html,ts,spec.ts,css)이추가된다.

declarations에서 선언하는 것들은 대체로 템플릿에서 사용할수 있는 것들이다.

서비스가 필요할 땐, providers를 통해 가능하다.

Todo 컴포넌트를 사용해야 ngserve시에 화면으로 출력하게 된다. 이 컴포넌트를 사용하려면, 기존의 app.componet.html에 저장된 코드에서 를 작성해주면 된다.

(이때 에러가 발생하는 이유는? -todos컴포넌트가 declarations를 해주어야 한다.

따라서 app.module.ts에서imports 영역에 브라우저모듈만 냅두고, TodoModule를 임폴트해준다. )