Mean스텍 입문 (5) - Nav Component 작성하기 -

 - Nav Component 작성하기 -

 

Angular는 Component로 시작해서 Component로 끝난다는 말이 있다. 왜냐하면 한 페이지에 모든 것을 담아야 하기 때문이다. 대개 개념이 없거나 미숙할수록 부분부터 그리거나 시작하고 본다. Angular는 미숙함을 아예 방지하는 시스템을 만들었다. Component 시스템으로 큰 뼈대를 분류하고, Component 안에 각각 미시적으로 설계를 할 수 있도록 시스템을 구성했다. 이번 포스팅에서는 상단 네비게이션 Component를 설계해본다.

 

1. `ng g c nav` 실행

-> g : generate, c : component 의 단축명령어이다.

 

-> nav 폴더가 자동으로 생성되고, scss, html, ts, spec.ts 파일과 함께 app.module.ts가 업데이트 되었다고 알려준다.

 

 

2. <app-nav> </app-nav>추가

-> 현재 가장 상위 껍데기 파일인 index.html파일에는 <app-root></app-root> 태그가 실행되면서, app.component.ts 의 내용이 실행되고 있다.

 

-> app.component.html를 열어보자.

 

-> <router-outlet></router-outlet>은 하위 컴포넌트들을 모두 포함해서 실행시킨다는 의미이다.

 

-> <app-nav></app-nav>를 추가하고, nav.component.ts 파일을 열어보자.

 

-> selector 항목에 "app-nav"가 있다. 이는 상위 컴포넌트.html 파일에 <app-nav>태그만 넣어주면, 템플릿으로 'nav.component.html' 파일이 실행된다는 의미이다.

 

-> <app-nav></app-nav>를 상위 컴포넌트인 app.component.html 파일에서 태그로 넣어주면, nav.component.html 파일의 내용이 상위에서 실행된다는 의미가 된다.

 

3. foundation.css 파일 설치 

-> 디자인 CSS 툴로써 Foundation CDN을 이용하기로 하자. 

-> foundation은 bootstrap과 비슷하며, css 편집을 유용하게 할 수 있다.

-> foundation cdn 주소  --> 링크

 

-> foundation CDN을 복사해서 index.html (가장 상위 html파일, 여기에 app.component.html의 실행어인 <app-root>태그가 있음) 에 넣어두자.

 

-> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">

 

-> index.html에 각종 CDN을 넣어두거나 JS파일을 넣어두면, 하위 Component.html파일에서 모두 사용할 수 있다. 현재 nav.component.html 파일은 아래와 같다.

 

 -> ng build 명령어로 디버깅 한 후에, node server.js를 실행시키면 <app-nav></app-nav>내용이 상위에 나타난다.

 

4. Nav.component.html 수정

 -> Foundation의 파일 형태는 가장 상위에서부터 class="row" -> class="columns" -> 콘텐츠 형태로 구성되며, 기타 사용법은 Foundation홈페이지에 상세하게 나와있다.

 

 Foundation 사용법 링크

 

nav.component.html 파일은 아래와 같이 작성한다.  

 

//결과

 위의 코드를 실행했을 때, 아래와 같은 결과를 확인할 수  있다.